body {
    height: 100%;
    margin: 0;
    justify-content: center;
    overflow-y: auto;
    border-top: solid 8px var(--accent1-clr);
    background: url(../img/main-topleft.png) no-repeat, url(../img/main-bottomright.png) bottom right no-repeat, url(../img/main-bottomleft.png) bottom left/160px no-repeat, url(../img/main-topright.png) top right no-repeat, var(--bg-clr);
    padding: 8px;
}
nav {
    top: -32px;
    transition: all ease-out 1s;
}
nav:hover {
    transform: translateY(32px);
}
#tab {
    width: 120px;
    height: 60px;
    padding-top: 24px;
    box-sizing: border-box;
    background: var(--accent1-clr);
    position: absolute;
    left: calc(50% - 60px);
    top: 18px;
    border-radius: 24px;
    z-index: -1;
}
.ournames {
    font-size: 56pt;
}
h1 {
    font-size: 42pt;
}
h2 {
    font-size: 36pt;
}
.options {
    padding: 5% 5% 0;
}
@media (width <= 800px) and (max-aspect-ratio: 5/3) {
    body {
        background-size: 50%, 30%, 20%, 50%;
        overflow-y: scroll;
    }
    nav {
        top: -100%;
        transition: all ease-out 0.5s;
        overflow-y: scroll;
    }
    nav:hover {
        transform: none;
    }
    #tab {
        display: none;
    }
    .ournames {
        font-size: xxx-large;
    }
    h1 {
        font-size: xx-large;
    }
    h2 {
        font-size: xx-large;
    }
    h3 {
        font-size: x-large;
    }
}
@media (height <= 480px) and (aspect-ratio > 5/3) {
    body {
        background-size: auto 66%, auto calc((7/24)*100%), auto 33%, auto calc((7/12)*100%);
        overflow-y: scroll;
    }
    nav {
        top: -100%;
        transition: all ease-out 0.5s;
        overflow-y: scroll;
    }
    nav:hover {
        transform: none;
    }
    #tab {
        display: none;
    }
    .ournames {
        font-size: xxx-large;
    }
    h1 {
        font-size: xx-large;
    }
    h2 {
        font-size: xx-large;
    }
    h3 {
        font-size: x-large;
    }
}
@media (height <= 370px) {
    body {
        justify-content: flex-start;
    }
}