@font-face {
    font-family: "Inconsolata";
    font-style: normal;
    font-weight: 200 900;
    font-stretch: 50% 200%;
    font-display: swap;
    src: url("/fonts/inconsolata/Inconsolata-VariableFont_wdth,wght.woff2") format("woff2"),
         url("/fonts/inconsolata/Inconsolata-VariableFont_wdth,wght.ttf") format("truetype");
}

:root {
    --spaceXXXS: 0.25rem;
    --spaceXXS: 0.375rem;
    --spaceXS: 0.5rem;
    --spaceS: 0.75rem;
    --spaceM: 1rem;
    --spaceL: 1.5rem;
    --spaceXL: 1.75rem;
    --spaceXXL: 2rem;
    --spaceXXXL: 6rem;

    --fontXS: 0.75rem;
    --fontS: 0.9rem;
    --fontM: 1.2rem;
    --fontL: 1.5rem;
    --fontXL: 2.5rem;
    --fontXXL: 5rem;

    --fontJoosh: 7rem;

    --right-col-width: 42ch;
    
    --joosh-navy: #020852;
    
    --joosh-palette-0: #010429;
    --joosh-palette-1: #02063E;
    --joosh-palette-2: #020748;
    --joosh-palette-4: #12185D;
    --joosh-palette-5: #222768;
    --joosh-palette-6: #42467E;
    --joosh-palette-7: #72759F;
    --joosh-palette-8: #A1A3BF;
    --joosh-palette-9: #D0D1DF;

    --joosh-red: #cb0100;
    --joosh-green: #10991c;
    --joosh-indigo: #18236C;
    --joosh-teal:   #0B7C64;
    --joosh-magenta:#8F316E;
    --joosh-lightblue: #2F5DB7;
    --background: #FFFFFF;

    --stroke: 1px solid var(--joosh-navy);

    --box-shadow: var(--spaceXXXS) var(--spaceXXXS) var(--page-shadow),
                    calc(-1 * var(--spaceXXXS)) calc(-1 * var(--spaceXXXS)) var(--page-highlight);
    
    --hover-regular: 0.1s;
    --hover-fast: 0.02s;
}

body {
    /* font-family: ms gothic; */
    font-family: 'Inconsolata', monospace;
    font-optical-sizing: auto;
    font-style: normal;

    font-weight: 400;
    font-stretch: 100%;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    text-rendering: optimizeSpeed;
    /* font-size: 16px; */
    font-size: var(--fontM);
    color: var(--joosh-navy);

	text-wrap: wrap;
    word-break: break-word;

    background-size: cover;
    background-attachment: fixed;
}

