/* Colors */
@import url("denight.css") only screen;
@import url("delight.css") only screen and (prefers-color-scheme: light);

:root {
    --header: rgb(91, 91, 91);
	--header-text: white;
}

@viewport {
 width: device-width;
 zoom: 1.0;
} /* This bit makes it so that the page scales with your browser's window. Neat and necessary! */

body {
	font-family: 'Commit Mono', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	background: var(--bg);
	color: var(--text);
	line-height: 1.5em;
    margin: 0; padding: 0;
}

header {
    text-shadow: -2px -2px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 2px 0 #000;
    background-image: url("../images/chromeheader.webp");
    padding: 1em;
    text-align: center;
}

header, header a {color: var(--header-text);}

header a:not(a:hover) {
    text-decoration: none;
}

header a:focus {background: black;}

header h1 {font-family: Dyslexie, OpenDyslexic, 'Title', 'Commit Mono', Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;}

main {
	max-width: 65ch;
	margin: 1.5em auto 3em auto;
	padding: 0.4em;
	text-wrap: balance;
	word-break: break-word;
}

a:not(header a) {
    color: var(--link);
    text-underline-offset: -0.25em;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 0.5em;
    text-decoration-skip-ink: none;
  }

a:hover:not(header a) {
    filter: brightness(110%);
    background: rgba(25,255,0,0.2);
}

.visitor, i {
    color: var(--visitor);
}

blockquote:not(.local), .visitor, i {
    font-family: Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', Verdana, Ubuntu, roboto, noto, Arial, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, -apple-system, BlinkMacSystemFont, Sans-Serif;
}

i em {
    font-style: normal; 
    background: var(--bg-darker); 
    border-radius: 5px;
}

.underline, h1:not(header h1) {border-bottom: 1px solid var(--text);}
.space-above {margin-top: 2em;}
.large-space-above {margin-top: 5em;}
.tab, dd {margin-left: 1ch;}
dt, dfn {font-weight: bold;}
.short {line-height: 1em;}
img, pre {max-width: 100%;}

.right {text-align: right;}
.center {text-align: center;}
img.center {display: block; margin-left: auto; margin-right: auto;}
img {border: 0.8em solid black; max-width: calc(100% - 1.6em);}
.tiny {font-size: 0.7em;}

#mode-toggle {position: fixed; bottom: 0.5em; right: 0.5em; font-size: 1.50em; background-color: rgba(255,255,255,1); color: black; border: none;}
.lowercase, h1:not(header h1), h2, h3, h4, h5, h6 {text-transform: lowercase;}
h1:not(header h1), h2, h3, h4, h5, h6 {background: var(--headingbg); padding: 0.2em;}

.box {border: 1px solid var(--text); padding: 0.7em; margin-bottom: 1em;}
.box + :is(p, h2, h3, h4, h5, h6, ul, ol) {margin-top: 2em;}

blockquote {margin-right: auto; margin-left: 0; padding-left: 1em; border-left: 1px solid var(--text);}
mark {background: var(--bg-darker); color: var(--text);}
summary {border-bottom: 1px solid transparent;}
summary:hover {cursor: pointer; font-weight: bold; border-bottom: 1px solid var(--text);}

li {margin-bottom: 1em;}
dd {margin-bottom: 0.5em;}

@media only screen and (min-width: 1000px) {
	.tab {margin-left: 4ch;}
	dd {margin-left: 2ch;}
	#mode-toggle {text-orientation: sideways-right; writing-mode: vertical-rl; opacity: 60%;}
	#mode-toggle:hover {opacity: 100%;}
  html {border-left: 2em solid black; border-right: 2em solid black; min-height: 100vh;}
}

:target {border: 1px solid var(--text); padding: 0.5em; background: rgba(255,255,255,0.1);}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Commit Mono';
    font-style: normal;
    font-weight: 500;
    src: local("Commit Mono Regular"),
    url('/resources/fonts/CommitMono/CommitMono-ligatures-500-Regular.otf') format('opentype');
  }

  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Commit Mono';
    font-style: italic;
    font-weight: 500;
    src: local("Commit Mono Regular"),
    url('/resources/fonts/CommitMono/CommitMono-ligatures-500-Italic.otf') format('opentype');
  }

  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Commit Mono';
    font-style: normal;
    font-weight: 700;
    src: local("Commit Mono Regular"),
    url('/resources/fonts/CommitMono/CommitMono-ligatures-700-Regular.otf') format('opentype');
  }

  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Commit Mono';
    font-style: italic;
    font-weight: 700;
    src: local("Commit Mono Regular"),
    url('/resources/fonts/CommitMono/CommitMono-ligatures-700-Italic.otf') format('opentype');
  }

  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Title';
    font-style: normal;
    font-weight: 400;
    src: local("Game Of Squids"),
    url('/resources/fonts/game_of_squids/Game Of Squids.otf') format('opentype');
  }