@import "reset.css";
#navbar {
    width:90vw;
    display:flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    text-align:center;
    padding:10px;
    background-color:rgb(255, 211, 211);
    margin-right:auto;
    margin-left:auto;
}
#gridcontainer {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
}
.griditem {
    padding:20px;
    font-size:16pt;
    width:30vw
}
img {
    width:25vw;
}
h2 {
    font-size:20pt;
}
h1 {
    text-align:center;
    font-size:24pt;
}
#logo {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 100px;
}
@media screen and (min-width:600px) and (max-width:1199px) {
    #navbar {
        width:50%;
    }
    #gridcontainer {
        grid-template-columns:1fr 1fr;
        grid-template-rows:1fr 1fr 1fr;
    }
    .griditem {
        width:40vw;
    }
    img {
        width:35vw;
    }
}
@media screen and (max-width:599px) {
    #navbar {
        width:70%;
        flex-direction:column;
        font-size:16pt;
    }
    #gridcontainer {
        grid-template-columns:1fr;
        grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .griditem {
        width:90vw;
    }
    img {
        width:80vw;
    }
    #logo {
        display:none;
    }
}