:root {
  --site-bg: #F3F8FF;
  --site-text: #3b469f;
  --h-text: #263079;
  --nav-text: #ffffff;
  --nav-bg: linear-gradient(to right, #4f5bb6, #6e7bc1);
  --nav-border: #263079;
  --scrollbar: #6c63b4;
  --link-text: #da55de;
  --link-visited: #8f55de;
  --button-bg: #3b469f;
  --button-hover: linear-gradient(#3b469f, #505cbe);
  --highlight: #ffadd9;
  --cw-highlight: #ffadd980;
  --selection: #ff8ecb;
  --shadow: #626df580;
  --periwinkle: #C6CFFF;
  --lavender: #E8D3FF;
  --haze: #DEECFF;
  --white: #FFF;
}

@font-face {
  font-family: Atkinson Hyperlegible;
  src: url('/fonts/AtkinsonHyperlegible-Regular.ttf');
}

@font-face {
  font-family: Atkinson Hyperlegible;
  src: url('/fonts/AtkinsonHyperlegible-Bold.ttf');
  font-weight: bold;
}

html {
  font-family: 'Atkinson Hyperlegible', Verdana, ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  scroll-behavior: smooth;
  font-size: 16px;
  tab-size: 4;
}
body {
  margin: 0;
  background-color: var(--site-bg);
  color: var(--site-text);
  font-weight: normal;
  line-height: 1.6em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100vh;
}
#wrapper {flex-grow: 1;}
footer {
  min-height: 45px;
  padding-top:5px;
  padding-inline: 1em;
  color: var(--h-text);
  text-align: center;
}
footer a {
  color: var(--nav-text);
  padding: .5em;
}
footer a:visited {color: var(--nav-text);}
footer a:hover {color: var(--lavender);}

details > summary {cursor: pointer;}

a {color: var(--link-text);}
a:visited { color: var(--link-visited);}
a:hover {text-decoration: none;}

header {
  background: linear-gradient(to left, var(--haze), var(--periwinkle));
  color: var(--h-text);
  height: 84px;
  margin:0;
}
header a,
footer a,
.oc-thumb a,
.ocs section a {text-decoration: none;}

footer,
#navbar {
  background: var(--nav-bg);
  height: auto;
  border-block: 1px solid var(--nav-border);
}
#navbar ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
  list-style-type: none;
  justify-content: flex-start;
}
#navbar li a {
  display: inline-block;
  padding-inline: 1.5em;
  width: auto;
  height: 2rem;
  line-height: 2rem;
  color: var(--nav-text);
  
  font-weight: bold;
  text-decoration: none;
}
#navbar li a:visited {color: var(--nav-text);}
#navbar li a:hover {color: var(--highlight);}

main {
  max-width: 960px;
  width: 100%;
  padding: 1em;
  margin: auto;
}

main section {
  margin-bottom: 40px;
}

h1 {
  font-size: 28px;
  padding: .5em .5em;
}
h1, h2 {
  background: linear-gradient(to left, var(--haze), var(--periwinkle));
  box-shadow: 2px 2px 2px var(--shadow);
  border: 1px solid var(--shadow);
  color: var(--h-text);
  margin-inline: -.2em;
  scroll-margin: 20px;
}
h2 {
  font-size: 24px;
  padding: .2em .5em;
}

.art {
  box-shadow: 2px 2px 8px var(--shadow);
  max-width: 100%;
  margin-bottom: 10px;
}
.ocs small {
  display: block;
  text-align: center;
}
.grid-container {
  display: grid;
  grid-template-columns: 50% 48%;
  gap: 1em;
}

.oc-thumb img {
  box-shadow: 2px 2px 2px var(--shadow);
  border: 1px solid var(--shadow);
  max-width: 100%;
  height: 160px;
  width: 160px;
}
.oc-thumb img:hover {
  box-shadow: 2px 2px 2px var(--highlight);
  border: 1px solid var(--highlight);
}
.smol img {
  height: 80px;
  width: 80px;
}

.details {
  display: inline-block;
  width: 100%;
}
.details h3 {
  background: var(--periwinkle);
  padding: .1em .3em;
  font-size: 1em;
  margin-block: .4em;
}
.details p {
  margin: 0;
}