.joosh-color-filter {
    filter: url(#joosh-navy-white);
    transition-duration: var(--hover-regular);
}

.joosh-color-filter:hover {
    filter: none;
}

a {
    color: var(--joosh-navy);
    font-weight: 700;
}

a:visited {
    color: var(--joosh-navy);
}

p, h1, h2, h3, h4, h5, sub {
    margin: 0;
    padding: var(--spaceXXS);
}

h1, h2, h3 {
    font-weight: 700;
    font-stretch: 75%;
}

h1 {
    font-size: var(--fontXL);
}

p {
    /* margin-left: var(--spaceM); */
    text-indent: var(--spaceL);
}

ul {
    margin: 0 0 0 var(--spaceL);
    padding: var(--spaceXXS);
}

ol {
    margin: 0 0 0 var(--spaceL);
    padding: var(--spaceXXS);
}

details summary::-webkit-details-marker {
    display: none;
}

code {
    background-color: #ddd;
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.2em;
    line-height: 1;
    background-color: currentColor;
    -webkit-mask: var(--icon-url) no-repeat center / contain;
    mask: var(--icon-url) no-repeat center / contain;
}

/* https://icones.js.org/collection/ph?variant=Regular&s=dash */
.icon-arrow-left { --icon-url: url("https://files.joo.sh/img/icons/regular/arrow-left.svg"); }
.icon-arrow-line-left { --icon-url: url("https://files.joo.sh/img/icons/regular/arrow-line-left.svg"); }
.icon-arrow-line-right { --icon-url: url("https://files.joo.sh/img/icons/regular/arrow-line-right.svg"); }
.icon-arrow-right { --icon-url: url("https://files.joo.sh/img/icons/regular/arrow-right.svg"); }
.icon-arrow-up { --icon-url: url("https://files.joo.sh/img/icons/regular/arrow-up.svg"); }
.icon-arrow-up-right { --icon-url: url("https://files.joo.sh/img/icons/regular/arrow-up-right.svg"); }
.icon-file-arrow-up-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/file-arrow-up-fill.svg"); }
.icon-dots-three-vertical-bold { --icon-url: url("https://files.joo.sh/img/icons/bold/dots-three-vertical-bold.svg"); }
.icon-file-text-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/file-text-fill.svg"); }
.icon-floppy-disk-back-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/floppy-disk-back-fill.svg"); }
.icon-pencil-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/pencil-fill.svg"); }
.icon-plus-bold { --icon-url: url("https://files.joo.sh/img/icons/bold/plus-bold.svg"); }
.icon-push-pin-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/push-pin-fill.svg"); }
.icon-push-pin-slash-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/push-pin-slash-fill.svg"); }
.icon-rss { --icon-url: url("https://files.joo.sh/img/icons/regular/rss.svg"); }
.icon-trash-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/trash-fill.svg"); }
.icon-images-fill { --icon-url: url("https://files.joo.sh/img/icons/fill/images-fill.svg"); }
.icon-list-bullets { --icon-url: url("https://files.joo.sh/img/icons/regular/list-bullets.svg"); }
.icon-selection-slash { --icon-url: url("https://files.joo.sh/img/icons/regular/selection-slash.svg"); }
.icon-envelope-simple-bold { --icon-url: url("https://files.joo.sh/img/icons/bold/envelope-simple-bold.svg"); }
.icon-copyright { --icon-url: url("https://files.joo.sh/img/icons/regular/copyright.svg"); }

:where(input, select, textarea, button) {
    font-family: 'Inconsolata', monospace;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    color: inherit;
}

:where(button:not([class]), input, select, textarea:not([class])) {
    transition-duration: var(--hover-regular);

    background-color: var(--background);
    color: var(--joosh-navy);
    border: none;

    text-decoration: none;

    flex-grow: 1;
    padding: var(--spaceXS);
}

button:not([class]) {
    outline: var(--stroke);
    font-stretch: 125%;
}

:where(input:not([id]), select, textarea:not([class]), textarea[id]) {
    width: 100%;
    min-width: 100%;
    max-width: 100%;

    border: none;

    overflow-y: auto;
    resize: none;
}

textarea:not([class]), select:not([class]),
input:not([class]) {
    resize: vertical;
    outline: var(--stroke);
}

button:not([class]):active {
    background-color: var(--joosh-navy);
    color: var(--background);
}

button:not([class]):hover {
    background-color: var(--joosh-navy);
    color: var(--background);
}

button:not([class]):disabled:hover {
    color: var(--background);
    background-color: var(--joosh-red);
    outline: 1px solid var(--joosh-red);
    cursor: not-allowed;
}


/*  */
/* Classes that may be used across all pages. */
/*  */



.p__indent {
    margin-left: var(--spaceM);
}


.header__underline {
	h3:not([class]):not([id]) {
		outline: var(--stroke);
	}
    h2:not([class]):not([id]) {
		outline: var(--stroke);
	}
}

.sub-section-block {
    display: flex;
    flex-direction: column;
    gap: var(--spaceM);
}

.half-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
    gap: var(--spaceXS);

    padding: var(--spaceXS);
    align-items: center;
}

.half-block img, .half-block video {
	max-width: 100%;
  	width: 100%;
    /* height: 25ch; */
    /* object-fit: cover; */
}

/* Keep site buttons the correct size */
.nekoweb-button {
	display: inline-block;
	width: 88px;
	height: 31px;
}

/* buttons-block is for sidebar buttons */
.buttons-block {
    display: flex;
    align-items: center;
    padding: var(--spaceXXS);
    
    textarea {
        height: 31px;
        word-break: break-all;
        resize: none;
    }
}

.buttons-block__textarea {
    margin-left: var(--spaceXXS);
}



/* CSS RESET https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  	-moz-text-size-adjust: none;
 	 -webkit-text-size-adjust: none;
  	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
 	 list-style: none;
}

/* Set core body defaults */
body {
  	/* min-height: 100vh; */
  	line-height: 1.1;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
 	 line-height: 1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  	text-decoration-skip-ink: auto;
  	color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  /* max-width: 100%; */
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  	font-family: inherit;
  	font-size: inherit;
}

/* textarea {
    font-size: 14px;
} */

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  	scroll-margin-block: 5ex;
}