.attribution{
    font-size: 11px; text-align: center;
}

.attribution a{
    color: hsl(228, 45%, 44%);
}

.bright-orange-bg{
    background-color: #e38826;
}

.dark-cyan-bg{
    background-color: #006970;
}

.very-dark-cyan-bg{
    background-color: #004241;
}

.very-light-gray-bg{
    background-color: #f2f2f2;
}

.transparent-white-text{
    color: hsla(0, 0%, 100%, 0.75);
}

.very-light-gray-text{
    color: #f2f2f2;
}

.bright-orange-text{
    color: #e38826;
}

.dark-cyan-text{
    color: #006970;
}

.very-dark-cyan-text{
    color: #004241;
}

.big-shoulders-display-700 {
    font-family: "Big Shoulders Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.lexend-deca-400 {
    font-family: "Lexend Deca", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body{
    font-size: 15px;
    height: 100%;
    border-style: border-box;
}

main{
    display: grid;
    width: 20rem;
    margin: 5rem auto;
    border-radius: 10px;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "sedan"
        "suv"
        "luxury";
}

button{
    border: none;
    border-radius: 2rem;
    width: 60%;
    height: 3rem;
    margin-top: 5%;
    margin-left: 0.5rem;
}

button:active{
    border: solid 0.2rem #f2f2f2;
    color: #f2f2f2;
}

.sector{
    padding: 3rem 2rem;
    line-height: 1.6;
    position: relative;
}

.sector h1{
    text-transform: uppercase;
    font-size: 2.5rem;
    line-height: 1;
}

.sector p{
    font-size: 1rem;
}

.sector1{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    grid-area: "sedan";
}

.button1:active{
    background-color: #e38826;
}

.sector2{
    grid-area: "suv";
}

.button2:active{
    background-color:#006970;
}

.sector3{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    grid-area: "luxury";
}

.button3:active{
    background-color:#004241;
}

@media screen and (min-width: 768px){
    main{
        display: grid;
        width: fit-content;
        height: 30rem;
        margin: 10% auto;
        border-radius: 10px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "sedan suv luxury";
    }

    button{
        border: none;
        border-radius: 2rem;
        width: 60%;
        height: 3rem;
        margin-top: 5%;
        margin-left: 0.5rem;
        position: absolute;
        bottom: 10%
    }

    .sector{
        padding: 3rem 2rem;
        line-height: 1.6;
        position: relative;
        max-width: 16rem;
        min-height: 30rem;
    }

    .sector1{
        border-top-right-radius: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        grid-area: "sedan";
    }

    .sector3{
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 0;
        grid-area: "luxury";
    }
}