@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160;300;400;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Rubik+Spray+Paint&display=swap");

html {
  --chili-red: #ca3c25ff;
  --jonquil: #ffcf00ff;
  --melon: #f9b5acff;
  --cosmic-latte: #fffbecff;
  --dark-spring-green: #3b7546ff;
  --myrtle-green: #3d7068ff;
  --dark-green: #00241bff;
  --midnight-green: #093a3eff;
  --drab-dark-brown: #463f1aff;
  --orange-crayola: #fa6e24ff;
  --palatinate-blue: #3630d9ff;
  --icterine: #f8f983ff;
  --malachite: #28e561ff;
  --ultra-pink: #fa6feeff;
}

body {
  font-family: "Readex Pro";
  font-weight: 400;
  background-image: url("/shrines/images/annihilation/annihilation-background-vector.png");
  background-size: cover;
  background-repeat: no-repeat;
}

h1#title {
  font-family: Rubik Spray Paint;
  font-size: 70px;
  text-transform: uppercase;
  width: 50%;
  position: absolute;
  left: 30px;
  bottom: 20px;
}

h2:not(h2#subtitle) {
  background: var(--malachite);
  color: black;
  padding: 3px;
  font-size: 30px;
  border: 2px dashed;
  text-transform: uppercase;
  border: 3px outset var(--orange-crayola);
  border-radius: 10px;
}

h2#subtitle {
  position: absolute;
  left: 30px;
  bottom: 20px;
}

h3 {
  background-color: var(--cosmic-latte);
  padding: 10px;
  text-transform: uppercase;
  border: 3px groove var(--jonquil);
  border-radius: 10px;
}

nav {
  margin-right: 30px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  padding-left: 1rem;
  text-indent: -0.75rem;
}

nav li a {
  padding-left: 1rem;
  font-weight: 900;
}

li ul li a {
  text-decoration: none;
  padding-left: 1rem;
  cursor: zoom-in;
}

li.annihilation ul li::before {
  content: "𝐱";
}

li.authority ul li::before {
  content: "⌾";
}

li.acceptance ul li::before {
  content: "↺";
}

li.absolution ul li::before {
  content: "Ⅱ";
}

li.movie ul li::before {
  content: "⛯";
}

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 100%;
}

#maincontent {
  width: 60%;
  height: 450px;
  padding: 10px;
  overflow-y: scroll;
  border: 15px dashed var(--jonquil);
}

#skiplink {
  display: none;
}

#skiplink:focus {
  display: block;
}

#backlink {
  background: black;
  padding: 2px;
  border: 3px outset black;
  color: white;
}

#annihilation h2.annihilation {
  background-color: var(--malachite);
  color: var(--dark-green);
  padding: 20px;
}

#authority h2.authority {
  background-color: var(--jonquil);
  color: var(--palatinate-blue);
  padding: 20px;
}

#acceptance h2.acceptance {
  background-color: var(--orange-crayola);
  color: black;
  padding: 20px;
}

#absolution h2.absolution {
  background-color: var(--icterine);
  color: black;
  padding: 20px;
}

#movie h2.movie {
  background-color: var(--chili-red);
  color: var(--cosmic-latte);
  padding: 20px;
}

.character-name {
  font-weight: 900;
  border-image: linear-gradient(
    to left,
    var(--midnight-green) 0%,
    var(--myrtle-green) 25%,
    var(--dark-spring-green) 50%,
    var(--jonquil) 75%,
    var(--chili-red) 100%
  );
  border-image-slice: 1;
  border-bottom: 4px solid transparent;
  margin-bottom: 0.3em;
}

.character {
  padding: 20px;
  margin-bottom: 20px;
  color: var(--icterine);
  background: black;
}

.character:nth-of-type(2n) {
  color: var(--cosmic-latte);
  background: black;
}

.annihilation {
  background-color: var(--palatinate-blue);
  padding: 12px;
}

li.annihilation a,
li.annihilation {
  color: white;
}

.authority {
  background-color: var(--myrtle-green);
  color: var(--cosmic-latte);
  padding: 12px;
}

li.authority a,
li.authority {
  color: var(--icterine);
}

.acceptance {
  background-color: var(--cosmic-latte);
  padding: 12px;
}

li.acceptance a,
li.acceptance {
  color: var(--palatinate-blue);
}

.absolution {
  background-color: var(--orange-crayola);
  padding: 12px;
}

li.absolution a,
li.absolution {
  color: black;
}

.movie {
  background-color: black;
  padding: 12px;
}

li.movie a,
li.movie {
  color: var(--cosmic-latte);
}

div.quote {
  border: 3px solid black;
  padding: 20px;
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.annotation {
  margin-top: 5px;
  background-color: var(--icterine);
  font-size: 12px;
}

.thought {
  border: 2px dashed;
  margin-bottom: 10px;
  padding: 4px;
}

@media only screen and (max-width: 500px) {
  nav ul {
    display: none;
  }
}