@import url("normalize.css");
@import url("feed.css");
@import url("post.css");
@import url("fanlistings.css");
@import url("footnotes.css");
@import url("generators.css");
@import url("fic.css");
@import url("images.css");
@import url("h-card.css");
@import url("cta.css");

@font-face {
  font-family: 'silkscreen';
  src: url('/css/slkscr-webfont.woff') format('woff'), url('/css/slkscr-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-size: 8px;
  font-smooth: never;
}
@font-face {
  font-family: 'Noto Mono';
  src: url('/css/NotoMono-Regular.woff') format('woff'), url('/css/NotoMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans Bold';
  src: url('/css/NotoSans-Bold.woff') format('woff'), url('/css/NotoSans-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans Italic';
  src: url('/css/NotoSans-Italic.woff') format('woff'), url('/css/NotoSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans Regular';
  src: url('/css/NotoSans-Regular.woff') format('woff'), url('/css/NotoSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
    scroll-behavior: smooth;
  }

  :root {
    --primary: white;
    --background: #21222C;
    --accent: #FFCA80;
    --w-opacity: rgba(255,255,255,.1);
    --b-opacity: rgba(0,0,0,.5);
    --font: "Noto Sans Regular", sans-serif;
    --code: "Noto Mono", monospace;
    --heading: "Noto Sans Regular", sans-serif;
    --pixel: silkscreen, monospace;
    --italic: "Noto Sans Italic", sans-serif;
    --bold: "Noto Sans Bold", sans-serif;
    --mobile-margin: 25px;
    --desktop-margin: 50px;
    --transition: .5s;
    --border-radius: 0;
    --box-shadow: rgba(0,0,0,.5);
    --adult-content-cursor: url(/img/adult-content-cursor.png);
    --important-cursor: url(/img/important-cta-cursor.png);
    --party-cursor: url(/img/party-cursor.png);
    }

html, body {font-size: 12pt;}
body {
  line-height: 1.75;
  letter-spacing: .1em;
  font-family: var(--font);
  background-color: var(--background);
  color: var(--primary);
}

a:link, a:visited {
  color: var(--accent);
  letter-spacing: .2em;
  text-decoration: none;
  font-weight: bold;
  transition: var(--transition);
  border: none;
}
a:hover, a:active {
  transition: var(--transition);
  border-bottom: 1px solid var(--accent);
}

h1,h2,h3 {
  font-family: var(--bold);
  text-transform: uppercase;
  background-color: var(--w-opacity);
  color: var(--primary);
  padding: 0 .5rem;
  margin: 2em 0 1rem 0;
}
h1 {font-size: 1.5rem;}
h2 {font-size: 1.25rem;}
h3 {font-size: 1rem;}

ul,ol {margin: 1rem 2rem; padding: 0;}
div {break-inside: avoid-column;}
code, pre {font-family: var(--code);}
i,em {font-family: var(--italic);}
b,strong {font-family: var(--bold);}
small {font-size: 80%;}
sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
input {font-size: 1rem; border: 1px solid var(--primary); border-radius: 0; background-color: var(--background);}
abbr[title] {text-decoration: none;border-bottom: 1px dashed;}
hr {
  width: 50%;
  margin: var(--desktop-margin) auto;
  border: 0;
  border-top: 3px solid var(--accent);
  box-shadow: 3px 3px 0 var(--b-opacity);
}
blockquote {
  border: 1px solid var(--w-opacity);
  border-radius: var(--border-radius);
  padding: .25rem 1rem;
}

.welcome-statement {
  font-weight: bold;
}

#faves ul {
  columns: 200px 2;
  column-gap: 2rem;
}
#faves ul li {
  break-inside: avoid-column;
}


/*************** LAYOUT **************/

/* mobile first */
header {
  border-block-end: 1px solid var(--w-opacity);
  margin: 0;
  padding: 1rem 2rem;
}
header h1 {
  margin: 0 1rem 0 0;
   display: block;
   background-color: transparent;
   font-size: 2rem;
  }
nav {margin: 0;}
nav div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
nav a:link,nav a:visited {
  margin: .5rem;
  text-transform: uppercase;
}
nav a:hover,nav a:active {}
nav a:active {}
main {margin: 2rem;}

footer {
  margin: 0;
  padding: 2rem;
  background-color: #121212;
}

footer li {
  list-style-type: none;
}

footer h3 {
  margin: 1rem 0 0;
}

footer section:first-of-type {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
  gap: 1rem;
}

footer .h-card {flex-basis: 500px;}
footer .footer-links {flex-basis: max-content;}
footer .about-site {flex-basis: 400px;}

footer section:last-of-type {
  font-size: .8rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  border-top: 1px solid var(--w-opacity);
  padding-block-start: 1rem;
}
footer section:last-of-type a:link {
  font-family: var(--font);
  font-weight: normal;
}

.layout-fic,
.layout-post,
.layout-roundup,
.layout-main:has(div.rec),
.fanlistings main,
.now main,
.prompts main,
.web main,
.recs main,
.faves main,
.links main,
.elsewhere main {
max-width: 768px;
margin-inline: auto;
padding-inline: 2rem;
}

/* WEBRINGS */
.fanfiction-webring {
display: flex;
justify-content: space-around;
margin: 1rem;
}
.fanfiction-webring img {
filter: hue-rotate(170deg) grayscale(66%) opacity(33%);
}
.fanfiction-webring img:hover {
filter: hue-rotate(170deg) grayscale(66%) opacity(75%);
}
.fanfiction-webring a:hover {
background-color: transparent;
border: none;
}

/* COMMENTS - CUSDIS */
#cusdis_thread {
background-color: #121212;
  padding: .5rem;
  border: 1px solid var(--b-opacity);
  outline: 1px solid var(--background);
  box-shadow: 5px 5px 0 var(--b-opacity);
  margin-block: .5rem;
}




/* tablet */
@media (min-width: 768px) {  

  header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }

  nav {font-size: .8rem;}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
  gap: 1rem;
}
.flex-container2 p:first-of-type {
margin-block-start: 0;
}


}

/* desktop */
@media (min-width: 1024px) {    

body {
max-width: 1366px;
margin-inline: auto;
}

}