
:root{
  --Bright-orange: hsl(31, 77%, 52%);
  --Dark-cyan: hsl(184, 100%, 22%);
  --Very-dark-cyan: hsl(179, 100%, 13%);
  --Transparent-white-paragraphs: hsla(0, 0%, 100%, 0.75);
  --Very-light-gray-background-headings-buttons: hsl(0, 0%, 95%);

}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #fff;
  font-family: 'Lexend Deca', sans-serif;
  
}
.container{
  display: block;
  width: 80%;

  margin: 40px auto;
  border-radius: 5px;
}

img{
  margin-bottom: 15px;
}

.title{
   margin-bottom: 15px;
   font-size: 1.5rem;
   color: var(--Very-light-gray-background-headings-buttons);
   font-family: 'Big Shoulders', sans-serif;
}

p{
  margin-bottom: 20px;
  color: var(--Transparent-white-paragraphs);
  line-height: 1.4;
  
}

button{
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px 30px;
  border: none;
  background-color: var(--Very-light-gray-background-headings-buttons);
  font-weight: 500;
  border-radius: 30px;
}
.sedans, .suvs, .luxury{
  padding: 40px;
  
}
.sedans{
  background-color: var(--Bright-orange);
  border-radius: 5px 5px 0 0;
}

.sedans .sedan-btn{
  color: var(--Bright-orange)
}

 .sedans button:active{
  background-color: var(--Bright-orange);
  border: 2px solid var(--Transparent-white-paragraphs);
  color: var(--Transparent-white-paragraphs);
}

.suvs{
  background-color: var(--Dark-cyan);
}

.suvs .suv-btn{
  color: var(--Dark-cyan)
}


 .suvs button:active{
  background-color: var(--Dark-cyan);
  border: 2px solid var(--Transparent-white-paragraphs);
  color: var(--Transparent-white-paragraphs);
}

.luxury{
  background-color: var(--Very-dark-cyan);
  border-radius: 0 0 5px 5px;
}

.luxury .luxury-btn{
  color: var(--Very-dark-cyan);
}

 .luxury button:active{
  background-color: var(--Very-dark-cyan);
  border: 2px solid var(--Transparent-white-paragraphs);
  color: var(--Transparent-white-paragraphs);
}

@media(min-width:1024px){
  .container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .sedans{
   border-radius: 5px 0 0 5px;
}

.luxury{
  border-radius: 0  5px  5px 0;
}
}