@media (orientation: landscape) {

    @media (max-height: 380px) {

        h1,
        h2,
        h3 {
            font-size: 32px;
        }

        p {
            font-size: 16px;
        }

        a {
            word-break: break-all;
        }
    }
}




/* ---------- */
/* SMARTPHONE */
/* ---------- */

@media (orientation: portrait) and (max-width: 800px) {

    .note-rotate-to-landscape {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 3;

        display: flex;
        justify-content: center;
        align-items: center;

        backdrop-filter: blur(4px);
    }

    .wrapper>h1 {
        display: none;
    }

    .panel {
        display: none;
    }
}



/* ------- */
/* WRAPPER */
/* ------- */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .wrapper {
            width: 100%;
        }
    }

    @media (max-height: 600px) {
        .wrapper>h1 {
            display: none;
        }
    }
}



/* ----- */
/* PANEL */
/* ----- */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .panel {
            width: 100%;
            flex-direction: row;
            justify-content: center;
        }
    }
}



/* ----------------- */
/* FLY ON THE CANVAS */
/* ----------------- */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .button-play-pause {
            right: calc(24px + 150px);

            z-index: 2;
        }
    }

    @media (max-height: 380px) {
        .button-play-pause {
            top: 16px;

            height: 24px;

            border-width: 12px 0px 12px 24px;

            &.pause {
                border-width: 0px 0px 0px 24px;
            }
        }
    }
}

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .info-window {
            border-radius: 30px;

            z-index: 2;
        }
    }
}

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .open-control-info {
            left: 160px;
            top: 4px;

            width: calc(100dvw - 320px);
            height: calc((100dvw - 320px) * 0.55);
        }
    }
}

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .open-privacy_policy-impressum {
            left: 160px;
            top: 3px;

            width: calc(100dvw - 320px - 32px);
            height: calc((100dvw - 320px) * 0.55 - 2px);
        }
    }
}



/* ------ */
/* CANVAS */
/* ------ */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        canvas {
            width: calc(100dvw - 320px);
            height: calc((100dvw - 320px) * 0.55);

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

            z-index: 1;
        }
    }
}



/* ---- */
/* MENU */
/* ---- */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .menu {
            display: none;
        }
    }
}



/* ------- */
/* GAMEBOY */
/* ------- */

/* gameboy left */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        span {
            font-size: 18px;
        }

        .gameboy-left {
            position: absolute;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 16px;

            width: 160px;
            height: calc((100dvw - 320px) * 0.55);

            background-color: rgb(153, 68, 9);
            border: solid 3px black;
        }

        .options-area-mobile {
            position: relative;
            height: 40px;
            width: 120px;

            display: flex;
            align-items: center;

            border-radius: 8px;
            padding-left: 8px;

            transition: height 1s ease;

            margin-top: 16px;

            & .options-text-mobile {
                position: absolute;
                left: 32px;
                top: 0px;


                border: unset;
                background-color: unset;
                outline: unset;

                z-index: 1;

                transition: 1s all ease;
                will-change: left, top;

                &>span {
                    font-size: 24px;
                }
            }

            & .option-arrow-mobile {
                border: solid black;
                border-width: 0 3px 3px 0;
                display: inline-block;
                padding: 3px;
                transform: rotate(-45deg);
            }

            & .option-one-mobile,
            .option-two-mobile,
            .option-three-mobile {
                position: absolute;
                left: 0px;
                top: 0px;

                display: flex;
                align-items: center;
                gap: 8px;

                opacity: 0;
                transition: 1s all ease;
                will-change: left, top, opacity;
                text-wrap: nowrap;
                padding: 4px;
                border-radius: 4px;

                z-index: -1;
            }
        }

        .open-options-mobile {
            height: 410px;

            & .options-text-mobile {
                left: 4px;
                color: rgb(247, 189, 99);
            }

            & .option-one-mobile,
            .option-two-mobile,
            .option-three-mobile {
                opacity: 1;
                background-color: rgba(247, 189, 99, 0.7);
                z-index: 0;
            }

            & .option-one-mobile {
                left: 12px;
                top: 40px;
            }

            & .option-two-mobile {
                left: 12px;
                top: 75px;
            }

            & .option-three-mobile {
                left: 12px;
                top: 110px;
            }
        }
    }

    @media (max-height: 380px) {
        span {
            font-size: 16px;
        }

        .options-area-mobile {
            margin-top: 8px;
        }

        .open-options-mobile {

            & .option-one-mobile {
                left: 20px;
                top: 32px;
            }

            & .option-two-mobile {
                left: 20px;
                top: 64px;
            }

            & .option-three-mobile {
                left: 20px;
                top: 96px;
            }
        }

        .key-caps-area-left {
            width: unset;
            flex-direction: row;
            gap: 32px;

            margin-bottom: 8px;
        }

        .key-caps-medium {
            width: 48px;
            height: 48px;
        }

        #arrow-left-key {
            margin-right: 0;
        }

        #arrow-right-key {
            margin-left: 0;
        }
    }
}

/* gameboy right */

@media (orientation: landscape) {

    @media (max-height: 464px) {
        .gameboy-right {
            position: absolute;

            display: flex;
            align-items: flex-end;
            gap: 16px;

            width: 160px;
            height: calc((100dvw - 320px) * 0.55);

            background-color: rgb(153, 68, 9);
            border: solid 3px black;
        }

        #button-game-status-mobile {
            position: absolute;
            top: 16px;
            right: 0px;

            width: calc(100% - 20px);

            display: flex;
            justify-content: center;

            border: unset;
            background-color: unset;
            outline: unset;

            &>span {
                font-size: 24px;
            }
        }

        .button-game-status-animation-mobile {
            animation-name: button-game-status-slide-mobile;
            animation-duration: 1s;
        }

        @keyframes button-game-status-slide-mobile {
            0% {
                top: 76px;
            }

            25% {
                top: 16px;
            }

            45% {
                top: 61px;
            }

            65% {
                top: 16px;
            }

            75% {
                top: 56px;
            }

            85% {
                top: 16px;
            }

            90% {
                top: 51px;
            }

            95% {
                top: 16px;
            }

            97.5% {
                top: 46px;
            }

            100% {
                top: 16px;
            }
        }
    }

    @media (max-height: 380px) {
        .key-caps-area-right {
            margin-bottom: 8px;
        }

        .key-caps-small-layout {
            position: relative;
            gap: 0px;

            &>#s-key {
                position: absolute;
            }

            &>div {
                gap: 56px;
            }
        }

        .key-caps-small {
            width: 36px;
            height: 36px;
        }

        .key-caps-large {
            margin-top: 8px;
        }

        #button-game-status-mobile {
            top: 8px;
        }

        @keyframes button-game-status-slide-mobile {
            0% {
                top: 60px;
            }

            25% {
                top: 0px;
            }

            45% {
                top: 45px;
            }

            65% {
                top: 0px;
            }

            75% {
                top: 40px;
            }

            85% {
                top: 0px;
            }

            90% {
                top: 35px;
            }

            95% {
                top: 0px;
            }

            97.5% {
                top: 30px;
            }

            100% {
                top: 8px;
            }
        }

    }
}



/* ----------------- */
/* BACKGROUND SOURCE */
/* ----------------- */

@media (orientation: landscape) {

    @media (max-height: 380px) {
        #background-picture-source {
            font-size: 12px;
            z-index: 0;
        }
    }
}