* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.d-none {
    display: none !important;
}

body {
    margin: 0;
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(./img/background/landscape.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 62.5%;
}

button {
    border: unset;
    cursor: pointer;
}

.btn-hover:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 5px lightblue);
    text-shadow: 1px 1px 0px rgba(0 0 0 / 0.7);
}

h1 {
    margin: 20px 0;
    font-family: Chewy;
    font-size: 8em;
    color: #3b8ae6;
    text-shadow: 3px 3px 5px rgba(0 0 0 / 0.8);
}

.text-settings {
    width: 11.1%;
    margin-right: 3.3%;
    font-family: Chewy;
    font-size: clamp(16px, calc(45 / 1280 * 100vw), 45px);
    color: #4aceff;
    text-shadow: 2px 2px 8px rgba(0 0 0 / 0.8);
}

.overlay-landscape-spinner {
    display: none;
}

#overlays {
    width: 1280px;
    height: 720px;
    margin-top: 144px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overlay-screen {
    width: 100%;
    height: 100%;
}

#mobile-controls {
    display: flex;
    justify-content: space-between;
}

#mobile-controls-left,
#mobile-controls-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#mobile-controls-walking,
#mobile-controls-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background-size: contain;
}

#mobile-controls-walking {
    margin: 0 0 20px 20px;
    width: 300px;
    height: 100px;
}

#walk-left {
    background: url(./img/menu-screens/buttons/button-left.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#walk-right {
    background: url(./img/menu-screens/buttons/button-right.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#mobile-controls-actions {
    margin: 0 20px 20px 0;
    width: 300px;
    height: 100px;
}

#jump {
    background: url(./img/menu-screens/buttons/button-up.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#throw {
    background: url(./img/menu-screens/buttons/button-throw.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#mobile-controls-settings {
    margin: 0 0 220px 40px;
    display: flex;
    flex-direction: column;
    width: 70px;
    height: 160px;
    gap: 20px;
}

.mobile-control-button-sm {
    width: 70px;
    height: auto;
    aspect-ratio: 1 / 1;
}

#sound-mute-mobile {
    background: url(./img/menu-screens/buttons/sound-on.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#music-mute-mobile {
    background: url(./img/menu-screens/buttons/music-on.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.mobile-control-button {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 7px rgba(0 0 0 / 0.9));
}

.mobile-control-button:active {
    filter: drop-shadow(0 0 7px white);
}

.settings-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12.5%;
}

#start-screen,
#controls,
#settings,
#imprint {
    background-image: url(./img/menu-screens/backgrounds/start-background-plain.png);
    background-size: cover;
}

#start-screen {
    display: flex;
    gap: 15px;
}

.container-buttons {
    display: flex;
    flex-direction: column;
    width: 18%;
    gap: 15px;
    margin: 11.7% 0 0 7.8%;
}

.menu-button {
    width: 100%;
    height: auto;
    aspect-ratio: 230 / 85;
    background: url(./img/menu-screens/buttons/menu-button.png);
    background-size: contain;
    background-repeat: no-repeat;
    font-family: Chewy;
    color: #4aaeff;
    font-size: clamp(16px, calc(38 / 1280 * 100vw), 38px);
    cursor: pointer;
}

#last-row {
    width: 100%;
    height: auto;
    aspect-ratio: 230 / 85;
    display: flex;
    justify-content: flex-end;
    gap: 3%;
}

