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

/*Mobile and Global*/
main {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    max-width: 1920px;
    justify-items: center;
    display: grid;
    grid-gap: 5px;
    grid-template-areas: 
        "three-ws"
        "wear-mask"
        "wash-hands"
        "social-distance"
        "threews-pic"
        "more-facts"
        "covid-links"    
    }

h2, h3, h4 {
    padding: 10px 0;
}

main ul {
    padding: 0 50px;
    list-style: square;
}

#introduction {
    display: block;
    width: 100%;
    grid-area: three-ws;
}

#introduction h1{
    background-color: #06719C;
    color: white;
    text-align: center;
    font-size: 1.5em;
    font-weight: 800;
    padding: 10px 0;
}

#introduction p {
    font-size: .75em;
    font-weight: 500;
    padding: 10px;
}

.information h1 {
    text-align: center;
    margin: 10px 0;
}

.white-link a {
    color: white;
}
.white-link a h1:hover {
    background-color: #2B2C2E;
    color: white;
}

.white-link a:visited {
    color: white;
}

.black-link a {
    color: black;
}
.black-link a h1:hover {
    background-color: #2B2C2E;
    color: white;
}

.black-link a:visited {
    color: black;
}

#link-info ul {
    list-style: none;
}

.information {
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 10px 0;
}

#wear-info {
    background-color: #06719C;
    color: white;
    grid-area: wear-mask;
}

#wash-info {
    border: 5px solid #06719C;
    grid-area: wash-hands;
}

#wait-info {
    background-color: #06719C;
    color: white;
    grid-area: social-distance;
}

#info-info {
    background-color: #06719C;
    color: white;
    grid-area: more-facts;
}

#link-info {
    grid-area: covid-links;
}

#link-info li a {
    color: #2B2C2E;
}

#link-info ul li a:hover {
    background-color: #2B2C2E;
    color: white;
}

#link-info li a:visited {
    color: #2B2C2E;
}


#group-pic {
    grid-area: threews-pic;
}


@media only screen and (min-width: 481px) {
    #introduction h1 {
        font-size: 3em;
    }

    #introduction p {
        font-size: 1.25em;
    }

    main {
        grid-template-columns: 1fr, 1fr, 1fr;
        grid-gap: 10px;
        grid-template-areas: 
            "three-ws three-ws three-ws"
            "wear-mask wash-hands social-distance"
            "threews-pic more-facts covid-links"
    }   

    .information {
        width: 33vw; 
    }

    #group-pic {
        padding: 0 50px;
        max-width: 300px;
        transform: scale(.5);
    }

}