* {
  box-sizing: border-box;
}
:root {
  --base: #191919;
  --secondary: #3f3f3f;
  --tertiary: #6c6c6c;
  --four: #bababa;
  --accent: #7ead41;
  --secondacc: #c4d237;
  --inbetween: #f0db36;
  --two: #df9b35;
  --thirdacc: #c26516;
  --fouracc: #c24816;
  --black: #000;
  --white: #fff;
}
body {
  background: var(--black);
  color: var(--tertiary);
  max-width: 480px;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  animation: load 0.4s ease-out;
  overflow-x: hidden;
  margin: 1rem;
}
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  color: var(--accent);
}
h2,
h3 {
  color: var(--secondacc);
}
a {
  color: var(--secondacc);
  transition: 0.2s;
  text-decoration: dotted underline;
}
a:hover {
  font-style: italic;
  color: var(--accent);
}
img {
  max-width: 100%;
}
@keyframes load {
  from {
    opacity: 0.5;
    transform: translate(0, 2em);
  }
  to {
    opacity: 1;
  }
}