a {
    text-decoration: none;
    color: #aeb850;
    font-weight: bolder;
}

/* Primary container of all homepage hero content. */
.hero {
    width: 85vw;
    height: 47.8125vw;

    margin: auto;
    margin-top: 10px;
}

.top_video {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;
    border-radius: 20px 20px 0 0;

    background-color: rgb(0, 0, 0, 0.7);
    text-align: center;
}

/* Sets up the size of the large video on top of the page. */
.top_video iframe {
    width: calc(100% - 40px);
    height: 100%;
}

.mid_panel_story {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/backgrounds/story_panel-6d18cc3f.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    text-align: center;

    position: relative;
}

.mid_overlay_story {
    position: absolute;
    opacity: 0;

    max-width: 50%;
    left: 50%;

    border-radius: 0 0 0 10px;

    background-color: rgba(24, 24, 24, 0.8);

    color: white;
    font-size: 1.7vw;
    padding: 1%;

    font-family: "BN5 DS Thin", "Playfair Display", sans-serif !important;
}

.mid_panel_story:hover>.mid_overlay_story {
    opacity: 1;
    border: none;
    transition: opacity .5s;
}

.mid_panel_collector {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/backgrounds/chip_collage-b329720a.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;
}

.mid_overlay_collector {
    position: absolute;
    opacity: 0;

    top: 25%;
    left: 25%;

    max-width: 50%;
    max-height: 50%;

    border-radius: 10px;

    background-color: rgba(24, 24, 24, 0.8);

    color: white;
    font-size: 1.5vw;

    padding: 1%;

    font-family: "BN5 DS Thin", "Playfair Display", sans-serif !important;
}

.mid_panel_collector:hover>.mid_overlay_collector {
    opacity: 1;
    border: none;
    transition: opacity .5s;
}

.mid_panel_memento {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/mementos/fourmemes-d60a883a.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;

    transition: background-image 0.2s, background-color 0.2s, background-size 0.2s;
}

.mid_overlay_memento {
    opacity: 0;

    display: block;
    position: absolute;
    top: 0%;
    width: 95%;

    margin-left: 1.5%;
    border-radius: 0 0 10px 10px;
    background-color: rgb(24, 24, 24, 0.7);

    color: white;
    font-size: 1.7vw;
    padding: 1%;

    font-family: "BN5 DS Thin", "Playfair Display", sans-serif !important;
}

.mid_panel_memento:hover>.mid_overlay_memento {
    opacity: 1;
    transition: opacity .5s;
}

.mid_overlay_memento_hidden {
    display: none;
}

.mid_panel_memento_quick {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/mementos/mid_quickmeme_bio-5a851701.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;

    transition: background-image 0.2s, background-color 0.2s, background-size 0.2s;
}

.mid_panel_memento_freeze {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/mementos/mid_freezememe_bio-c079c59e.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;

    transition: background-image 0.2s, background-color 0.2s, background-size 0.2s;
}

.mid_panel_memento_flash {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/mementos/mid_flashmeme_bio-d0f66522.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;

    transition: background-image 0.2s, background-color 0.2s, background-size 0.2s;
}

