/* Smartphones */

@media (orientation: landscape) {

    .userInfoContainer {
        display: none;
    }

}

@media (pointer: coarse) {
    canvas {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    .gameOver, .gameWon {
        width: 100%;
        height: 100vh;
        max-width: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .gameWonIMG {
        border-radius: 0;
    }

    .mobileButtonContainerOne {
        display: flex;
        justify-content: space-between;
        position: absolute;
        width: 100%;
        bottom: 10px;
    }

    .mobileButtonContainerTwo {
        display: flex;
        justify-content: space-between;
        width: 1368px;
    }

    .mobileButton {
        width: 40px;
        height: 40px;
    }
    
    .buttonSmartphone {
        padding: 0;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 10px;
    }
    
    .mobileButtonsOne {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 10px;
    }

    .mobileButtonsTwo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-right: 10px;
    }

    .userInfoContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: rgb(12, 12, 12);
        opacity: 0.9;
        width: 100%;
        height: 100%;
    }

    .turnDeviceSpan {
        display: block;
        color: rgb(205, 7, 7);
        font-size: 34px;
        font-weight: bold;
    }
}

@media (max-width: 950px) and (orientation: landscape) {

    .info {
        top: 70px;
    }

    .infoBox {
        height: 200px;
    }

}

@media only screen and (max-width: 932px) and (orientation: landscape) {

    .buttonStartScreen {
        width: 170px;
        height: 40px;
    }

}

@media only screen and (max-width: 720px) and (orientation: landscape) {

    canvas {
        width: 100%;
    }

    .mobileButton:hover {
        cursor: pointer;
    }
}

@media only screen and (max-height: 480px) {

    canvas {
        height: 100vh;
    }

}

/* RESPONSIVE DESIGN */

@media (max-width: 1024px) {

    .info {
        top: 200px;
    }

}

@media (max-width: 840px) {

    .headline {
        display: none;
    }

    .fullscreen {
        display: none;
    }

    .button {
        margin-bottom: 0;
    }

    .buttonStartScreen {
        margin-bottom: 20px;
    }
}

@media (max-width: 720px) {

    canvas {
        width: 100%;
    }

    .soundButton {
        height: 25px;
        width: 25px;
    }

    .userInfoContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: rgb(12, 12, 12);
        opacity: 0.9;
        width: 100%;
        height: 100%;
    }

    .turnDeviceSpan {
        display: block;
        color: rgb(205, 7, 7);
        font-size: 34px;
        font-weight: bold;
    }

    .buttonStartScreen {
        width: 150px;
        height: 40px;
    }

    .info {
        width: 500px;
        top: 320px;
    }
}

@media (max-width: 576px) {

    .startScreen {
        gap: 60px;

    }

    .info {
        width: 100%;
    }

    .infoBox {
        width: 380px;
    } 

    .newGameButtonContainer {
        top: 25px;
    }

    .newGameButton {
        width: 150px;
        height: 30px;
    }

    .mobileButtonContainerOne {
        bottom: 5px;
    }

    .buttonSmartphone {
        width: 30px;
        height: 30px;
    }

    .mobileButton {
        width: 30px;
        height: 30px;
    }

    .infoScreen {
        margin-bottom: 0;
    }

}

@media only screen and (max-width: 410px) {

    .info {
        top: 320px;
    }

    .infoBox {
        width: 290px;
        height: 250px;
    }

    .soundButton {
        height: 20px;
        width: 20px;
    }

    .newGameButton {
        width: 120px;
        height: 25px;
        font-size: 14px;
    }

    .buttonSmartphone {
        width: 22px;
        height: 22px;
    }

    .mobileButton {
        width: 22px;
        height: 22px;
    }

    .infoScreen {
        margin-bottom: 0;
    }

    .button {
        margin-bottom: 0;
    }

    .startScreen {
        gap: 30px;
    }
}

@media only screen and (max-width: 390px) and (orientation: portrait) {

    .infoBox {
        height: 250px;
    }

}

@media (max-width: 360px) {

    .newGameButtonContainer {
        top: 20px;
    }

    .buttonBar {
        top: 10px;
    }

    .mobileButtonContainerOne {
        bottom: 5px;
    }

    .buttonSmartphone {
        border-radius: 5px;
    }

    .startScreen {
        gap: 10px;
    }

    .turnDeviceSpan {
        font-size: 26px;
    }

}

@media (max-height: 540px) {

    .userInfoContainer {
        display: none;
    }

    .info {
        top: 180px;
    }
    
    .infoBox {
        height: 250px;
    }

}

@media (max-height: 430px) {

    .buttonStartScreen {
        margin-top: 60px;
    }

    .info {
        top: 130px;
        width: 100%;
    }

    .infoBox {
        height: 235px;
    }

    .userInfoContainer {
        display: none;
    }

}

@media (max-height: 375px) {

    .info {
        top: 115px;
    }

    .infoBox {
        height: 230px;
    }
}

@media (max-height: 360px) {

    .info {
        top: 105px;
        width: 100%;
    }

    .infoBox {
        height: 230px;
    }

}