@media only screen and (max-width: 720px) {
    canvas {
        width: 100%;
    }

    .intro {
        width: 100% !important;
        height: 100% !important;
    }
}

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

    .fullscreen {
        display: none;
    }

    body {
        background-image: none;
        background-color: black;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    canvas {
        height: 100vh !important;
        width: 100% !important;
    }

    .end-game {
        height: 100vh !important;
        width: 100% !important;
    }

    .intro {
        height: 100vh !important;
        width: 100% !important;
    }

    .touch-buttons {
        /* display: flex; */
        gap: 20px;
        display: flex !important;
    }

    .touch-buttons img {
        background-color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        padding: 5px;
        border-radius: 100%;
    }

    .touch {
        bottom: 10px;
        height: 30px;
    }
}

@media only screen and (orientation: portrait) {
    .rotate-background-color {
        display: block !important;
        position: absolute;
        height: 100% !important;
        z-index: 99999;
        width: 100% !important;
        background-color: #F0F1F2;
    }

    .rotateDevice {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: contain;
    }
}

@media only screen and (max-height: 600px) {
    .description-container {
        gap: 20px;
    }
}