:root {
  --hana-background-color: #ffffff;
  --hana-highlight-color: #000000;
  --carmen: #ff0000;
  --light: rgb(255, 255, 140);
}

/* :root {
  --hana-background-color: #000000;
  --hana-highlight-color: #ffffff;
} */

@font-face {
  font-family: "LoR-Numbers";
  src: url("/LoR-Numbers.otf") format("opentype");
}

@font-face {
  font-family: "Arita";
  src: url("/AritaBuriKR-Medium.ttf") format("truetype");
}

body {
  background-image: url(images/glitch-bg.webp);
  background-size: cover;
}

body fullscreen {
  width: 99vw;
  height: 99vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
}

a {
  text-decoration: none;
}

a carmen {
  box-shadow:
    0 0 5px var(--light),
    0 0 10px var(--light),
    0 0 20px var(--light),
    0 0 40px var(--light),
    0 0 80px var(--light);
  padding: 1em;
}

fullscreen > carmen {
  display: block;
  font-size: 6em;
}

carmen {
  font-family: "Arita", Arial, sans-serif;
  color: var(--carmen);
  text-align: center;
  text-shadow:
    0 0 5px var(--carmen),
    0 0 10px var(--carmen),
    0 0 20px var(--carmen),
    0 0 40px var(--carmen),
    0 0 80px var(--carmen);
}

li carmen {
  font-size: 4em;
}

light {
  color: var(--light);
  text-shadow:
    0 0 5px var(--light),
    0 0 10px var(--light),
    0 0 20px var(--light),
    0 0 40px var(--light),
    0 0 80px var(--light);
}

eye {
  width: 100%;
  height: 100%;
  background-size: cover;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
}

eye img {
  position: absolute;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

eye div {
  background-color: black;
  padding: 1em;
  border-radius: 1em;
}

.major {
  display: block;
  font-size: 6em;
  text-align: center;
}

wrath,
lust,
sloth,
gluttony,
gloom,
pride,
envy,
cogito,
attaraxia,
star,
nu,
ayin {
  --sin: white;

  font-family: "Arita", Arial, sans-serif;
  color: var(--sin);
  text-shadow:
    0 0 5px var(--sin),
    0 0 10px var(--sin),
    0 0 20px var(--sin),
    0 0 40px var(--sin),
    0 0 80px var(--sin);
}

wrath {
  --sin: #cc0000;
}
lust {
  --sin: #ffb700;
}
sloth {
  --sin: #f3f326;
}
gluttony {
  --sin: #00dc00;
}
gloom {
  --sin: #00e7e7;
}
pride {
  --sin: #0000ff;
}
envy {
  --sin: #cc00cc;
}

cogito {
  --sin: #1e9b15;
}

star {
  --sin: #0091ff;
}

attaraxia {
  --sin: #ffffff;
}

nu {
  --sin: #fff9c2;
}

ayin {
  --sin: #898989;
}

.secret{
  background-color: rgb(60, 60, 60);
  padding: 1em;
  border-radius: 1em;
}

note {
  display: block;
  margin: auto;
  max-width: 75%;
  width: 100%;
  margin-top: 200pt;
  margin-bottom: 200pt;
}

note p {
  font-size: x-large;
  text-align: justify;
}