@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

:root {
    --color-1: hsl(31, 77%, 52%);
    --color-2: hsl(184, 100%, 22%);
    --color-3: hsl(179, 100%, 13%);
}
.page-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(0, 0%, 95%);
}
.three-column {
    border-radius: 10px;
    display: flex;
    width: 960px;
    font-family: "lexend deca";
}
.three-column > div {
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 40px;
}
.card-1 {
    background-color: var(--color-1);
    border-radius: 10px 0 0 10px;

    button {
        color: var(--color-1);
    }  
}


.card-2 {
    background-color: var(--color-2);

    button {
        color: var(--color-2);
    }
}
.card-3 {
    background-color: var(--color-3);
    border-radius: 0 10px 10px 0;

    button {
        color: var(--color-3);
    }
}
.card-heading {
    color: hsl(0, 0%, 95%);
    font-size: 3rem;
    text-transform: uppercase;
    margin: 40px 0;
    font-weight: 700;
}
.card-text {
    color: hsla(0, 0%, 100%, 0.75);
    font-weight: 400;
}
.card-button {
    color: hsla(0, 0%, 0%);
    background-color: hsl(0, 0%, 95%);
    border: 3px solid hsl(0, 0%, 95%);
    font-family: inherit;
    font-weight: 400;
    padding: 10px 25px;
    margin-top: 75px;
    border-radius: 1000vw;
}
.card-button:hover {
    color: hsl(0, 0%, 95%);
    background-color: hsla(0, 0%, 0%, 0);
}

@media (max-width: 1000px) {
    .three-column {
        flex-direction: column;
        width: 320px;
        margin: 100px 0;
    }
    .three-column > div {
        width: 100%;
    }
    .card-1 {
        border-radius: 10px 10px 0 0;
    }
    .card-3 {
        border-radius: 0 0 10px 10px;
    }
}