html{
    font-family:"Monaco";
    font-family:monospace, monospace;
}
html:not(.navbar){
    margin:1%;
    padding-left:2%;
    padding-right:2%;
}
.header{
    font-size:x-large;
    min-width: 0;
}
.title-area{
    min-width: 0;
    justify-self: left;
    /* margin-left: 4%; */
}
.subheader{
    font-size: large;
}
.navbar{
    display: grid;
    /* margin-left: 2%; */
    grid-template-columns: minmax(auto, 52%) repeat(auto-fit, minmax(10%, auto));
    gap: 2%;
    padding-left:1%;
    padding-right:1%;
    justify-content: space-around;
    justify-items: center;
    align-items: center;
    /* align-content: flex-start; */
    text-align: center;
    min-height: min(20vmin, 120px);
    width: 98%;
    /* text settings */
    a{
        text-decoration: none;
    }
    box-shadow:inset 0 -0.5em 3em rgb(0 200 0 / 30%);
}
.nav-item:hover{
    color:blue;
}
.rotate-image{
    /* transform: rotate(90deg); */
    position:relative;
}
.homepage-container{
    display:grid;
    grid-template-columns: 64% 34%;
    grid-gap: 2%;
}


/* 520px is the cutoff!! */
@media (max-width: 520px){
    .navbar{
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: repeat(auto-fit, minmax(10%, auto));
        gap: 2%;
        padding-left:1%;
        padding-right:1%;
        width: 98%;
        justify-content: space-around;
        justify-items: center;
        align-items: center;
        /* align-content: flex-start; */
        text-align: center;
        min-height: min(20vmin, 120px);
        width: 100%;
        /* text settings */
        a{
            text-decoration: none;
        }
        box-shadow:inset 0 -0.5em 3em rgb(200 200 0 / 30%);
    }
    .title-area{
        /* display:none; */
        grid-row-start: 1;
        grid-column: 1 / span 4;
        justify-self: center;
    }   
    .header{
        font-size: small;
    }
    .item{
        grid-row-start: 2;
    }
    .homepage-container{
        display:block;
    }
}