:root {
  --accent-faded: #001536;
  --accent: #003282;

  --font-main: 'PixelPetit', sans-serif;
  --font-mono: 'PixelPetit Mono', monospace, serif;
  --font-text: 'Helvetica', '-apple-system', 'Tahoma', 'system-ui', sans-serif;

  --VIGOR: #BA0000;
  --EMPATHY: #FEED3D;
  --COMPASSION: #FFBBFF;

  --NIHILISM: #FADEAD;
  --GREED: #DEAF00;
  --BURNING-HATRED-FOR-THIS-WORLD: #EE3264;
  color: white;
}

/* wrapper stuff */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  position: relative;
}

.main {
  display: flex;
  position: relative;
  max-width: 100%;
  z-index: 1;
  background-color: hsla(0, 0%, 0%, calc(3/8))
}

.inner {
  padding: 2rem 3rem;
  max-width: 100%;
  width: 44rem;
  z-index: 1;
}

.gamebox {
  display: inline-block;
  background-color: black;
  border: 2px solid var(--NIHILISM);
  margin: 4px;
  padding: 16px;
  font-family: var(--font-mono);
  & h2 {
    font-size: 32px;
    margin: 0;
    font-family: var(--font-main);
  }
  width: 256px;
  &.wide {
    width: 512px;
  }
  &.choice {
    margin: 4px;
    width: 256px;
    & .button {
      width: 64px;
      display: table-cell;
      text-decoration: none;
      color: white;
      padding: 4px;
      border: 2px;
      &:hover {
        color: var(--COMPASSION);
        &:before {
          display: contents;
          content: ">";
        }
      }
      &:first-child {
        margin-top: 16px;
      }
      &.negative:hover {
        color: var(--BURNING-HATRED-FOR-THIS-WORLD);
      }
    }
  }
}

/* animations */
@keyframes bobbing {
  0% {
    margin-top: 0;
  }

  25% {
    margin-top: 1px;
  }

  50% {
    margin-top: 0;
  }

  75% {
    margin-top: -1px;
  }

  100% {
    margin-top: 0;
  }
}

@keyframes blink {
  0% {
    opacity: 1
  }

  74% {
    opacity: 1
  }

  75% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

/* text */
.text {
  font-family: var(--font-text);
  z-index: 1;
}

a {
  color: var(--GREED);
}

/* my custom font */
@font-face {
  font-family: 'PixelPetit';
  src: url("assets/fonts/PixelPetit.ttf");
}

@font-face {
  font-family: 'PixelPetit Mono';
  src: url("assets/fonts/PixelPetitClassic.ttf");
}

/* some fun font styles */

.note {
  font-family: var(--font-text);
  opacity: 0.75;
  font-size: 0.9rem;
}

.NIHILISM {
  font-family: sans-serif;
  font-size: 0.95rem;
  COLOR: VAR(--NIHILISM);
  opacity: 80%;
  font-weight: 600;
  &.gamebox {
    font-family: var(--font-main) !important;
    opacity: 100%;
    font-size: 1rem;
    }
  }
}

.gamebox {
  margin: 4px;
  padding: 16px;
  border: 2px solid var(--NIHILISM);
  display: inline-block;
  width: 256px;
  font-family: var(--font-mono);
  background-color: black;
}

.COMPASSION {
  COLOR: VAR(--COMPASSION);
}

.HEALTHPOINTS {
  COLOR: VAR(--VIGOR);
}

.ULTIMATUM {
  COLOR: VAR(--BURNING-HATRED-FOR-THIS-WORLD);
  FONT-WEIGHT: 600;
}

.ULTIMATUM SPAN {
  FONT-WEIGHT: 900;
}

.serious.text {
  font-family: var(--font-text);
  font-size: 0.95rem;
}

.serious.note {
  font-size: 0.9rem;
}

.serious a {
  color: var(--EMPATHY);
  text-decoration: none;
}

