@import url("/resources/styles/color-themes/light-mode.css");
@import url("/resources/styles/color-themes/dark-mode.css") only screen and (prefers-color-scheme: dark);
@import url("/resources/styles/color-themes/high-contrast-mode.css") only screen and (prefers-contrast: more), (forced-colors: active);

/* ---------------- FONTS ------------------ */
/* See https://systemfontstack.com/ */

body {
    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;
    font-size: 1em;
    line-height: 1.5em;
    word-spacing: 0.05em;
}

main :is(h1, h2, h3, h4, h5, h6) {
  font-weight: normal; font-family: Dyslexie, OpenDyslexic, Libre Baskerville, Times New Roman, Iowan Old Style, Apple Garamond, Droid Serif, Baskerville, Times, Source Serif Pro, Serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 
  line-height: 1.5em;
  }
  
code, pre {
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 
  font-size: 0.9em;
  }

h1 {font-size: 1.9em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.05em;}
header h1 {
  line-height: 1em; 
  font-size: 2em;
}

@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("Built Titling"),
	url('/resources/fonts/built-titling/built-titling-bd.woff2') format('woff2'),
	url('/resources/fonts/built-titling/built titling bd.woff') format('woff'),
	url('/resources/fonts/built-titling/built titling bd.ttf') format('truetype'),
	url('/resources/fonts/built-titling/built titling bd.otf') format('opentype');
  }

/* ---------------- COLORS ---------------- */

/* General */
header {background: var(--headfoot); background-image: var(--imgbg);}
body {background: var(--main); color: var(--text); background-image: var(--imgmain); background-blend-mode: darken;}

/* Links */
a:link:not(header a) {color: var(--link);}
a:visited:not(header a) {color: var(--visitedlink);}
main a:hover, main a:focus {color: var(--headfoot);}
header a:hover {color: var(--headfoot-text);}

/* Inverted and lightened text */
header, header a {color: var(--headfoot-text);}
blockquote, figcaption, details[open] > summary, summary:hover {color: var(--lighttext);}
#metadata summary {color: var(--text);} /* not you */

/* Boxes and set-off text */
blockquote {border-left: 1px solid var(--accent2);}
aside:not(#metadata-container), pre, code:not(pre code), kbd, .bg, input, main :is(h1, h2, h3, h4, h5, h6, .bg-darker), #metadata summary, #metadata dd {background: var(--bg-darker);}
details, details[open] > summary, legend {border-bottom: 2px dotted var(--accent2);}
nav p, main h2, h3, h4, h5, h6, .lined-bottom, input {border-bottom: 1px solid var(--accent);}
#metadata dd {border-bottom: 1px solid var(--accent);}
#metadata :is(dt, dd) {border-left: 1px solid var(--accent);}

/* Skip link */
#skiplink {color: transparent; background: transparent;}
#skiplink:focus, #skiplink:active, #skiplink:target {background: var(--main); color: var(--link); border: 2px solid var(--accent);}

/* Forms and tables */
input[type=submit] {background-color: rgba(255,255,255,0.3);}
input[type=submit]:active, th, textarea {background-color: var(--bg-darker);}
table {border-collapse: collapse;}
button {background: var(--bg-darker); border: 2px solid var(--accent); color: var(--text);}
select {accent-color: var(--text); background: var(--bg-darker);}

/* Other */
.box, iframe {border: 2px solid var(--accent); background: rgba(190, 190, 170, 0.1);}
mark {background-color: var(--mark); color: var(--text); border: 1px solid var(--accent);}
hr {background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--accent), rgba(0, 0, 0, 0)); border: 0; height: 2px;}
*:focus {outline: var(--emphasis) solid 3px; border-radius: 5px;}
.secret {color: var(--emphasis);}
.secret:hover, .secret:focus, .secret:active {background: var(--bg-darker); text-decoration: underline wavy;}
.sr-only {background: none !important; color: var(--main);}
#summary {border-bottom: 1px solid var(--accent);}

::selection {background: var(--emphasis); color: var(--highlight-txt);}
:target {background-color: rgba(255,255,255,0.3); border: 1px solid var(--accent);}

