#border-horizontal {
    image-rendering: pixelated;
    width: 100%;
    height: 99vh;
    pointer-events: none;
    z-index: -1;
    display: unset;
    position: absolute;
    /*transform: rotate(90);*/
}

#border-vertical {
    image-rendering: pixelated;
    width: 100%;
    height: 99vh;
    pointer-events: none;
    z-index: -1;
    display: none;
    position: absolute;
    /*transform: rotate(90);*/
}

#menu > #frame {
    z-index: -2;
    position: absolute;
    top: 7vh;
    left: 7vw;
    width: 77.2vw;
    height: 82.8vh;
}

#menu > #nav {
    position: absolute;
    top: 12vh;
    left: 83.8vw;
    height: 72vh;
    width: 14vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 1vw;
    /*gap: 5vh;*/
    /*overflow-y: auto;*/
    /*overflow-x: visible;*/
}

@media (orientation: portrait) {
    /*
    #border {
        transform: rotate(90deg) scaley(-1);
        transform-origin: 0% 0%;
        height: 97vw;
        width: 99vh;
    }
    */
    #border-horizontal {
        display: none;
    }

    #border-vertical {
        display: unset;
    }

    #menu > #frame {
        top: 6.9vh;
        left: 9.3vw;
        width: 83.7vw;
        height: 76.6vh;
    }

    #menu > #nav {
        left: 16vw;
        top: 84.5vh;
        width: 67vw;
        height: 9vh;
        flex-direction: row;
        gap: 5vw;
    }
}

#menu {
    /*
    background: url("../pics/gui/home/homepage.gif") no-repeat;
    background-size: contain;
    */
    object-fit: contain;
    /*aspect-ratio: 16/9;*/
    max-height: 100vh;
    max-width: 100vw;
    align-self: center;
    margin: auto;
    position: relative;
    image-rendering: pixelated;
    z-index: 0;
}

#frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: all;
}

.frame-button-square {
    width: max(6vw, 6vh);
    /*height: 6vw;*/

    aspect-ratio: 1;
    /*position: absolute;*/
    z-index: 3;
    border: none;
    background-color: transparent;
    image-rendering: pixelated;
    display: flex;
    justify-content: center;
    /*align-items: flex-end;*/
    text-decoration: none;
}

.frame-button-square span {
    text-align: center;
    opacity: 0;
    /*margin-bottom: max(6vw, 6vh);*/
    position: absolute;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -3px 0px 0 #000,
        3px 0px 0 #000,
        0px -3px 0 #000,
        0px 3px 0 #000;
}

.frame-button-square:hover span {
    opacity: 100;
}

.frame-button-square:active span {
    opacity: 0;
}

#home-button {
    background: url("../pics/gui/home/house.gif") no-repeat;
    background-size: contain;
}
#home-button:active {
    background: url("../pics/gui/home/house_squish.gif") no-repeat;
    background-size: contain;
}

#links-button {
    background: url("../pics/gui/home/computerlink.gif") no-repeat;
    background-size: contain;
}
#links-button:active {
    background: url("../pics/gui/home/computerlink_squish.gif") no-repeat;
    background-size: contain;
}

#media-button {
    background: url("../pics/gui/home/cd.gif") no-repeat;
    background-size: contain;
}
#media-button:active {
    background: url("../pics/gui/home/cd_squish.gif") no-repeat;
    background-size: contain;
}

#games-button {
    background: url("../pics/gui/home/controller.gif") no-repeat;
    background-size: contain;
}
#games-button:active {
    background: url("../pics/gui/home/controller_squish.gif") no-repeat;
    background-size: contain;
}

#music-button {
    background: url("../pics/gui/home/piano.gif") no-repeat;
    background-size: contain;
}
#music-button:active {
    background: url("../pics/gui/home/piano_squish.gif") no-repeat;
    background-size: contain;
}

#graphics-button {
    background: url("../pics/gui/home/gallery.gif") no-repeat;
    background-size: contain;
}
#graphics-button:active {
    background: url("../pics/gui/home/gallery_squish.gif") no-repeat;
    background-size: contain;
}