#mobileControlContainer {
    height: 75px;
    width: 100%;
    position: absolute;
    bottom: 0; 
    left: 0; 
    justify-content: space-between;
    align-items: center;
}
.mobileControlButtonsContainerLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    justify-content: space-between;
    padding-left: 40px;
}
.mobileControlButton {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: transparent;
    border: none;
}

.mobile-mute-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    justify-content: center;
}

.btns-container-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    justify-content: space-between;
    padding-right: 40px;
}

#mobileThrowBtn {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 0px 5px black);
    background-color: white;
    border-radius: 50%;
}

.mobileControlButtonImage {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 0px 5px black);
    background-color: white;
    border-radius: 50px;
}

#mobileThrowImg {
    width: 13px;
    height: 30px;
}

.mobileSoundImage {
    width: 40px;
    height: 40px;
}


/* RENSPONSIVENESS DESKTOP */
@media (min-width: 1025px) and (max-height: 1023px) { 
    html {
        overflow: hidden;
    }
    #mobileControlContainer {
        display: none;
    }
}


/* RENSPONSIVENESS MOBILE: Smartphones  */
@media (max-width: 770px) and (max-height: 400px) and (orientation: landscape) { 
    #canvas {
        width: 100vw;
        height: 100vh;
    }
    #desktopMuteBtn {
        display: none;
    }
    #mobileControlContainer {
        display: flex !important;
    }
    .screenSizeButton {
        display: none;
    }
    #fullscreenIcon {
        display: none;
    }
    #GameTitleContainer {
        font-size: 60px;
        margin-top: 0;
    }
    #GameTitle {
        font-size: 60px;
    }
    .openSettings {
        width: 400px !important;
        height: 150px !important;
    }
    #settingsBtnImg {
        width: 30px;
        height: 30px;
    }
    #startBtn {
        width: 60px;
        height: 60px;
    }
    #startBtnImg {
        width: 40px;
        height: 40px;
    }
    .openKeybinds {
        width: 400px !important;
        height: 150px !important;
    }
    #keyAssignmentContainer {
        width: 48px;
        height: 48px;
    }
    #keyAssignmentContainer {
        display: none;
    }
    #keyAssignmentsButton {
        padding: 25px;
        width: 40px;
        height: 40px;
    }
    #keyAssignmentsButtonImage {
        width: 32px;
        height: 16px;
        transition: all 175ms ease-in-out;
    }
    .link {
        font-size: 12px;
        padding: 8px 16px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease-in-out;
        margin-bottom: 20%;
        width: 80px;
    }
    #restartBtn, #homeBtn{
        /* padding: 15px; */
        transform: scale(0.5);
    }
    /* .restartBtnImg {
        width: 100px;
        height: 100px;
    } */
}


/* RENSPONSIVENESS MOBILE: Tablets  */
@media (min-width: 770px) and (max-width: 1370px) and (min-height: 401px) and (max-height: 1030px) and (orientation: landscape) { 
    html {
        overflow: hidden;
    }
    #canvas {
        width: 100vw;
        height: 100vh;
    }
    #desktopMuteBtn {
        display: none;
    }
    #mobileControlContainer {
        display: flex !important;
        margin-bottom: 30px;
        margin-left: 20px;
    }
    .mobileControlButtonsContainerLeft {
        width: 180px;
    }
    .btns-container-right {
        width: 200px;
        padding-left: 40px;
        margin-right: 20px;
    }
    .mobileControlButton {
        width: 20px;
        height: 20px;
    }
    .mobileControlButtonImage {
        width: 70px;
        height: 70px;
    }
    #mobileThrowBtn {
        width: 70px;
        height: 70px;
    }
    #mobileThrowImg {
        width: 26px;
        height: 60px;
    }
    #mobileMuteBtn {
        margin-left: 40px;
    }
    .screenSizeButton {
        display: none;
    }
    #fullscreenIcon {
        display: none;
    }
    #GameTitleContainer {
        font-size: 100px;
        margin-top: 1%;
    }
    #settingsContainer {
        width: 100px;
        height: 100px;
    }
    #settingsBtnImg {
        width: 60px;
        height: 60px;
    }
    #startBtn {
        width: 100px;
        height: 100px;
    }
    #startBtnImg {
        width: 80px;
        height: 80px;
    }
    #keyAssignmentContainer {
        display: none;
        width: 48px;
        height: 48px;
    }
    #showKeyAssignmentsContainer {
        width: 100%;
        height: 100%;
    }
    #keyAssignmentImagesContainer {
        gap: 5px;
        margin-left: 5px;
    }
    .keyAssignmentTextContainer {
        gap: 5px;
        width: 100%;
        height: 100%;
        align-items: center;
    }
    .keyText {
        height: 10px;
        font-size: 10px;
        gap: 20px;
        width: calc(100% - 20px);
        margin-right: 20px;
    }
    #keyAssignmentsButton {
        padding: 25px;
        width: 40px;
        height: 40px;
    }
    #keyAssignmentsButtonImage {
        width: 32px;
        height: 16px;
        transition: all 175ms ease-in-out;
    }
    #imprintAndPrivacyPolicySection {
        margin-top: 0vh;
    }
    .link {
        font-size: 24px;
        padding: 8px 16px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease-in-out;
        margin-bottom: 20%;
        width: 160px;
    }
    #restartBtn {
        padding: 15px;
    }
    .restartBtnImg {
        width: 100px;
        height: 100px;
    }
    #homeBtn {
        padding: 15px;
    }
    .homeBtnImg {
        width: 100px;
        height: 100px;
    }
}


@media (max-width: 1025px) and (orientation: portrait) { 
    html {
        overflow: hidden;
    }
    .canvasContainer {
        display: none; 
    }
    #portraitMessage {
        display: flex;
        position: fixed;
        top: 60%;
        left: 60%;
        transform: translate(-60%, -60%);
        text-align: center;
        font-size: 40px; 
        color: red;
        background-color: black;
    }
}


@media (max-width: 1919px) and (min-height: 770px) and (max-height: 1023px) { 
    html {
        overflow: hidden;
    }
    .canvasContainer {
        display: none; 
    }
    #portraitMessage {
        display: flex;
        position: fixed;
        top: 60%;
        left: 60%;
        transform: translate(-60%, -60%);
        text-align: center;
        font-size: 40px; 
        color: red;
        background-color: black;
    }
}


@media (max-width: 1919px) and (min-height: 1025px) { 
    html {
        overflow: hidden;
    }
    .canvasContainer {
        display: none; 
    }
    #portraitMessage {
        display: flex;
        position: fixed;
        top: 60%;
        left: 60%;
        transform: translate(-60%, -60%);
        text-align: center;
        font-size: 40px; 
        color: red;
        background-color: black;
    }
}