@import url('https://fonts.google.com/specimen/Big+Shoulders+Display');

@import url("https://fonts.google.com/specimen/Lexend+Deca");

/* variables used */

:root {
    --transparent-white: hsla(0, 0%, 100%, 0.75);
    --very-light-gray: hsl(0, 0%, 95%);
    --Bright-orange: hsl(31, 77%, 52%);
    --Dark-cyan: hsl(184, 100%, 22%);
    --Very-dark-cyan: hsl(179, 100%, 13%);
  }

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

  /* making design reponsive for when screen becomes larger than 576px */
 
  body {
    font-family: 'Big Shoulders Display';
    font-weight: 400px;
    font-size: 15px;

  }
  body, button {
    background:var(--very-light-gray);
  }
  
  p {
    color: var(--transparent-white);
  }
  .container {
     width: 50%;
     margin: auto; 
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;

  }
  .sedan , .suv , .luxury {
    padding: 2em;
    border-radius: 5px;
    height: 450px;
    width: 250px
  }
  .sedan {
    background: var(--Bright-orange);

  }
  .suv {
    background: var(--Dark-cyan);
  
  }
  .luxury {
    background: var(--Very-dark-cyan);
  }
  header {
    color: var(--transparent-white);
    margin-top: 2em;
  }
  p {
    margin-top: 2em;
  }
 button {
    margin-top: 10em;
    padding: 15px 25px;
    border-radius: 20px

 }
 @media (max-width: 1100px) {
    .container {
      width: 375px;
      display: grid;


    }
    
  }
  a {
    text-decoration: none;
  }

  a:hover {
    cursor: pointer;
  }

  a:active {
    background-color: none;
  }
  #button1{
    background-color: var(--Bright-orange) ;

  }
  #button2{
    background-color: var(--Dark-cyan);
    
  }
  #button3{
    background-color: var(--Very-dark-cyan);
    
  }