@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap');

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

body {
  /* neutral */
  --Very-light-gray: hsl(0, 0%, 95%);
  --Transparent-white: hsla(0, 0%, 100%, 0.75);

  /* primary */
  --Dark-cyan: hsl(184, 100%, 22%);
  --Bright-orange: hsl(31, 77%, 52%);
  --Very-dark-cyan: hsl(179, 100%, 13%);

  /* ff */
  --ff-primary: 'Big Shoulders Display', sans-serif;
  --ff-secondary: 'Lexend Deca', sans-serif;

  /* fw */
  --fw-400: 400;
  --fw-700: 700;

  font-size: 0.9rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1 {
  color: var(--Very-light-gray);
  font-family: var(--ff-primary);
  font-weight: var(--fw-700);
  font-size: 2rem;
  text-transform: uppercase;
}

p {
  color: var(--Transparent-white);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-400);
  font-size: 0.85rem;
  line-height: 1.5;
}

button {
  background: var(--Very-light-gray);
  border-radius: 5em;
  border: none;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-400);
  font-size: 0.65rem;
  padding: 1em 3em;
  margin-top: 2em;
  cursor: pointer;

  @media (min-width: 40em) {
    margin-top: 100%;
    align-self: center;
  }
}

main {
  background: var(--Very-light-gray);
  border-radius: 0.5em;
  padding: 3em 1em;
  min-height: 100vh;
  align-content: center;

  @media (min-width: 40em) {
    background: var(--Transparent-white);
    display: flex;
    justify-content: center;
    scale: 0.9;
    animation: appear-main 500ms ease-in-out forwards;
    animation-delay: 1500ms;
  }
}

section {
  padding: 3em 2.5em;
  max-width: 20em;
  margin-inline: auto;
  scale: 0;
  animation: appear 500ms ease-in-out forwards;

  @media (min-width: 40em) {
    margin-inline: 0;
    max-width: 18.3em;
    display: grid;
  }
}

.col_category {
  margin-top: 1em;
}

.col_description {
  margin-top: 1.5em;
}

.sedan {
  background: var(--Bright-orange);
  border-radius: 0.5em 0.5em 0 0;

  & > button {
    color: var(--Bright-orange);
  }

  @media (min-width: 40em) {
    border-radius: 0.5em 0 0 0.5em;
  }
}

.suv {
  background: var(--Dark-cyan);
  animation-delay: 500ms;

  & > button {
    color: var(--Dark-cyan);
  }
}

.luxury {
  background: var(--Very-dark-cyan);
  border-radius: 0 0 0.5em 0.5em;
  animation-delay: 1000ms;

  & > button {
    color: var(--Very-dark-cyan);
  }

  @media (min-width: 40em) {
    border-radius: 0 0.5em 0.5em 0;
  }
}

.sedan,
.suv,
.luxury {
  & > button {
    border: 2px solid var(--Very-light-gray);
  }

  & > button:hover {
    color: var(--Very-light-gray);
    background: transparent;
    border: 2px solid var(--Very-light-gray);
  }
}

@keyframes appear-main {
  to {
    background: var(--Very-light-gray);
    scale: 1;
  }
}

@keyframes appear {
  0% {
    scale: 0;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}