*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    

    text-align: center;
    font-size: 14px;
}

.hidden {
    display: none !important;
}

.game {
    margin: auto;

    background-image: url(img/game_bg.jpg);
    background-repeat: repeat;

    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; */

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    padding: 2vh;
}

.game_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* max-height: 100vh;
    min-height: 90vh; */

    /* width: 100%; */
}

.game_title {
    margin: 1vh auto 3vh;
}

.game_demo {
    position: relative;

    width: 34vh;
    height: 42vh;

    /* вынос на отдельный GPU слой */
    transform: translateZ(0);
    transition-property: height;
    transition-duration: 2s;
}

.demo-container_base {
    position: absolute;
    left: middle;
    top: 19%;

    width: 100%;
    margin: 1vh 0;

}

.base {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    align-items: center;

    height: 24vh;
    background-image: url(img/dark-grey-wood_base.jpg);
}

.demo-squares {
    width: 9vh;
    height: 9vh;
    background-color: #c3c3c3;
    opacity: 0.8;
}

.demo-figures {
    width: 8vh;
    height: 8vh;
    position: absolute;
    /* вынос на отдельный GPU слой */
    transform: translateZ(0);
    transition-property: all;
    transition-duration: 2s;
    z-index: 1;
}

.figure1 {
    background-color: #368036;
    left: 5%;
    top: 0;
}
.figure2 {
    background-color: #202091;
    left: 38%;
    top: 0;
}
.figure3 {
    background-color: #52b7e3;
    left: 71.5%;
    top: 0;
}
.figure4 {
    background-color: #b5262b;
    left: 5%;
    bottom: 0;
}
.figure5 {
    background-color: #f0e518;
    left: 38%;
    bottom: 0;
}
.figure6 {
    background-color: #faa30c;
    left: 71.5%;
    bottom: 0;
}

.game_menu{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;

    width: 34vh;
}

.menu {
    margin-top: 2vh;
    
    border: #c3c3c3 2px solid;
    background-color: burlywood;

    text-align: center;
}


.menu button {
    width: 100%;
    min-width: 150px;
    min-height: 40px;
    margin: auto;

    outline: none;
    border: none;

    background: transparent;
    cursor: pointer;

    font-size: 3vh;
}

.modal {
    border: #c3c3c3 2px solid;
    background-color: burlywood;
    opacity: 0.95;
    position: fixed;
}

.modal_menu {
    width: 50%;
    
    left: 25%;
    top: 25%;
}

.modal_rules {
    height: 50%;
}

.modal_settings {
    height: 25%;
}

.modal_level {
    width: 40%;
    height: 30%;
    
    left: 30%;
    top: 45%;
    border-radius: 10%;
}

.modal_mouse, .modal_keyboard {
    width: 40%;
    height: 35%;
    top: 11%;
}

.modal_mouse {
    right: 13%;
}
.modal_keyboard {    
    right: 8%;
}

.modal_info {
    width: 40%;
    height: 20%;
    right: 3%;
    top: 11%;
}

.modal_level {
    top: 30%;
}

.modal_success {
    display: flex;
    flex-direction: column;
}

.modal_choose {
    display: flex;
    justify-content: space-around;
}

h2 {
    margin: 2% 0 2% 0;
}
.modal_rules, .modal_settings {
    display: flex;
    flex-direction: column;
}

.modal_close_icon{
    color: #b5262b;
    position: absolute;
    right: 0;
    top: -2%;
    cursor: pointer; 
}

.modal_text {
    font-size: 16px;
    text-align: justify;
    margin: 0 5%;
}

.modal_text-success {
    font-size: 24px;
    text-align: center;
    margin: 5% 0;
}

.modal_setting-container {
    display: flex;
    justify-content: space-evenly;
    flex-flow: wrap;
}

.modal_setting-palette {
    width: 120px;
    height: 42px;
    margin-bottom: 5px;

    display: flex;

    cursor: pointer;
}

.modal_setting-palette div {
    width: 20px;
    height: 40px;
    
}

.palette_selected {
    border: 1px solid #b5262b;
}

.palette1 div:nth-child(1) {
    background-color: #368036;
}

.palette1 div:nth-child(2) {
    background-color: #202091;
}
.palette1 div:nth-child(3) {
    background-color: #52b7e3;
}

.palette1 div:nth-child(4) {
    background-color: #b5262b;
}
.palette1 div:nth-child(5) {
    background-color: #368036;
}

.palette1 div:nth-child(6) {
    background-color: #faa30c;
}

.palette2 div:nth-child(1) {
    background-color: #2683c6;
}

.palette2 div:nth-child(2) {
    background-color: #84acb6;
}
.palette2 div:nth-child(3) {
    background-color: #7a8c8e;
}

.palette2 div:nth-child(4) {
    background-color: #75bda7;
}
.palette2 div:nth-child(5) {
    background-color: #58b6c0;
}

.palette2 div:nth-child(6) {
    background-color: #3494ba;
}

.palette3 div:nth-child(1) {
    background-color: #9c6a6a;
}

.palette3 div:nth-child(2) {
    background-color: #e64823;
}
.palette3 div:nth-child(3) {
    background-color: #ec6f16;
}

.palette3 div:nth-child(4) {
    background-color: #ce8d3e;
}
.palette3 div:nth-child(5) {
    background-color: #f8921d;
}

.palette3 div:nth-child(6) {
    background-color: #ffca08;
}

.game_play {
    width: 70%;
    height: 80%;
    margin: 10% auto;
    display: flex;
    justify-content: space-around;
    align-items: middle;
    flex-flow: wrap;
}

.level {
    width: 200px;
    height: 100px;
    margin: 1%;

    border: 1px solid #c3c3c3;
    /* background-color:  burlywood; */
    background-image: url(img/dark-grey-wood_base.jpg);

    text-align: center;
}

.level_button {
    width: 100%;
    height: 100%;

    margin: auto;

    font-size: 24px;

    outline: none;
    border: none;

    background: transparent;
    cursor: pointer;
}

.game_level {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    /* border: 1px solid blue; */
    
}

.game_level-info {
    /* border: 1px solid green; */
    height: 10vh;
    display: flex;
    justify-content: space-between;
}

.game_level-control{
    display: flex;
}

.icon {
    width: 8vh;
    height: 8vh;
    margin: 0.5vh 1vh;
    border: 0.2vh solid #b5262b;
    border-radius: 50%;
    background-color: burlywood;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

.fas, .level_number {
    color: #b5262b;
    font-size: 4vh;
    line-height: 200%;
}

.level_number {
    width: 30vh;
    text-align: center;
    height: 8vh;
    background-color: burlywood;
    border: 0.2vh solid #b5262b;
    border-radius: 40%;
    margin-top: 0.5vh;
    font-weight: 600;
    
}

.game_level-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 90%;
    /* background-color: bisque; */
    border: 1px solid #b5262b;
}

/* Media */


@media (max-width: 540px) {
    .modal_menu {
        width: 80%;
        
        left: 10%;
        top: 25%;
    }

    .modal_rules {
        height: 60%;
    }
    
    .modal_settings {
        height: 40%;
    }

    .modal_setting-container {
        flex-direction: column;
        align-items: center;

    }

    .modal_text {
        font-size: 10px;
    }

}