/* Scrollbars */
::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track, .box::-webkit-scrollbar-track {background: var(--main);}
::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb, .box::-webkit-scrollbar-thumb {background: var(--headfoot);}
:root, iframe, .box {scrollbar-color: var(--headfoot) var(--main);}

/* --------------- FLEXBOX ----------------- */

.container {
  display: flex; 
justify-content: space-between;
}

.adaptive-flex-container {
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap;
  }
  
@media only screen and (orientation: landscape) {
    .adaptive-flex-container {flex-direction: row;}
    .one-third-flex-basis {
      flex-basis: 33%; 
      max-width: 33%;
    }
}

/* --------------- GENERAL STYLING --------------- */

body {margin: 0;}

header, footer {
	background: var(--headfoot); 
	background-image: var(--imgbg);
	text-align: center;
}

header {
	padding: 0;
	min-height: 20em;
}

header a:hover, footer a:hover, footer a {color: var(--headfoot-text) !important;}
header, footer, header a, footer a {color: var(--headfoot-text);}

header h1 {
	font-size: 4em;
	font-family: "Title", "DIN Condensed", sans-serif;
	text-transform: uppercase;
	margin-bottom: 0;
	text-shadow: rgba(0, 0, 0, 0.5) 0 3px 0;
}

header p {
	text-transform: lowercase;
	margin-top: 0;
	z-index: 3;
	position: relative;
	text-shadow: rgba(0, 0, 0, 0.5) 0 3px 0;
}

#header-grad {
	z-index: 2; position: relative;
	pointer-events: none;
	padding: 2em 0 0 0;
	background: linear-gradient(180deg, rgba(20, 22, 55, 0.2) 15%, rgba(165, 223, 138, 0.3) 100%);
}

iframe {
	margin: 0; 
	display: block; 
	width: calc(100% - 4px); height: calc(100% - 4px - 4.1em); 
	border: 2px solid var(--accent); 
	background: var(--main); 
	overflow-y: visible;
}

.container {
	display: flex; 
	flex-direction: row; 
	justify-content: center;
	gap: 1em;
	flex-wrap: wrap;
	max-width: 80em;
	margin: 0 auto;
}

#updates {
	border: none; 
	min-height: 10em; max-height: calc(60em + 2px); 
	flex-basis: 45%; 
	overflow-y: scroll; overflow-x: clip; 
	margin-top: calc(1.2em - 2px); /* Level with image border */
}

#links {flex-basis: 51%;}

#links p.center {
	line-height: 1em; 
	margin: 0.8em 0 0.6em 0;
}

nav {border: 2px solid var(--accent);}
nav li:nth-child(even) {background: var(--bg-darker);}
nav ul {padding: 0; margin: 0;}
nav li {
	line-height: 1.8em; 
	display: block; 
	padding: 0.5em 1em;
}

main :is(h1, h2, h3, h4, h5, h6, .bg-darker) {margin-bottom: 0.3em; padding: 0.6ch 0.5ch;}
.box p {padding: 0 1em;}
.box section:first-of-type :is(h1, h2, h3, h4, h5, h6):first-of-type, .box :is(h1, h2, h3, h4, h5, h6):first-of-type:not(section :is(h1, h2, h3, h4, h5, h6):first-of-type) {margin-top: 0;}

#tau {text-align: right; margin-right: 1em;}

.center {text-align: center;}
img.center {margin-right: auto; margin-left: auto;}
img.right {display: block; margin-left: auto; margin-right: 0;}
header img {display: block;}

#welcome {
	margin-bottom: 0; 
	padding-bottom: 0;
	margin-top: -3em;
	position: relative;
	z-index: 2;
}

img {max-width: 100%;}
footer {line-height: 1.2em; padding: 1em 0.5em; max-width: 100%;}
footer p {max-width: 90ch; margin: 0 1em; text-align: left;}
#no-ai {margin-top: -1.5em;}
#age-rating {margin-bottom: 0; margin-top: 1.5em;}

@media only screen and (max-width: 900px) {
	.container {flex-direction: column;}
	footer p {line-height: 1.6em;}
	#no-ai {margin-top: 0.5em;}
	header {min-height: 10em;}
	header h1 {font-size: 3em; margin-top: 0.25em;}
	#tau {margin-top: 4em;}
	main {padding: 0 0.7em;}
}