@import url('https://fonts.googleapis.com/css2?family=Pliant:ital,wght@0,100..900;1,100..900&family=Stack+Sans+Headline:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

html {height:100%}

body {
    margin:0px;
    font-family:'Pliant',Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#606060;
    background-color:#002830;
}

h1,h2,h3,h4,h5,h6 {
    font-family:'Stack Sans Headline','Courier New', Courier, monospace;
    font-weight:normal;
    margin:0px;
    padding:0px;
}

a {
    color:#002830;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

h1 a:hover {
    text-decoration:none;
}

header {
    padding:20px;
    display:flex;
    background-color:#ffffff;
    justify-content:space-between;
    align-items:center;
}

#hamburgerCheck {
    display:none;
}

#hamburgerCheck:checked ~ aside {
    opacity:1;
    max-height:100%;
    min-height:100%;
}

.hamburgerIcon {
    padding:10px;
    border-radius:50%;
    background-color:#f0f0f0;
    display:inline-block;
    text-align:center;
    width:24px;
    height:24px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}
.hamburgerIcon:active {
    margin-top:1px;
    vertical-align:-1px;
}

main {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items: center;
    padding:0px;
    background-color:#ffffff;
}

section {
    padding:50px;
    text-align:center;
    width:100%;
    box-sizing:border-box;
}

article {
    max-width:1000px;
    margin:0 auto;
}

footer {
    color:#ffffc0;
    text-align:center;
    padding:50px;
}
footer a, aside a {
    color:#ffffc0;
    text-decoration:underline;
}
footer a:hover, aside a:hover {
    color:#ffffff;
}

aside {
    display:block;
    position:fixed;
    min-width:100%;
    padding:0px;
    background-color:#002830;
    color:#f0f0c0;
    z-index:20;
    overflow:hidden;
    min-height:0px;
    max-height:0px;
    opacity:0;
    transition:max-height 0.5s,min-height 0.5s, opacity 0.5s;
}
aside header {
    background-color:transparent;
}
aside .hamburgerIcon {
    color:#002830;
    background-color:#f0f0c0;
}

.menuIcon {
    display:inline-block;
    border-radius:5px;
    padding:10px;
    text-align:center;
    color:#f0f0c0;
    background-color:transparent;
    text-decoration:none;
}
.menuIcon:hover {
    background-color:#f0f0c0;
    color:#002830;
    text-decoration:none;
}

.menuHolder {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    margin:0 auto;
}

@media only screen and (max-width: 600px) {
    .menuHolder {
        flex-direction:column;
    }
}