/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
    margin: 0;
}

/*
    3. Allow percentage-based heights in the application
  */
html,
body {
    height: 100%;
}

/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
    font: inherit;
}

/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}




.wrapper {
    display: grid;
    width: 80%;
    margin: 0 auto;

}

.card {
    max-width: 300px;
    padding: 3rem;
    margin: 0 auto;
}

.card__heading {
    color: hsl(0, 0%, 95%);
    font-family: "Big Shoulders Display";
    font-weight: 400;
    font-size: 2.5rem;
    margin-top: 1.5rem;
}

.card__paragraph {
    color: hsla(0, 0%, 100%, 0.75);
    font-family: "Lexend Deca";
    font-weight: 400;
    margin: 2rem 0;
}

.card__button {
    font-family: "Lexend Deca";
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 20px;
    padding: 0.7rem 1rem;
    width: 9rem;
}

.card__button:hover {
    color: white;
    background-color: transparent;
    border: 2px solid white;
}

.card:first-child {
    background-color: hsl(31, 77%, 52%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card:nth-child(2) {
    background-color: hsl(184, 100%, 22%);
}

.card:nth-child(3) {
    background-color: hsl(179, 100%, 13%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (min-width: 800px) {

    body {
        display: grid;
        place-content: center;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .card {
        max-width: 400px;
        height: 600px;
        padding: 3rem;

    }

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

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

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

    .card:first-child {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
    }

    .card:nth-child(3) {
        border-bottom-left-radius: 0px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .card__heading {
        padding: 1rem 0;
    }

    .card__button {
        width: 70%;
        margin-top: 5rem;
    }


}



.attribution {
    font-size: 11px;
    text-align: center;
    position: absolute;
    bottom: 0;
}

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