@font-face {
    font-family: LexendDeca;
    src: url("./font/LexendDeca-VariableFont_wght.ttf");
    font-display: swap;
} 

:root {
    --light-orange: hsl(31, 77%, 52%);
    --dark-cyan: hsl(184, 100%, 22%);
    --darker-cyan: hsl(179, 100%, 13%);
    --white-paragraph: hsla(0, 0%, 100%, 0.75);
    --grey-rest: hsl(0, 0%, 95%);
}
/* css reset  */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
ul[role='list'], ol[role='list'] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
input, button, textarea, select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
/* css reset end */
}
body{
    min-height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    font-family: LexendDeca;
    background-color: var(--grey-rest);
}
.invisible {
    display: none;
}
.container {
    margin: 4rem auto;
    max-width: 23rem;
}
.card {
    background-color: white;
    padding: 3rem; 
}
.card h2 {
    text-transform: uppercase;
    font-family: "Big Shoulders";
    margin: 1.2rem auto;
    font-size: 2rem;
    color: var(--grey-rest);
}
.card p {
     color: var(--white-paragraph);
     padding-bottom: 1rem;
     font-weight: 400;
     font-size: 0.9rem;
     line-height: 1.7;
}
.card img {
    width: 3.5rem;
}
.card button {
    border-style: none;
    padding: 0.8rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    margin: 1rem 0;
    background-color: var(--grey-rest);
}
.card-sedan {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--light-orange); 
}
.card-sedan button {
    color: var(--light-orange);
}
.card-suv {
    background-color: var(--dark-cyan);
}
.card-suv button {
    color: var(--dark-cyan);
}
.card-luxury {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: var(--darker-cyan);
}
.card-luxury button {
    color: var(--darker-cyan);
}

.card button:hover {
    cursor: pointer;
    border: 3px solid var(--grey-rest);
    color: var(--grey-rest);
}
.card-sedan button:hover {
    background-color: var(--light-orange);
}
.card-suv button:hover {
    background-color: var(--dark-cyan);
}
.card-luxury button:hover {
    background-color: var(--darker-cyan);
}

@media (min-width: 40rem) {
    .container {
        display: flex;
        max-width: 60%;
        margin: 10rem auto;
    }
    .card {
        padding: 4rem 3rem 6rem;
    }
    .card p {
     padding-bottom: 1.2rem;
     font-size: 1.12rem;
     line-height: 2.3rem;
    }
    card h2 {
    font-size: 3rem;
}
    .card button {
        padding: 1rem 1.9rem;
        font-size: 1.1rem;
        margin: 1rem 0;
    }
    .card-sedan{
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0;
    }
    .card-luxury{
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
    }
}
.attribution {
    font-size: 11px; 
    text-align: center; 
}
.attribution a {
    color: hsl(228, 45%, 44%); 
}