body {
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin:0;
    padding:0;
    font-size:1.05rem;
}

section {
    max-width:750px;
    margin:auto;
    padding:15px 5px;
}

#nav {
    background-color: #a5c7fb;
    overflow: hidden;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}
#nav img {
    width:200px;
}
#navlinks {
    display:block;
}
#hamburger {
    display:none;
}

@media screen and (max-width:600px) {
    #nav {
        display:flex;
        flex-direction:column;
    }
    #navlinks {
        display:none;
        flex-wrap:wrap;
        flex-direction:column;
        align-items: center;
        gap:5px;
        padding-bottom:10px;
    }
    #hamburger {
        display:block;
        height:100%;
        font-size:2.5rem;
        border-width:4px;
        border-color:#04549a;
        position:absolute;
        top:0;
        left:0;
    }
    
}

.banner {
    width:100%;
    height:auto;
}

h2 {
    text-align: center;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /*allows for resizing*/
    gap: 15px;
    overflow: hidden;

}
.cards img {
    width: 100%;
    height: 50%;
    object-fit: cover;
    object-position: center;
    border-radius:5px;
}

.flex {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    flex-wrap:nowrap;
}
.flex img {
    width:25vw;
    height:auto;
    object-fit:cover;
    object-position:center;
    border-radius:5px;
}

.blue {
    background-color:#a5c7fb;
}

.wrap{
    flex-wrap:wrap;
}

button {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:1.125rem;
    background-color:transparent;
}

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

.headbanner{
    background-image: url("assets/narrowEarthView.png");
    color:white;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    height: 25vh;
}

img {
    display:block;
    width:100%;
}