@media screen and (min-width: 1080px) {
  

    /***** Structure *****/
    #homepageHeader {
        position: relative;
        width: 100%;
        height: 100vh;
    }
    #homepageHeader {
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        justify-items: center;
    }

    /***** Blocks *****/
    #headerMoonlight, #headerShadow {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #headerMoonlight, #headerShadow {
        width: 100%;
        height: 100%;
    }

    /***** Blocks / Backgrounds *****/
    .headerBlockBackground {
        position: absolute;
    }
    .headerBlockBackground {
        width: 100%;
        height: 100%;
    }
    .headerBlockBackground {
        object-fit: cover;
        transition: 0.6s ease-in-out;
    }
    #headerMoonlight:hover .moonlightBackground {
        filter: brightness(1.2);
    }
    #headerShadow:hover .shadowBackground {
        filter: brightness(1.5);
    }

    /***** Blocks / Fighters *****/
    .headerBlockFighter {
        position: absolute;
        bottom: 0;
    }
    .headerBlockFighter {
        width: auto;
        height: 85%;
    }
    .headerBlockFighter {
        object-fit: cover;
        transition: 0.6s ease-in-out;
    }
    #headerMoonlight:hover .moonlightFighter {
        transform: scale(1.06);
    }
    #headerShadow:hover .shadowFighter {
        transform: scale(1.06);
    }

    
    /***** Blocks / Gradient *****/
    .headerGradient {
        position: absolute;
        bottom: 0;
    }
    .headerGradient {
        width: 100%;
        height: 80%;
    }
    .headerGradient {
        background: #000;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
    }

    /***** Blocks / Button (whole block clickable) *****/
    .headerBlockButton {
        position: absolute;
    }
    .headerBlockButton {
        width: 100%;
        height: 100%;
    }

    /***** Blocks / Details *****/
    .headerBlocktext {
        position: absolute;
        bottom: 15%;
    }
    .headerBlocktext {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .headerBlocktext img {
        width: auto;
        height: 7em;
    }

    /***** Blocks / Sidelines *****/
    #homepageHeader h5 {
        position: absolute;
    }
    #moonlightSideline {
        left: 15px;
    }
    #shadowSideline {
        right: 15px;
    }
    #homepageHeader h5 {
        background-color: #ffffff30; 
        padding: 25px 1px;
        border-radius: 50px;
        box-shadow: 0 0 5px #00000080;
    }
    #homepageHeader h5 {
        font-family: 'bold-font';
        font-size: 10px;
        text-transform: uppercase;
        text-shadow: 1px 1px 5px white;
        letter-spacing: 10px;
        writing-mode: vertical-rl;
        color: #fff;
    }

    /***** Background *****/
    #headerBackground {
        position: absolute;
    }
    #headerBackground {
        width: 100%;
        height: 100%;
    }
    #headerBackground {
        background-color: var(--primary);
    }
    #headerBackground {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #headerBackground img {
        width: auto;
        height: 7em;
    }

    /***** Arrows *****/
    #headerArrows {
        position: absolute;
        bottom: 0;
    }
    #headerArrows div {
        margin: 6em 0;
        animation: arrowsLoop 1s ease-in-out infinite alternate;
    }
    #headerArrows div {
        background: #eee;
        background: radial-gradient(circle, rgba(238, 238, 238, 1) 50%, rgba(221, 221, 221, 1) 100%);
        padding: 20px 3px;
        border-radius: 50px;
        box-shadow: 0 0 10px #000;
    }
    #headerArrows div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    #headerArrows div svg {
        width: 35px;
        height: auto;
    }
    #headerArrows div svg {
        color: var(--primary);
    }



}