.no-aa {
  font-smooth: never;
  -webkit-font-smoothing: none;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.love {
  font-family: var(--font-main);
  font-size: 32px;
}

.lowercase {
  text-transform: lowercase;
}

.blink {
  animation: blink 2s infinite 0s;
}

.luv {
  display: inline-flex;
  margin-bottom: 50px;
  position: absolute;
  margin-left: 0.5rem;
}

.luv1 {
  animation: bobbing 1.2s infinite -1s;
}

.luv2 {
  animation: bobbing 1.2s infinite -0.8s;
}

.luv3 {
  animation: bobbing 1.2s infinite -0.6s;
}

.luv4 {
  animation: bobbing 1.2s infinite -0.4s;
}

.luv5 {
  animation: bobbing 1.2s infinite -0.2s;
}

.luv6 {
  animation: bobbing 1.2s infinite 0s;
}

.emphasis {
  animation: bobbing 3s infinite;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

/* page intro */
.header {
  font-weight: normal;
  font-family: var(--font-main);
}

h2.header {
  margin-bottom: 16px;
}

#intro-header {
  font-family: var(--font-main);
  font-size: 32px;
  margin-bottom: 17px;
}

.tags {
  font-family: var(--font-main);
  margin-top: -21px;
  display: flex;
  flex-direction: row-reverse;
}

.tags>* {
  margin-right: 4px;
}

.tags>img.identity {
  margin-right: 8px;
}

.tags .pronouns {
  background-color: var(--accent);
  padding: 6px 12px 2px 12px;
}

.tags .flag {
  background-size: cover;
  height: 32px;
}

.flag.country.brazil {
  aspect-ratio: 10 / 7;
}

.flag.country.norway {
  aspect-ratio: 128 / 93;
}

#fullbody-avatar {
  height: 100%;
  margin-bottom: -200px;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 65%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 65%);
}

.character {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 25%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 25%);
  width: 160px;
  height: 240px;
  position: absolute;
  margin-left: 120px;
  margin-top: -48px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 16px;
}

h3 img {
  height: 28px;
}

body {
  /*background-color: #F0F0F0;*/
  background-color: #002150;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  word-wrap: break-word;
  overflow-x: hidden;
  display: block;
}

.invisible {
  opacity: 0 !important;
}

.color-highlight {
  padding: 2px;
  border-radius: 5px;
}

.color-highlight.gold {
  background-color: #d29630;
}

.color-highlight.blue {
  background-color: #003282;
}

#footer {
  margin-bottom: 4rem;
}

/* images */

img.avatar {
  width: 16rem;
  height: 16rem;
  border-radius: 10%;
}

img.flag {
  height: 32px;
  display: inline;
  border-radius: 0;

}

img {
  max-width: 100%;
  border-radius: 10px;
}

/* separators */

.separator {
  display: block;
  height: 5px;
  border: 0;
  border-top: 2px solid #fff;
  opacity: 0.5;
}

#intro-separator {
  border-top: 4px solid var(--accent);
  margin-top: -25px;
  margin-bottom: 20px;
}

h2.header+.separator {
  margin-top: -24px;
}

h3.header+.separator {
  margin-top: -16px;
  border-top: 1px solid #000;
}

h2.header#health-header+.separator {
  display: none;
}

.separator+.note {
  margin-top: -8px;
  font-size: 0.75rem;
}

#links-header+.separator {
  border-left: 136px solid #fff;
}

#discord-plus-header+.separator {
  border-left: 300px solid #fff;
}

/* icon code */

a .icon {
  height: 32px;
  width: 32px;
  border-radius: 0;
}

.donations .icon {
  height: 32px;
  width: 32px;
}

a .icon-inline-text {
  color: white;
  font-family: var(--font-main);
  font-size: 8px;
  display: inline;
}

.icon-link {
  text-decoration-line: none;
}

.icons.donations .icon {
  height: 64px;
  width: 64px;
}

[href^="https://imgur.com/"] .icon {
  border-radius: 50%;
}

.icons {
  list-style: none;
  padding-inline-start: 0;
}

.icons li {
  display: inline-block;
  margin-right: 10px;
  border-radius: 50%;
}