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


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


body{
    font-family: 'Lexend Deca' , sans-serif;
    background-color: hsl(0, 0%, 95%);
    font-size: 15px;
    overflow: hidden;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: auto;
    color:hsla(0, 0%, 0%, 0.75);
}
.container{
    margin-right: 400px;
    display:flex;
    flex-direction: column;
    /*justify-content: center;
    align-items: center; */
    width: 100%;
    flex-wrap: wrap;
}

div{
    max-width: 300px;
    height: 600px;
    padding: 42px;
    position: relative;
}

.sedans{
    background-color: hsl(31, 77%, 52%);
    border-radius: 7px 0 0 7px;
}

.suv{
    background-color: hsl(184, 100%, 22%);
}
.luxury{
    background-color: hsl(179, 100%, 13%);
    border-radius: 0 7px 7px 0 ;
}

img{
    margin-bottom: 36px;
}

h1{
    font-family: 'Bigspecimen Shoulders Display' , sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: hsl(0, 0%, 95%);
    margin-bottom: 1.5rem;
}

p{
    font-size: 14px;
    line-height: 1.5rem;
    color:hsla(0, 0%, 100%, 0.75);
}

button{
    position: absolute;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    padding: 14px;
    width: 140px;
    border-radius: 25px;
    outline: none;
    border: 2px solid hsl(0, 0%, 95%);
    font-family: inherit;
    bottom: 42px;
    transition:all .5s ease-in-out;
}

.sedans button{
    background: var(--neu-gray);
    color:var(--prim-orange);
}

.suv button{
    background:var(--neu-gray);
    color:var(--prim-cyan);
}

.luxury button{
    background: var(--neu-gray);
    color: var(--prim-dark-cyan);
}

.sedans button:hover{
    background:white;
    color:hsl(31, 77%, 52%);
    font-size: 18px;
}

.suv button:hover{
    background:white;
    color:hsl(184, 100%, 22%);
    font-size: 18px;
}

.luxury button:hover{
    background:white;
    color:hsl(179, 100%, 13%);
    font-size: 18px;
}

button:active{
    transform: scale(0.9);
}

@media only screen and(max-width:144px) {
    body{
        display: flex;
        width: 100%;
        overflow: scroll;
        flex-wrap: wrap;
    }

    .container{
        padding: 50px 0;
        min-height: 100%;
        flex-direction: column;
        background-color: hsl(31, 77%, 52%);
    }

    .sedans{
        border-radius: 7px 7px 0 0;
    }
    

    .luxury{
        border-radius: 0 0 7px 7px ;
    }

    p{
        font-size: 0.77rem;
    }
}