@media (max-width: 1026px) {
    .footer-integration {
        display: none;
    }

    .responsive-footer {
        display: flex;
        z-index: 8000;
    }

    .resp-footer-btn {
        display: flex;
    }

    .footer-img {
        height: 34px;
        width: 28px;
    }

    .resp-footer-box {
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 146px;
        right: 64px;
        width: 80px;
        text-align: right;
        padding: 4px;
    }

    .imprint-link {
        padding-bottom: 6px;
    }

    .btn-placing {
        right: 2%;
    }
}

@media (max-width: 1000px) {
    .instruction-space {
        display: none;
    }

    .space-alternative-middle {
        display: flex;
        width: auto;
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 934px) {
    .close-overlay {
        padding-right: 48px;
    }

    .max-width {
        height: 100vh;
    }

    .h2-variant {
        font-size: 22px;
        font-weight: 300;
        padding: 4px 50px;
    }

    .imitated-play-button {
        border-radius: 11px;
        border: 2px solid rgb(255, 255, 255);
    }

    .play-button {
        border-radius: 16px;
        height: 40px;
    }

    .play-img {
        height: 40px;
    }

    .screen-btn {
        height: 40px;
        width: 40px;
    }

    .repeating-screen-img {
        height: 42px;
        width: 42px;
    }

    .repeating-img-supplementary {
        height: 27px;
        width: 27px;
    }

    .resp-footer-box {
        top: 106px;
        right: 48px;
    }

    .footer-img {
        height: 26px;
        width: 22px;
    }
}

@media (max-width: 720px) {
    h1 {
        display: none;
    }

    h2,
    .h2-attack {
        margin: 0;
    }

    canvas {
        width: 100%;
    }

    .screen-content {
        width: 100%;
    }

    .win-screen {
        width: 100%;
        background-size: contain;
    }

    .instruction-keyboard-arrows {
        padding-top: 4px;
    }

    .space-alternative {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 44px;
        width: 44px;
        border-radius: 14px;
    }

    .space-alternative-middle {
        display: none;
    }

    .whitespace {
        width: 40px;
    }
}

@media (max-width: 600px) {
    .screen-content {
        padding-right: 20px;
        padding-left: 20px;
    }

    .game-over-lettering {
        height: 40px;
    }
}

@media (max-width: 544px) {
    .instruction-keyboard-letter {
        height: 32px;
    }

    h2 {
        font-weight: 20px;
        font-weight: 500;
    }

    .instruction-keyboard-arrows {
        height: 80px;
    }

    .instruction-img-height {
        height: 32px;
    }

    .bubble-img-height {
        height: 28px;
    }

    .defend-sharky {
        gap: 8px;
        padding-top: 4px;
    }

    .space-alternative {
        height: 28px;
        width: 28px;
        border-radius: 8px;
    }

    .whitespace {
        width: 24px;
    }

    .attack-label {
        font-size: 16px;
    }

    .range-width {
        width: 59.11px;
    }

    .range-arrows {
        gap: 24px;
    }

    .arrow-right {
        height: 16px;
    }

    .pufferfish-collection {
        gap: 2px;
    }

    .pufferfish-img-height {
        height: 12px;
    }

    .endboss-img-height {
        height: 32px;
    }

    .further-attack-options {
        height: 28px;
        width: 28px;
        border-radius: 8px;
    }

    .space-alternative-middle {
        display: none;
    }
}

@media (max-height: 480px) {
    h1 {
        display: none;
    }

    canvas {
        height: calc(100vh - 52px);
        min-height: 250px;
    }

    .screen-content {
        height: clamp(250px, 100vh, 480px);
    }

    .black-overlay {
        flex-direction: row;
    }

    .overlay-frame {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        padding: 0;
    }

    .range-width {
        width: 64px;
    }
}

@media (max-width: 440px) {
    .close-overlay {
        padding: 8px 8px 0 0;
    }

    .move {
        padding-left: 16px;
    }

    .collect {
        padding-left: 32px;
    }

    .btn-placing {
        gap: 12px;
    }
}