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

:root {
  --background-primary: #F4F5FB;
  --background-secondary: #FFFFFF;

  --color-brand: #CA3884;
  --color-brand-hover: #A52C6B;
  --color-danger: #C93847;

  --content-primary: #080B12;
  --content-secondary: #374151;
  --content-tertiary: #9CA3AF;

  --always-white: #FFFFFF;

  --border-primary: #D1D5DB;
  --border-hover: #B9C2D0;

  --ff-base: "Inter", sans-serif;
  --font-title: 700 1.5rem/2rem var(--ff-base);
  --font-label: 500 1rem/1.25rem var(--ff-base);
  --font-p: 500 1rem/1.25rem var(--ff-base);
  --font-link: 500 .875rem/1rem var(--ff-base);
}

html{
  font: var(--font-p);
}

body{
  max-width: 80rem;
  width: 100%;
  margin-inline: auto;
  background-color: var(--background-primary);
}

.initial-page{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25%;
  gap: 1rem;

  & img {
    width: 30rem;
    animation: appering 1s ease forwards;
  }
}

h2{
  font-size: 1.3rem;
  opacity: 0;
  animation: appering 1s .5s ease forwards;
}

a {
  transition: .4s ease;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  width: 12rem;
  height: 3rem;
  border-radius: .75rem;
  background-color: var(--border-primary);
  opacity: 0;
  animation: appering 1s 1s ease forwards;
  &:hover{
    color: var(--always-white);
    background-color: var(--color-brand);
  }
}

@keyframes appering {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}