body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background:rgb(92, 113, 163);
    font-size:1.02vw;
    height: 100%;
}
a{
    margin:0vw 1vw;
}
nav{
    position:relative;
    display:flex;
    justify-content: space-around;
}
img{
    width:10vw;
    margin:1.5vw;
}
.shadow{
    position:absolute;
    width:100%;
    height:14.8vw;
    margin:3vw 0vw 0vw 0vw;
    box-shadow:0 0.3vw 0.5vw -0.01vw rgb(61, 61, 61);
    z-index:-2;
}
main{
    margin:8vw 0vw;
    display:flex;
    justify-content:space-evenly;
    flex-wrap: wrap;
}
article{
    min-width: 300px;
    width: 28vw;
    margin:1.5vw;
    background:rgb(249, 255, 215);
    border-radius:1vw;
    box-shadow:0 0.3vw 0.5vw -0.01vw rgb(61, 61, 61);
}
h1{
    text-align:center;
    color:rgb(23, 165, 221);
    font-size:4vw;
    margin:1vw 0vw 0vw 0vw;
    text-shadow: 0.08vw 0.1vw 0.3vw #000000;
}
article p {
    padding:0vw 2vw 2vw 2vw;
    text-align:center;
    color:rgb(63, 63, 63);
    font-size:100%;
    margin:1vw 0vw 0vw 0vw;
}




article {
    padding:0px;
    margin:1.5vw;
    height: auto;
    background:rgb(249, 255, 215);
    border-radius:2vw;
    box-shadow:0 0.3vw 0.5vw -0.01vw rgb(61, 61, 61);
    transition: 0.4s;
}
article:hover {
    transform: scale(1.05);
}
article header{
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
}

article:nth-child(3n+1) header{
    background-color: rgb(1, 212, 231);
}

article:nth-child(3n+2) header{
    
    background-color: rgb(232, 203, 134);
}

article:nth-child(3n+3) header{
    background-color: rgb(253, 137, 130);
}

article header h1{
    margin: 0px;
    padding: 10px;
    text-align: center;
    color: white;
    text-shadow: 0.08vw 0.1vw 0.3vw #000000;
    font-family: Franklin Gothic Heavy;
    font-size: 2.3vw;
}

article img{
    width: 100%;
    max-height: 30vh;
    margin: 0;
}



footer {
    background-color: rgb(232, 203, 134);
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-shadow: 0 -0.3vw 0.5vw -0.01vw rgb(61, 61, 61);
}
footer div {
    margin: 1% 0 1% 0;
}
h3 {
    margin: 0;
    font-size: 1vw;
}
footer p {
    margin: 0;
    color: black;
    font-size: 1vw;
}


@media only screen and (max-width: 768px) {
    footer p, h3 {
        font-size: 2vw;
    }
}
@media only screen and (max-width: 500px) {
    footer p, h3 {
        font-size: 3vw;
    }
    footer {
        flex-direction: column;
    }
    footer div {
        text-align: center;
    }
}