.mid_panel_memento_burner {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-image: url("/assets/mementos/higz_burnermeme_bio-4bcd955e.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;

    transition: background-image 0.2s, background-color 0.2s, background-size 0.2s;
}

.mid_overlay_hoverbox {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 8%;

    display: flex;
    flex-direction: row;
    align-items: start;

    background-color: rgba(0, 0, 0, 0.7);
}

.hover_quick {
    width: 20%;
    height: 100%;

    border-right: 3px solid #777777;

    color: white;
    font-family: "BN5 DS UI Bold", "Playfair Display", sans-serif;
    font-size: 1.7vw;
}

.hover_quick:hover {
    text-decoration: underline;
    background-color: crimson;
    color: yellow;
}

.hover_freeze {
    width: 20%;
    height: 100%;

    border-right: 3px solid #777777;

    color: white;
    font-family: "BN5 DS UI Bold", "Playfair Display", sans-serif;
    font-size: 1.7vw;
}

.hover_freeze:hover {
    text-decoration: underline;
    background-color: Aqua;
    color: DarkGreen;
}

.hover_flash {
    width: 20%;
    height: 100%;

    border-right: 3px solid #777777;

    color: white;
    font-family: "BN5 DS UI Bold", "Playfair Display", sans-serif;
    font-size: 1.7vw;
}

.hover_flash:hover {
    text-decoration: underline;
    background-color: navy;
    color: yellow;
}

.hover_burner {
    width: 20%;
    height: 100%;

    border-right: 3px solid #777777;

    color: white;
    font-family: "BN5 DS UI Bold", "Playfair Display", sans-serif;
    font-size: 1.7vw;
}

.hover_burner:hover {
    text-decoration: underline;
    background-color: darkred;
    color: #111111;
}

.hover_comingsoon {
    width: 20%;
    height: 100%;

    color: white;
    font-family: "BN5 DS UI Bold", "Playfair Display", sans-serif;
    font-size: 1.7vw;
}

.mid_panel_pvp {
    width: 100%;
    height: 100%;

    border: 2px solid #777777;

    background-color: rgb(23, 126, 218);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;

    position: relative;
}

.pet_logo {
    position: absolute;

    top: 5%;
    left: calc(27% - 3px);

    width: 46%;
    height: 10%;

    border: 3px solid black;
    border-radius: 30px 30px 0 0;

    background-color: black;
}

.pet_logo_text {
    position: absolute;

    top: 5%;
    left: calc(27% - 3px);

    width: 46%;
    height: 8%;

    border: 3px solid black;
    border-radius: 30px 30px 0 0;

    z-index: 2;

    background-image: url("/assets/backgrounds/pet_logo-f55c54d5.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}

.pet_screen {
    position: absolute;

    top: calc(15% - 3px);
    left: calc(27% - 3px);

    width: 46%;
    height: 63.5%;

    border: 3px solid black;
    border-radius: 4px;

    background-color: white;
}

.mid_overlay_pvp {
    position: absolute;
    opacity: 0;

    top: 15%;
    left: 27%;

    width: 44%;
    height: 60%;

    background-color: rgba(24, 24, 24, 0.8);

    color: white;
    font-size: 1.7vw;
    padding: 1%;

    font-family: "BN5 DS Thin", "Playfair Display", sans-serif !important;
}

.mid_panel_pvp:hover>.mid_overlay_pvp {
    opacity: 1;
    transition: opacity .5s;
}

.pvp_left {
    position: absolute;

    top: 0%;
    left: 5%;

    width: 20%;
    height: 100%;
}

.pvp_right {
    position: absolute;

    top: 0%;
    left: 75%;

    width: 20%;
    height: 100%;
}

.black_ring {
    position: absolute;

    top: 80%;
    left: 45.5%;

    width: 9%;
    height: 16%;

    background-color: black;
    border-radius: 360px;
}

.megaman_emblem {
    position: absolute;

    top: 80.8%;
    left: 45.945%;

    width: 8.11%;
    height: 14.4%;

    background-image: url("/assets/backgrounds/megaman_emblem-c9b03b01.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 360px;
}

.center_text {
    text-align: center;
}

@media only screen and (max-width: 480px) {
    .hero div.top_video {
        border-radius: 0 0 0 0;
    }
}

@media (orientation: portrait) {
    .mid_overlay {
        font-size: 1.5vh;
    }

    .mid_overlay_collector {
        top: 10%;
        left: 10%;
        max-width: 80%;
        max-height: 80%;
        font-size: 1.1vh;
    }

    @media only screen and (min-width: 800px) {
        .mid_overlay_collector {
            font-size: 1.7vw;
        }
    }

    .mid_overlay_memento {
        font-size: 1.5vh;
    }

    .mid_overlay_quick {
        font-size: 1.5vh
    }

    .mid_overlay_freeze {
        font-size: 1.5vh;
    }

    .mid_overlay_flash {
        font-size: 1.5vh;
    }

    .mid_overlay_burner {
        font-size: 1.5vh;
    }

    .hover_quick {
        font-size: 1.2vh;
    }

    .hover_freeze {
        font-size: 1.2vh;
    }

    .hover_flash {
        font-size: 1.2vh;
    }

    .hover_burner {
        font-size: 1.2vh;
    }

    .hover_comingsoon {
        font-size: 1.2vh;
    }

    .pvp_overlay {
        font-size: 1.2vh;
    }
}