/* FONTS */
@font-face {
  font-family: 'Libre Baskerville';
  src: url('/interface/2025_gradients/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('/interface/2025_gradients/LibreBaskerville-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('/interface/2025_gradients/LibreBaskerville-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

/* UNIVERSAL ELEMENTS */
* {
  box-sizing: border-box;
}

html {
  position: relative;
  padding: 0 1ch 0 1ch;
  min-height: 100svh;
  font-size: 16px;
  color: #202020;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;  
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100vw 100vh;
}

html::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

body {
  position: relative;
  border: black 3px solid;
  background: transparent;
  padding: .8em 1rem 0 1rem;
  margin: 1rem auto 2rem auto;
  max-width: 72ch;
  text-size-adjust: 100%;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  z-index: 1;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
}

html, body {
  min-width: 220px;
}

/* Ensure header/main/footer sit above the masked white sheet */
header, main, footer {
  position: relative; z-index: 1;
}


a {
  color: #3939a0;
}

a:visited {
  color: #680268;
}

a:hover {
  color: #962b96;
}

a:active {
  color: #700303;
}

main {
  flex: 1;
}

article p,
article li {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.12rem;
  line-height: 1.7;
}

header .profile_pic {
  float: left;
  width: 10em;          /* controls size; scales with font */
  height: auto;        /* preserve aspect ratio */
  margin: 0 1rem 0.5rem 0;  /* space to the right and a bit below */
}

/* Ensure the nav drops below the floated image/text */
header::after {
  content: "";
  display: block;
  clear: both;
}

header h1 {
  margin: 2rem 0 0.25rem 0;
}
header p {
  margin: 0 0 0.75rem 0;
}

@media (max-width: 500px) {
  header .profile_pic {
    float: none;
  }
  header h1 {
    margin: 0 0 0.25rem 0;
  }

}


.linktree ul {
  padding-left: 0;
}

.linktree ul li {
  position: relative;
  padding-left: 5rem;
  margin-bottom: 1rem;
  min-height: 4rem;
  list-style-type: none;
}

.linktree ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  width: 4rem;
  height: 4rem;
  background-image: url('images/link_icon_test.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}

#whats_new ul li.top-link-new-1::before {
  background-image: url('images/top_icon_new_tfc2025.png');
}

#whats_new ul li.top-link-new-2::before {
  background-image: url('images/top_icon_ftg.png');
}

#whats_new ul li.top-link-new-3::before {
  background-image: url('images/instagram_art.png');
}

#links ul li.top-link-medium::before {
  background-image: url('images/top_icon_ftg.png');
}

#links ul li.top-link-threads::before {
  background-image: url('images/top_icon_threads.png');
}

#links ul li.top-link-instagram-art::before {
  background-image: url('images/instagram_art.png');
}

#links ul li.top-link-instagram-personal::before {
  background-image: url('images/top_icon_personal_insta.png');
}

#links ul li.top-link-bibliography::before {
  background-image: url('images/top_icon_bibliography.png');
}

#links ul li.top-link-goodreads::before {
  background-image: url('images/top-icon-goodreads.png');
}

#links ul li.top-link-ymiaft::before {
  background-image: url('images/top_icon_ymiaft.png');
}

#links ul li.top-link-mari::before {
  background-image: url('images/top_icon_mari.png');
}

#links ul li.top-link-about::before {
  background-image: url('images/top_icon_about.png');
}

#links ul li.top-link-contact::before {
  background-image: url('images/top-icon-contact.png');
}

img {
  max-width: 100%;
  height: auto;
}

cite {
  font-weight: bold;
}

footer {
  /*
  Styles to make the footer
  stick to the bottom.
  */
  flex-shrink: 0;
  border-top: thin solid;
  padding: .3em 0 .5em 0;
  margin-top: 1rem;
}

footer svg {
  margin-right: .2em;
}

footer svg path {
  /*
  Change the color of the
  Creative Commons SVG icons.
  */
  fill: #000000;
}

form input,
form select,
form textarea {
  display: block;
}

figure {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  /* 9:6 ratio box */
  padding-bottom: 66.67%;
  /* Make this at least
  as much as the height of the
  "bottom" parameter in
  the figcaption element. */
  margin: 0 0 2.5em 0;
}

figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

figure:after {
  content: "";
  display: block;
  padding-bottom: 0.5em;
}

figure figcaption {
  position: absolute;
  bottom: -1.5em;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1em;
}

/* PSEUDO-ELEMENTS */
::selection {
  background-color:#888888;
  color: #333333;
}

/* UNIQUE ELEMENTS */
#top_level_nav,
#archive_nav {
  position: absolute;
  top: 0;
  right: 0;
  font-size: .75em;
}

#top_level_nav li,
#archive_nav li {
  display: inline;
  list-style-type: none;
  text-align: right;
  margin-right: 1rem;
}

#contact_form {
  display: flex;
  flex-direction: column;
  max-width: 37.5em;
  margin: 0 auto 2em auto;
}

#contact_form .form_section {
  margin-bottom: 1.25em;
}

#contact_form label {
  display: block;
  margin-bottom: 0.3125em;
}

#contact_form input,
#contact_form textarea {
  padding: 0.625em;
  border-radius: 0.3125em;
  border: 0.0625em solid #ccc;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
  color: red;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#contact_form input::placeholder,
#contact_form textarea::placeholder {
  color: red;
}

#contact_form textarea {
  height: 9.375em;
}

#contact_form button {
  background-color: red;
  color: red;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding: 0.625em 1.25em;
  border: none;
  border-radius: 0.3125em;
  font-size: 1em;
  cursor: pointer;
}

#contact_form button:hover {
  background-color: red;
}

#contact_form ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 1.25em;
}

#contact_form ul li:before {
  content: "●";
  color: red;
  font-weight: bold;
  display: inline-block;
  width: 1em;
}

#contact_thanks {
  display: none;
}

#debug_output {
  display: none;
}

/*This ID is from hCaptcha
*/
#msg_fail {
  display: none;
}

#bibliography h2 {
  margin-top: 2em;
}

#bibliography h3 {
  margin-top: 2em;
}

/* CLASSES */

.bibliography_url {
  /*
  Really long URLS can sometimes Force
  the page to be wider than the viewport
  on mobile devices or small screens.
  Especially, apparently, URLS with names
  with underscores in them.
  This next command makes it so they will
  break at any character and fit within
  any horizontal width, down to single
  character increments.
  Note these other specs might also
  do similar things, in case I want
  to adjust this for any reason.
  word-break: break-all;
  word-wrap: break-word;
  */
  overflow-wrap: anywhere;
}

.bibliography_list li cite {
  font-weight: bold;
  text-transform: capitalize;
}

.bibliography_list {
  margin-left: 1em;
  padding-left: 0;
  list-style: none;
}

.bibliography_list li {
  margin-top: 1.5em;
  text-indent: -1em;
  line-height: 1.5em;
}

.comic_strip {
  background-color: white;
  border: thin solid red;
  padding: 2em 0 2em 0;
}

.comic_strip figure {
  /*
  For some reason, I'm seeing margins set
  on my <figure> tags. I could not for
  the life of me find out why. So,
  I set them to zero here. If I can
  ever figure out why, maybe this can
  be removed.
  */
  margin: 0;
}

.comic_strip h3 {
  margin-left: 3em;
}