.menu-button-half {
    height: 60%;
    width: auto;
    aspect-ratio: 230 / 85;
    background: url(./img/menu-screens/buttons/menu-button.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#button-imprint {
    font-family: Chewy;
    color: #4aaeff;
    font-size: clamp(16px, calc(24 / 1280 * 100vw), 24px);
}

.menu-button-sm {
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
}

#header-img-settings {
    width: 50.2%;
    height: auto;
    aspect-ratio: 643 / 130;
    background: url(./img/menu-screens/backgrounds/settings.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#header-img-controls {
    margin-top: 2.4%;
    width: 50.2%;
    height: auto;
    aspect-ratio: 643 / 130;
    background: url(./img/menu-screens/backgrounds/controls.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#controls {
    gap: 0px;
}

.container-keybindings {
    width: 62.5%;
    height: 325px;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly
}

.keybindings-row {
    width: 100%;
    height: 24.6%;
    display: flex;
    gap: 50px;
}

.row-left,
.row-right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.binding {
    font-family: Chewy;
    font-size: clamp(16px, calc(45 / 1280 * 100vw), 45px);
    color: #4aceff;
    text-shadow: 2px 2px 5px rgba(0 0 0 / 0.8);
}

.key {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Chewy;
    font-size: clamp(16px, calc(30 / 1280 * 100vw), 30px);
    color: #1ba8db;
    text-shadow: 2px 2px 2px rgba(0 0 0 / 0.8);
}

.key-sm {
    width: 16%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: url(./img/menu-screens/buttons/empty.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.key-bg {
    width: 42.7%;
    height: auto;
    aspect-ratio: 161 / 60;
    background: url(./img/menu-screens/buttons/menu-button.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.container-volume-controls {
    width: 70%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.volume-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-button-xsm {
    width: 8%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.menu-button-xsm:disabled,
.button-soundbar:disabled {
    transform: scale(1);
    filter: drop-shadow(0 0 0);
    filter: grayscale(1);
    text-shadow: 0 0 0 rgba(0 0 0 / 0);
    cursor: default;
}

.btn-down {
    background: url(./img/menu-screens/buttons/arrow-left.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-up {
    background: url(./img/menu-screens/buttons/arrow-right.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.button-soundbar {
    background: url(./img/menu-screens/buttons/soundbar-100.png);
    background-repeat: no-repeat;
    cursor: default;

    background-position: center;
    background-size: contain;
    width: 49.2%;
    height: auto;
    aspect-ratio: 368 / 50;
}

#music-mute {
    background: url(./img/menu-screens/buttons/music-on.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 8%;
    height: auto;
    aspect-ratio: 1 / 1;
}

#sound-mute {
    background: url(./img/menu-screens/buttons/sound-on.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 8%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.button-mute {
    margin-left: 4.7%;
}

.container-home-button {
    align-self: flex-start;

    margin: 0 0 11.7% 11.7%;
    width: 17.96%;
    height: auto;
    aspect-ratio: 230 / 85;
}

.home-button {
    width: 100%;
    align-self: flex-start;
}

#button-controls {
    align-self: flex-end;
    background: url(./img/menu-screens/buttons/keyboard.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#imprint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#header-img-imprint {
    margin: 2.4% 0 0 0;
    width: 50.2%;
    height: auto;
    aspect-ratio: 643 / 130;
    background: url(./img/menu-screens/backgrounds/imprint.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.container-imprint-text {
    width: 70%;
    height: 40%;
    padding: 10px 30px;
    border-radius: 10px 5px 5px 10px;
    overflow-y: scroll;
    background-color: rgba(255 255 255 / 0.3);
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.container-imprint-text::-webkit-scrollbar {
    width: clamp(5px, calc(10 / 1280 * 100vw), 10px);
    background-color: rgba(0 0 0 / 0.2);
    border-radius: 10px;
}

.container-imprint-text::-webkit-scrollbar-thumb {
    background-color: #4aceff;
    border-radius: 5px;
    border-radius: 10px;
}

.container-imprint-text::-webkit-scrollbar-track {
    border-radius: 10px;
}

.container-imprint-text-first-row {
    display: flex;
    justify-content: space-between;
}

#imprint a {
    color: #4aceff;
    text-shadow: 2px 2px 2px rgba(0 0 0 / 1);
    text-decoration: none;
}

#imprint a:hover {
    text-decoration: underline;
}

#imprint h3 {
    margin-bottom: 1%;
    font-family: Chewy;
    font-size: clamp(16px, calc(40 / 1280 * 100vw), 40px);
    color: #4aceff;
    text-shadow: 2px 2px 8px rgba(0 0 0 / 0.8);
}

#imprint p,
#imprint ul {
    font-family: Poiret;
    font-weight: 600;
    font-size: clamp(12px, calc(32 / 1280 * 100vw), 32px);
}

#imprint ul {
    list-style: none;
}

#penguin-animated {
    margin: 30.4% 0 0 3%;
    background-image: url('./img/menu-screens/sprite-sheets/penguin-idle-sprite-sheet.png');
    background-repeat: no-repeat;
}

.penguin-animation-idle {
    width: 149px;
    height: 206px;
    animation: penguin-idle 2s steps(20) infinite;
}

@keyframes penguin-idle {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -2980px 0;
    }
}

.penguin-animation-jump {
    width: 156px;
    height: 211px;
    animation: penguin-jump 0.8s steps(25) normal, jump 0.8s ease-in-out;
}

@keyframes penguin-jump {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -3900px 0;
    }
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

#lettering {
    width: 56.3%;
    height: 100%;
    background-image: url('./img/menu-screens/backgrounds/lettering.png');
    background-size: cover;
    background-position: center;
    filter:drop-shadow(2px 0 8px rgba(0 0 0 / 0.8))
}

.end-screen {
    background-color: #1f1f1f;
    background-position: right 8.6% center;
    background-repeat: no-repeat;
    background-size: contain;
    animation: fade-in 1s normal;
}

.text-win-end-screen {
    font-family: Chewy;
    font-size: clamp(16px, calc(45 / 1280 * 100vw), 45px);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#win-screen {
    background-image: url(./img/menu-screens/backgrounds/you-win.png);
}

#game-over-screen {
    background-image: url(./img/menu-screens/backgrounds/game-over.png);
}

.container-collectables {
    margin: 6.7% 0 0 9.4%;
    width: 15.63%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-collectables p {
    color: white;
}

.container-collectables p:nth-child(2) {
    color: orange;
}

canvas {
    margin: 0;
    display: block;
    background-color: black;
}

@media screen and not (-webkit-min-device-pixel-ratio:0) {
    .container-imprint-text {
        scrollbar-width: thin;
        scrollbar-color: #4aceff;
    }
}

@media only screen and ((max-width: 1280px) and (min-aspect-ratio: 16/9)) {
    #overlays {
        margin: 0;
        justify-content: center;
    }

    #overlays,
    canvas {
        width: auto;
        height: 100vh;
        aspect-ratio: 1280 / 720;
    }
}

@media only screen and ((max-width: 1280px) and (max-aspect-ratio: 16/9)) {
    #overlays {
        margin: 0;
        justify-content: center;
    }

    #overlays,
    canvas {
        width: 100%;
        height: auto;
        aspect-ratio: 1280 / 720;
    }
}

@media only screen and (max-height: 865px) {
    h1 {
        display: none;
    }

    body {
        height: 100vh;
        width: 100vw;
        flex-direction: row;
        justify-content: center;
    }

    #overlays {
        margin: 0;
    }
}

@media only screen and ((max-height: 720px) and (min-aspect-ratio: 16/9)) {
    #overlays,
    canvas {
        height: 100vh;
    }

    #overlays {
        width: calc(100vh * (1280 / 720));
    }

    button,
    .binding,
    .key,
    .text-settings {
        font-size: clamp(16px, calc(38 / 720 * 100vh), 38px) !important;
    }

    #button-imprint {
        font-size: clamp(14px, calc(24 / 720 * 100vh), 24px) !important;
    }

    #imprint h3 {
        font-size: clamp(16px, calc(40 / 720 * 100vh), 40px);
    }

    #imprint p,
    #imprint ul {
        font-size: clamp(12px, calc(32 / 720 * 100vh), 32px);
    }

    .text-win-end-screen {
        font-size: clamp(16px, calc(45 / 720 * 100vh), 45px) !important;
    }

    #penguin-animated {
        width: 11.7%;
        height: 28.7%;
        animation: none;
        background-image: url(./img/characters/Character02/Idle/Character-Idle-StartScreen.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media only screen and (max-width: 1280px) {
    body {
        height: 100vh;
        width: 100vw;
        flex-direction: row;
        justify-content: center;
    }

    h1 {
        display: none;
    }

    .overlay-screen {
        margin: 0;
    }

    #start-screen,
    #settings,
    #controls {
        background-size: contain;
        background-repeat: no-repeat;
    }

    #penguin-animated {
        width: 11.7%;
        height: 28.7%;
        animation: none;
        background-image: url(./img/characters/Character02/Idle/Character-Idle-StartScreen.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #lettering {
        background-repeat: no-repeat;
    }

    .row-left,
    .row-right {
        gap: 10px;
    }

    #mobile-controls-left,
    #mobile-controls-right {
        height: 100%;
        width: 27%;
    }

    #mobile-controls-walking,
    #mobile-controls-actions {
        width: 90.9%;
        height: auto;
        aspect-ratio: 3 / 1;
        gap: 9.1%;
    }

    #mobile-controls-settings {
        margin: 0 0 60% 12%;
        width: 20.3%;
        height: 22.3%;
        gap: 12.5%;
    }

    .mobile-control-button-sm {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    #mobile-controls-walking {
        margin: 0 0 9.1% 9.1%;
    }

    #mobile-controls-actions {
        margin: 0 9.1% 9.1% 0;
    }

    #walk-left,
    #walk-right,
    #jump,
    #throw {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (orientation: portrait) and (max-width: 1040px) and (pointer: coarse) {
    .overlay-portrait-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: black;
        z-index: 5;
    }

    .portrait-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 92px;
        height: 180px;
        border-radius: 8px;
        transform: translateY(-30px);
        background-color: whitesmoke;
        background-image:
            radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 4%, rgba(81, 81, 81, 1) 14%, rgba(44, 44, 44, 1) 26%, rgba(2, 2, 2, 1) 53%, rgba(2, 2, 2, 1) 65%, rgba(2, 2, 2, 0) 66%),
            linear-gradient(grey, grey);
        background-repeat: no-repeat;
        background-size: 10px 10px, 84px 162px;
        background-position: center 2px, 4px 8px;
        transform: rotate(270deg);
        animation: rotateToLandscape 2s ease-in-out infinite, glowingBorder 2s ease-in-out infinite;
    }

    .spinner-ring {
        width: 48px;
        height: 48px;
        display: inline-block;
        position: relative;
        border: 3px solid;
        border-color: #de3500 #0000 #fff #0000;
        border-radius: 50%;
        box-sizing: border-box;
        animation: 3s rotate linear infinite;
    }

    .spinner-ring:before,
    .spinner-ring:after {
        content: '';
        top: 0;
        left: 0;
        position: absolute;
        border: 10px solid transparent;
        border-bottom-color: #fff;
        transform: translate(-10px, 19px) rotate(-35deg);
    }

    .spinner-ring:after {
        border-color: #de3500 #0000 #0000 #0000;
        transform: translate(32px, 3px) rotate(-35deg);
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg)
        }
    }

    @keyframes rotateToLandscape {
        0% {
            transform: rotate(0deg);
        }
        50%, 100% {
            transform: rotate(90deg);
        }
    }

    @keyframes glowingBorder {
        0% {
            box-shadow: 0 0 50px orangered;
        }

        50% {
            box-shadow: 0 0 50px lightgreen;
        }

        100% {
            box-shadow: 0 0 50px lightgreen;
        }
    }
}