.cw {
  border: 2px dashed var(--link-text);
  margin-bottom: 10px;
  padding: .3em;
}
.cw summary {
  padding: .2em .5em;
  font-weight: bold;
  font-size: 1.1em;
}

.cw summary:hover {
  background: var(--cw-highlight);
}
.cw img {
  margin-top: 10px;
  margin-bottom:0;
}

#timestamp {
  text-align: right;
}
.bubble {
  background: var(--white);
  box-shadow: 2px 2px 4px var(--shadow);
  border: 1px solid var(--shadow);
  padding: 1em;
  margin-inline: 1em;
  border-radius: .3em;
}
.mybutton {
  height: 2rem;
  padding: .5em 1em;
  background: var(--button-bg);
  border: 1px solid var(--nav-border);
  color: var(--white);

  font-weight: bold;
  border-radius: .3rem;
  text-decoration: none;
}
.mybutton:visited {color: var(--white);}
.mybutton:hover {
  background: var(--button-hover);
  color: var(--highlight);
}
.center {text-align:center;}
.right {text-align:right;}

#faq details > summary {
  background: var(--haze);
  border: 1px solid var(--shadow);
  padding: .2em .5em;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.1em;
}
#faq details[open] > summary,
#faq details > summary:hover {
  background: var(--lavender);
}

hr {
  border: 1px solid var(--periwinkle);
}

::selection {
  background: var(--selection);
  color: var(--white);
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar) var(--periwinkle);
  scrollbar-width: thin;
}

.collection:has(input:checked) a {display: none;}

.collection:has(#all:checked) a,
.collection:has(#femme:checked) a[class~="femme"],
.collection:has(#masc:checked) a[class~="masc"],
.collection:has(#nb:checked) a[class~="nb"],

.collection:has(#alien:checked) a[class~="alien"],
.collection:has(#angel:checked) a[class~="angel"],
.collection:has(#bird:checked) a[class~="bird"],
.collection:has(#bug:checked) a[class~="bug"],
.collection:has(#deer:checked) a[class~="deer"],
.collection:has(#demon:checked) a[class~="demon"],
.collection:has(#dog:checked) a[class~="dog"],
.collection:has(#bug:checked) a[class~="doll"],
.collection:has(#fox:checked) a[class~="fox"],
.collection:has(#human:checked) a[class~="human"],
.collection:has(#magical-girl:checked) a[class~="magical-girl"],
.collection:has(#mech:checked) a[class~="mech"],
.collection:has(#monster:checked) a[class~="monster"],
.collection:has(#pixie:checked) a[class~="pixie"],
.collection:has(#rabbit:checked) a[class~="rabbit"],
.collection:has(#vampire:checked) a[class~="vampire"],
.collection:has(#witch:checked) a[class~="witch"],
.collection:has(#zombie:checked) a[class~="zombie"] {display: inline-block;}

.tag-filters label {
  border: 1px solid var(--shadow);
  background-color: var(--periwinkle);
  padding: .2em .5em .2em .1em;
  border-radius: .2em;
  margin-bottom: .2em;
  display: inline-block;
}
.tag-filters label:hover {
  background-color: #C6CFFFAA;
}
.tag-filters label:has(input:checked) {
  border-color: var(--link-visited);
  background-color: var(--highlight);
  color: rebeccapurple;
}
.tag-filters label:has(input:checked):hover {
  border-color: var(--link-visited);
  background-color: var(--selection);
}
.tag-filters input { appearance: none;
  height: 10px;
  width:10px;
  border: 2px solid var(--site-text);
  border-radius: 50%;
  background-color: var(--white);
}
.tag-filters input:checked {
  background-color: #ff4bfe;
  border-color: rebeccapurple;
}

@media only screen and (max-width: 800px) {
  .grid-container {grid-template-columns: 100%;}
  
  header {
    height: fit-content;
  }
  header img {
    max-width: 100%;
    vertical-align: bottom;
  }
  nav ul {
    padding-left: 0;
  }
  
}