@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700;900&display=swap");

:root {
  --ivory-black: #1a2a38; 
  --dark-gunmetal: #263849; 
  --gunmetal: #2d4354; 
  --charcoal: #40576b; 
  --paynes-grey: #4e7a98; 
  --french-grey: #a8b6c0; 
  --alabaster: #d8dad3; 
  --lead-white: #e4e6e0; 
  --gamboge-yellow: #CE8900; 
  --realgar: #E06E41; 
  --vermilion: #F6606D; 
  --fuchsine: #D76AF1; 
  --tyrian-purple: #B163FF; 
  --chartres-blue: #40ABE5; 
  --verdigris: #3FA89D; 
  --scheeles-green: #68A82C;  
}

body {
  font-family: "Exo 2", sans-serif;
  background: linear-gradient(142deg, var(--chartres-blue) 0%, var(--vermilion) 100%);
  color: var(--lead-white);
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.top-title, .bottom-title, a {
text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--lead-white);
  font-weight: 800;
  text-shadow: 
    2px 1px 1px var(--chartres-blue),
    1px 2px 1px var(--gunmetal),
    3px 2px 1px var(--chartres-blue),
    2px 3px 1px var(--gunmetal);
}


.top-title {
  top: 1rem;
  font-size: clamp(1.2rem, 4vw, 1.75rem);
}

.bottom-title {
  bottom: 1rem;
  font-size: clamp(1.2rem, 4vw, 1.75rem);
}

.animated-title {
  color: var(--lead-white);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 0.75em;
  text-align: center;
  transform: skew(0, -10deg);
  text-shadow:
    3px 1px 1px var(--chartres-blue),
    2px 2px 1px var(--gunmetal),
    4px 2px 1px var(--chartres-blue),
    3px 3px 1px var(--gunmetal),
    5px 3px 1px var(--chartres-blue),
    4px 4px 1px var(--gunmetal),
    6px 4px 1px var(--chartres-blue),
    5px 5px 1px var(--gunmetal),
    7px 5px 1px var(--chartres-blue),
    6px 6px 1px var(--gunmetal),
    8px 6px 1px var(--chartres-blue),
    7px 7px 1px var(--gunmetal),
    9px 7px 1px var(--chartres-blue);
}

.animated-title span {
  display: block;
  position: relative;
  transition: opacity 300ms ease-in-out;
}

.animated-title span.is-fading {
  opacity: 0;
}

.disclaimer {
  width: 100%;
  height: 2rem;
  text-align: center;
  color: var(--lead-white);
}