@media only screen and (max-width: 825px) {
    .keybindings-row {
        gap: 35px;
    }
}

@media only screen and (max-width: 768px) {
    .container-buttons {
        gap: 10px;
        width: 22%;
        margin: 11.7% 0 0 4%;
    }

    #start-screen {
        gap: 10px;
    }

    .container-volume-controls {
        gap: 10px;
    }

    .keybindings-row {
        gap: 25px;
    }

    .margin-sm {
        margin: 6% 0 0 7%;
    }

    .container-imprint-text {
        padding: 10px 20px;
    }
}

@media only screen and (max-width: 576px) {
    .container-volume-controls {
        gap: 5px;
    }

    #settings {
        gap: 12%;
    }

    #button-imprint {
        font-size: 12px;
    }

    .container-imprint-text-first-row div:last-of-type {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 500px) {
    .keybindings-row {
        gap: 15px;
    }
}

@media only screen and (max-width: 480px) {
    #start-screen {
        gap: 5px;
    }

    .container-buttons {
        width: 25%;
        margin: 11.7% 0 0 3%;
        gap: 5px;
    }

    .menu-button {
        aspect-ratio: 230 / 90;
    }

    #penguin-animated {
        margin: 30.4% 0 0 2%;
    }

    .container-keybindings {
        width: 65%;
    }

    .row-left,
    .row-right {
        gap: 5px;
    }

    .binding,
    .key,
    .text-settings {
        line-height: 16px;
    }

    .margin-sm {
        margin: 5% 0 0 7%;
    }

    .text-win-end-screen {
        line-height: 18px;
    }

    .container-imprint-text-first-row div:last-of-type {
        overflow-wrap: break-word;
        hyphens: manual;
    }
}

@media only screen and (max-width: 390px) {
    .container-keybindings {
        width: 80%;
    }

    .replay-button {
        font-size: 14px;
    }

    .text-win-end-screen {
        line-height: 16px;
    }

    #button-imprint {
        font-size: 10px;
    }
}

@media only screen and (max-width: 330px) {
    .replay-button {
        font-size: 13px;
    }
}