/* .attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); } */

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

:root {
        /* PRIMARY */
    --Brightorange: hsl(31, 77%, 52%);
    --Darkcyan: hsl(184, 100%, 22%);
    --Verydarkcyan: hsl(179, 100%, 13%);

        /* NEUTRAL */
    --Transparentwhite: hsla(0, 0%, 100%, 0.75);
    --Verylightgray: hsl(0, 0%, 95%);
        
}

body {
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    font-size: 16px;

}

.card {
    display: flex;
    max-width: 40rem;
    height: 20rem;
    border-radius: 1.2rem;
    overflow: hidden;
}

.card__section {
    padding: 0 0.9rem;
    
}

.card__section img {
    margin: 1.3rem auto;
    width: 2.5rem;
}

.card__section .section__head {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
    color: var(--Transparentwhite);
}

.card__section p {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.8rem;
    color: var(--Transparentwhite);
}

.card__section button {
    margin-top: 3.2rem;
    border: 1px solid var(--Verylightgray);
    border-radius: 1.2rem;
    width: 7rem;
    height: 2rem;
    font-family: 'Lexend Deca', sans-serif;
}



.one {
    background-color: var(--Brightorange);
}

.two {
    background-color: var(--Darkcyan);

}

.three {
    background-color: var(--Verydarkcyan);
}

.one button {
    color: var(--Brightorange);
}

.one button:hover {
    background-color: var(--Brightorange);
    color: var(--Verylightgray);
}

.two button {
    color: var(--Darkcyan);
}

.two button:hover {
    background-color: var(--Darkcyan);
    color: var(--Verylightgray);
}

.three button {
    color: var(--Verydarkcyan);
}

.three button:hover {
    background-color: var(--Verydarkcyan);
    color: var(--Verylightgray);
}

@media screen and (width < 450px) {
    body {
        width: 100vw;
        height: 100vh;
    }

    .card {
        flex-direction: column;
        height: 66rem;
        width: 90%;
        justify-content:center;
    }

    .card__section {
        height: 22rem ;
        width: 100%;
    }

    .card__section button {
        margin-top: 5rem;
    }
}