@font-face {
  font-family: "Source Sans 3";
  src: url("/static/SourceSans3.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans 3'; /* Must match the regular font-family exactly */
  src: url("/static/SourceSans3-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Faster One";
  src: url("/static/FasterOne.woff2") format("woff2");
  font-weight: normal;
}

@font-face {
  font-family: "BBH Hegarty";
  src: url("/static/BBHHegarty.woff2") format("woff2");
  font-weight: normal;
}

:root {
  --dark-blue: #021651;
  --blue: #0056ad;
  --light-blue: #38c4dd;
  --teal: #67efd7;
  --deep-teal: #00aa8d;
  --green: #003227;
  --white: #fcfbf9;
  --black: #000000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--deep-teal);
}

/* Elements */

body {
  font-family: "Source Sans 3", sans-serif;
  color: var(--white);
  background-color: var(--black);
}

h1, h2 {
  font-family: "Faster One", sans-serif;
  font-weight: 400;
}

nav {
  background-color: var(--teal);
  font-family: "BBH Hegarty", sans-serif;
  font-variant-caps: all-small-caps;
}

noscript {
  font-size: 16pt;
  color: red;
}

nav > ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  padding: 1rem;
}

nav > ul > li > a {
  color: var(--green);
  text-decoration: none;
  font-size: clamp(1rem, 2vw, 2.5rem);
}

nav > ul > li > a:hover {
  text-decoration: underline;
}

button {
  /* CSS Reset text */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;

  color: var(--black);
  background-color: var(--teal);
  border: 2px solid var(--deep-teal);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

button:active {
  background-color: var(--deep-teal);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  display: block;
  font: inherit;
  width: 280px;
  border-radius: 0;
  padding: 2px 4px;
  border: 2px solid var(--deep-teal);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible {
  border: 2px solid var(--teal);
  outline: none;
}

fieldset {
  border: none;
}

form label,
form legend {
  background-color: var(--black);
}

a {
  color: inherit;
}

sup {
  font-size: 8pt;
}

marquee pre {
  font-family: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid var(--teal);
  padding: 4px;
  text-align: left;
}

/* Classes */

.center {
  justify-self: center;
  text-align: center;
  margin: 0 auto;
}

.black-bg {
  background-color: var(--black);
}

ul.black-bg-contents > li > span {
  background-color: var(--black);
}

.content {
  margin: 1rem;
}

.logo {
  width: 90%;
}

div.poster {
  margin: 0 auto;
  text-align: center;
}

.poster-container i {
  font-size: 14pt;
}

.fullwidth {
  max-width: 90vw;
  max-height: 95vh;
  border-radius: 8px;
}

a[rel~="external"]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: 0.2em;
  translate: 0 0.05em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* IDs All Pages */

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  z-index: -1;
}

/* IDs Home Page */

#logo-img {
  max-width: 400px;
  height: auto;
}

#register-button {
  display: block;
  box-sizing: border-box;
  margin: 1.5rem auto;
  padding: 1rem;
  background-color: var(--teal);
  color: var(--black);
  border: 2px solid var(--deep-teal);
  border-radius: 999px;
  width: 200px;
  height: 80px;
  font-size: 1.5rem; /* clamp(1rem, 2vw, 1.5rem); */
  text-decoration: none;
  text-align: center;
  line-height: 45px;
}

#register-button:hover {
  text-decoration: underline;
}

#register-button:active {
  background-color: var(--deep-teal);
}

#about {
  margin: 1rem;
  text-align: center;
}

#about h1 {
  margin: 1rem;
}

/* IDs FAQ Page */

#faq {
  margin: 1rem;
}

#faq details {
  margin: 1rem;
}

#faq details::details-content {
  opacity: 1;
  block-size: 0;
  overflow: hidden;

  /* Transition both the physical size, opacity, and discrete visibility */
  transition:
    block-size 0.4s ease,
    opacity 0.4s ease,
    content-visibility 0.4s ease allow-discrete;
}

#faq details[open]::details-content {
  opacity: 1;
  block-size: auto; /* Animates from 0 to its natural height automatically */
}

/* IDs Schedule Page */

#schedule-list {
  margin: 1rem;
  list-style-position: inside;
}

/* IDs Registration Page */

#register-stuff {
  margin: 1rem auto;
  width: clamp(300px, 80vw, 800px);
}

#register-stuff div {
  margin: 0.5rem 0;
}

/* IDs Login Page */

#login-stuff {
  --input-width: 280px;
  width: 300px;
  justify-self: center;
  justify-items: center;
  margin: 0 auto;
}

#login-stuff > div {
  margin: 1rem;
}

#login-stuff input {
  display: block;
  width: var(--input-width);
}

#login-footer {
  width: var(--input-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* IDs Profile Page */

#character-description p {
  text-indent: 2em;
}

#character-description ul,
#character-description li {
  padding: revert;
}