@media(max-height:920px){
    h1{
        top: 10%;
    }
}

@media(max-width:800px){
    .game-control-container{
        padding-right: 0px;
        padding-left: 0px;
        padding-top: 4px;
    }
}

@media(max-width:720px){
    canvas, .game-size-container,.game-control-container{
        width: calc(100vw - 175px);
    }

    h1{
        margin-block-end: 0px;
        font-size: 32px;
    }

    .start-frame{
        height: 100%;
        width: 100%;
        padding-bottom: 8px;
    }

    .control-container{
        display: none;
    }

    .control-container-mobile{
        font-family: 'MyChangaOne';
        display: flex;
        justify-content: space-between;
        gap: 40px;
        padding: 12px 16px;
        background-color: #c2750e;
        border: 2px solid #eedfbb;
        border-radius: 5px;
    }

    .start-container{
        width: 100%;
        height: 100%;
        padding-top:0px;
        display: flex;
        align-items: end;
    }
}

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

@media(max-width:440px){
    .control-container-mobile{
        flex-direction: column;
    }
}

@media(max-height:480px){
    canvas, .game-size-container{
        height: calc(100vh - 75px);
    }

    h1{
        display: none;
    }

    .start-frame{
        height: 100%;
        width: 100%;
        padding-bottom: 8px;
    }

    .control-container{
        display: none;
    }

    .btn-design{
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .control-container-mobile{
        font-family: 'MyChangaOne';
        display: flex;
        justify-content: space-between;
        gap: 40px;
        padding: 12px 16px;
        background-color: #c2750e;
        border: 2px solid #eedfbb;
        border-radius: 5px;
    }

    .start-container{
        width: 100%;
        height: 100%;
        padding-top:0px;
        display: flex;
        align-items: end;
    }

    .game-control-container{
        padding: 8px 8px;
    }

    .sound-image{
        width: 16px;
        height: 16px;
    }

    .game-over-container{
        padding-top: 8px;
    }

    .win-image{
        height: 75px;
        width: 200px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .game-over-image{
        height: 100px;
        width: 200px;
        padding-bottom: 8px;
    }
}

@media(pointer: coarse){
    .mobile-btn:active{
        background-color: #eedfbb;
        border: 2px solid rgb(192, 55, 55);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }
}

@media(pointer: coarse) and (orientation: portrait){
    .game-container{
        display: none;
    }

    .landscape-info{
        display: block;
        height: 100%;
    }

    .landscape-box{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .landscape-text{
        padding-bottom: 100px;
        font-family: 'MyChangaOne';
        color: white;
        font-size: 21px;
    }
}