@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

main {
    font-family: 'Poppins', sans-serif;
    display: grid;
    grid-gap: 5px;
    grid-template-areas:
        "title-box"
        "cdc-box"
        "symptom-box"
        "test-box"
        "vaccine-box"
        "spread-box"
        "sick-box"
        "risk-box"
        "daily-box"
        "travel-box"
        "kids-box"
        "stress-box"
        "pets-box"
}

.box {
    width: 100%;
    height: 340px;
    padding: 25px 10px;

}

#info-title {
    grid-area: title-box;
    text-align: center;
    font-size: .75em;
    background-color:  #06719C;
    color: white;
    padding: 20px; 
}


main h2 {
    background-color: #06719C;
    color: white;
    font-size: 1.5em;
    padding: 10px;
}

main h3 {
    font-size: 1em;

}

main p {
    font-size: 1em;
    font-weight: 900;
    display: block;
    padding: 10px 30px;
    color: white;
}

button {
    border-radius: 10px;
    background-color: #06719C;
    padding: 10px;
    margin: 10px 25px;
}

.box a {
    font-weight: 800;
    padding: 0 10px;
    text-decoration: none;
    color: white;
}

button:hover {
    background-color: white;
}

.box a:hover {
    color:#06719C;
}


#cdc {
    grid-area: cdc-box;
    background-image: url(../assets/images/cdc.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#symptoms {
    grid-area: symptom-box;
    background-image: url(../assets/images/symptoms.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#testing {
    grid-area: test-box;
    background-image: url(../assets/images/testing.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#vaccines {
    grid-area: vaccine-box;
    background-image: url(../assets/images/vaccine.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#spread {
    grid-area: spread-box;
    background-image: url(../assets/images/spread.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#sick {
    grid-area: sick-box;
    background-image: url(../assets/images/if_sick.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#risk {
    grid-area: risk-box;
    background-image: url(../assets/images/at_risk.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#daily {
    grid-area: daily-box;
    background-image: url(../assets/images/daily.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#travel {
    grid-area: travel-box;
    background-image: url(../assets/images/travel.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#kids {
    grid-area: kids-box;
    background-image: url(../assets/images/kids.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#stress {
    grid-area: stress-box;
    background-image: url(../assets/images/stress.jpg);
    background-repeat: none;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

#pets {
    grid-area: pets-box;
    background-image: url(../assets/images/pets.jpg);
    background-repeat: none;
    background-size: contain;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .5);
}

@media only screen and (min-width:481px) {

    main {
        grid-gap: 25px;
        grid-template-columns: 1fr, 1fr, 1fr;
        grid-template-areas:
            "title-box title-box title-box"
            "cdc-box symptom-box test-box"
            "vaccine-box spread-box sick-box"
            "risk-box daily-box travel-box"
            "kids-box stress-box pets-box"
    }

    .box {
        padding: 50px;
    }
}