:root {
  --color-highlight: #E4D9FF;
  --color-primary-dark: #30343f;
  --color-primary-light: #fafaff;
  --color-secondary-dark: #273469;
  --color-secondary-light: #ffffff;

  --spacing-mega: 120px;
  --spacing-jumbo: 96px;
  --spacing-x-lg:  60px;
  --spacing-lg:    48px;
  --spacing-md-lg: 36px;
  --spacing-md:    24px;
  --spacing-sm:   12px;
  --spacing-tiny:   4px;


}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Inter';
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 1800px;
  margin: 0 auto;
}

h1 {
  font-size: clamp(2rem, 4vw , 4rem);
  line-height: clamp(2rem, 4vw , 4rem);
}

h2 {
  font-size: clamp(1.2rem, 2vw , 2.4rem);
}

h3 {
  font-size: clamp(1.2rem, 1.6vw , 2rem);
}

section {
  padding: var(--spacing-lg);
  overflow: hidden;
}

section>* {
  max-width: 1200px;
  margin: 0 auto;
}

img {
  display: block;
}

a,
a:visited {
  text-decoration: none;
}

nav a {
    color: var(--color-primary-light);
}

nav a:hover {
    color: var(--color-highlight);
    text-decoration: underline;
    cursor: pointer;
}

li {
  list-style: none;
}

textarea:focus {
  outline: none;
}

button,
input[type="submit"],
input[type="button"] {
  padding: 12px 20px;
  font-size: 1.125rem;
  background-color: var(--color-highlight);
  color: var(--color-primary-dark);
  cursor: pointer;
  border: solid 2px var(--color-highlight);
  font-weight: bolder;
  border-radius: var(--spacing-sm);
  transition: 0.4s;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-highlight);
  border: solid 2px var(--color-highlight);
}

input,
select {
  vertical-align: middle;
}

.cta-wrapper {
  margin-top: var(--spacing-md-lg);
  text-align: center;
}

/* SCROLL ANIMATIONS */

.anim-up {
  animation: 1.2s cardFadeUp 1 forwards;
}

.anim-left {
  animation: 1.2s fadeLeft 1s 1 forwards;
}

.anim-right {
  animation: 1.2s fadeRight 1s 1 forwards;
}

.text-anim-right {
  animation: 1.2s textFadeRight 1 forwards;
}

.text-anim-left {
  animation: 1.2s textFadeLeft 1 forwards;
}


@keyframes cardFadeUp {
  from {
    bottom: -300px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes fadeRight {
  from {
    left: -300px;
    opacity: 0;
  }

  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes textFadeRight {
  from {
    transform: translateX(50%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeLeft {
  from {
    right: -300px;
    opacity: 0;
  }

  to {
    right: 0;
    opacity: 1;
  }
}

@keyframes textFadeLeft {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}