html {
  box-sizing: border-box;
  font-size: 15px;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  margin: 15% 10% 15% 10%;
  /*border: 3px black solid;*/
}

svg {
    width: 64px;
    height: 40px;
}

h1 {
  font-family: "Big Shoulders Display";
  font-weight: 700;
  color: hsl(0, 0%, 95%);
}

p,
button {
  font-family: "Lexend Deca";
  font-weight: 400;
}

p {
  color: hsla(0, 0%, 100%, 0.75);
}

.card {
  overflow: hidden;
  border-radius: 7px;
}

.card > div {
  padding: 15%;
}

.sedans {
  background-color: hsl(31, 77%, 52%);
}

.suvs {
  background-color: hsl(184, 100%, 22%);
}

.luxury {
  background-color: hsl(179, 100%, 13%);
}

button {
  background-color: hsl(0, 0%, 95%);
  line-height: 3;
  border-radius: 30px;
  width: 70%;
  font-size: 1rem;
  margin-top: 7%;
  border-color: transparent;
}

.sedans button {
  color: hsl(31, 77%, 52%);
}

.suvs button {
  color: hsl(184, 100%, 22%);
}

.luxury button {
  color: hsl(179, 100%, 13%);
}

.sedans button:hover,
.suvs button:hover,
.luxury button:hover {
  background-color: transparent;
  border: 3px solid hsl(0, 0%, 95%);
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

@media screen and (min-width: 576px) {

    body {
        align-items: center; 
        margin: 0;
        display: flex;
        justify-content: center;
        height: 100%;
        width: 80%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    } 
    
    .card {
        width: 100%;
        display: flex;
        height: 75%;
        
    }
    .card > div {
        padding: 5%;
        display: inline-block;
        vertical-align: top;
        width: 33.3333%;
        height: 100%;

    }


    button {
        margin-top: 15%;
    }
    
    
    p {
        border: transparent solid 5px;
    }
}