#grid{
    display: grid;
    --cell-size: min(3.5vh, 6.5vw);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
    width: calc((var(--cell-size) * 10) + 0.6vh * 12  );
    grid-template-columns: repeat(10, auto);
    grid-template-rows: repeat(20, auto);
    padding: 0.6vh;
    gap: 0.35vh;
    background-color: #1f285e;
    border: #3845b7;
    border-style: solid;
    border-width: 8px;
}

#grid>div{
    height: var(--cell-size);
    width: var(--cell-size);
    border-radius: 0.3vh;
    background-color: #263075;
}

#health {
    /* visibility: hidden; */
    left: 0px;
    top: 22vh;
    border-left: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#healthIcon {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#healthInfo {
    /* margin-top: 5px;  */
    text-align: center;
    /* width: 100%; */
    /* display: flex; */
    /* justify-content: space-around;  */
    /* align-items: center;  */
    color: whitesmoke;
}
.pausedHearts{
    width: 14.2%;
}

#pausedLives{
    top: 40vh;
    width: 40vh;
}

#pause{
    visibility: visible;
    right: 0px;
    top: 22vh;
    border-right: none;
}

#pauseButton{
    position: absolute;
    width: 40px;
    height: 98%;
    left: 3%;
    top: 1%;
    background-size: 80% 80%;
    background-position: center;
    background-repeat: no-repeat;
}



#pauseField{
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(31, 31, 63, 0.74);
    z-index: 4;
}
#pauseText{
    color: whitesmoke;
    position: relative;
    top: 35vh;
    font-size: 7vh;
}
#unPauseButton{
    position: relative;
    top: 35vh;

    height: 10vh;

    background-image: url(../img/icons/unpause.svg);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

#unPauseButton:active{
    box-shadow: none;
    transform: translateY(6px);
}

.squareButton{
    position: absolute;
    width: 7vh;
    height: 7vh;
    border-style: solid;
    border-width: 4px;
}

#scoreTable{
    right: 0px;
    top: 53vh;
    background-color: #323B9F;    
    border-right: none;
}

#rewardsSquareButton{
    right: 0px;
    top: 62vh;
    background-color: #FFD952;    
    border-right: none;

}
#achievementsSquareButton{
    right: 0px;
    top: 71vh;
    background-color: #FFD952;    
    border-right: none;
}

#settings{
    right: 0px;
    top: 44vh;
    border-right: none;
}

#levelChooseButton{
    top: 39.5vh;
    left: 0vh;
    border-left: none;
}


#walletSquareButton{
    right: 0px;
    top: 35vh;
    border-right: none;
}


.squareIcon{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
}

#playButtonField{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to top, rgba(28, 28, 28, 1) 1%, rgba(28, 28, 28, 0) 20%);
}
#playButtonField:active>#playButton{
    box-shadow: none;
    transform: translateY(6px);
}

#playButton{
    position: relative;
    background-color: #FFD952;
    margin-top: 40vh;
    width: 20vh;
    height: 20vh;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 4px;
    border-color: #D2A400;
    box-shadow: 0 6px 0px #A07D01;
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

.infoBoxInGame{
    height: 35%;
}
.infoBoxOutOfGame{
    height: 55%;
}

#infoText{
    position: relative;
    color: #FFD952;
    font-size: 7vh;
    padding-bottom: 0%;
    margin-left: -2.5vw;
    bottom: -58.5%;
}

#infoBoxInPlay{
    display: none;
}

#score{
    position: absolute;
    left: 25%;
    bottom: 5%;
    height: 30%;
    width: 44%;
    background-color: #292a64;
    color: whitesmoke;
    z-index: 3;
}

#scoreInfo{
    position: absolute;
    background-color: #31348c;
    width: 97%;
    height: 60%;
    bottom: 10%;
    left: 1.5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#scoreText{
    font-size: large;
    color: whitesmoke;
}

#inGameLvl{
    position: absolute;
    left: 8%;
    bottom: 5%;
    height: 30%;
    width: 15%;
    background-color: #292a64;
    color: whitesmoke;
    z-index: 3;
}
#lvlInfo{
    position: absolute;
    background-color: #31348c;
    width: 95%;
    height: 60%;
    bottom: 10%;
    left: 2.5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#next{
    position: absolute;
    right: 12%;
    bottom: -5%;
    height: 40%;
    width: 17%;
    background-color: #292a64;
    font-size: large;
    z-index: 3;
}

#nextInfo{
    position: absolute ;
    background-color: #31348c;
    width: 90%;
    height: 40%;
    bottom: 4%;
    left: 5%;
    
}

#nextText{
    margin-top: 0.5vh;
    color: whitesmoke;
}

#popup{
    visibility: hidden;
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 5vh;
    top: 90vh ;
    font-size: xx-large;
    font-weight: 700;
    text-align: center;
    color:#ff6913;
    z-index: 2;
}

.removeAnimation{
    animation: removeAnimation 0.4s linear;
}

.popUpAnim{
    animation: popUpAnim 1s linear;
}

@keyframes popUpAnim {
    0%{
        visibility: visible;
        top: 90vh ;
        opacity: 100%;
    }
    100%{
        visibility: visible;
        top:60vh;
        opacity: 40%;
    }
}

@keyframes removeAnimation {
    0%{

    }
    100%{
        background-color: white;
    }
}



.trailAnimL{
    animation: trailAnimL 0.5s linear;
}

@keyframes trailAnimL {
    0%{
        background-color: #ca3fbf;
    }
    100%{
        opacity: 50%;
    }
}
.trailAnimJ{
    animation: trailAnimJ 0.5s linear;
}

@keyframes trailAnimJ {
    0%{
        background-color: #199919;
    }
    100%{
        opacity: 50%;
    }
}
.trailAnimO{
    animation: trailAnimO 0.5s linear;
}

@keyframes trailAnimO {
    0%{
        background-color: #efff15;
    }
    100%{
        opacity: 50%;
    }
}
.trailAnimI{
    animation: trailAnimI 0.5s linear;
}

@keyframes trailAnimI {
    0%{
        background-color: #eb8006;
    }
    100%{
        opacity: 50%;
    }
}
.trailAnimS{
    animation: trailAnimS 0.5s linear;
}

@keyframes trailAnimS {
    0%{
        background-color: #21e7e7;
    }
    100%{
        opacity: 50%;
    }
}
.trailAnimZ{
    animation: trailAnimZ 0.5s linear;
}

@keyframes trailAnimZ {
    0%{
        background-color: #703fca;
    }
    100%{
        opacity: 50%;
    }
}

.trailAnimT{
    animation: trailAnimT 0.5s linear;
}

@keyframes trailAnimT {
    0%{
        background-color: #ef1515;
    }
    100%{
        opacity: 50%;
    }
}

.settingsPopUp{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.432);
    z-index: 3;
    top: 0px;
    /* display: none; */
    /* transition: 0.3s; */
}
.settingsBottomBlock{
    position: absolute;
    transform: rotate(-3deg);
    width: 110%;
    left: -5%;
    top: 30%;
    height: 10%;
    background-color: #323B9F;
    border-bottom: #282E7D solid 10px;
    z-index:4;


}

.settingsTitle{
    position: relative;
    color: whitesmoke;
    font-size: xx-large;
    transform: rotate(-3deg);
    top: 5%;
}
.settingsMainBlock{
    position: absolute;
    width: 100%;
    height: 35%;
    background:linear-gradient(0deg, #323B9F 10%, #1C1C1C );
    z-index:4;
}
.musicBlock{
    position: absolute;
    /* background-color:#5f6330; */
    /* width: 90%; */
    height: 25%;
    left: 5%;
    right: 5%;
    top: 25%;
}
.soundBlock{
    position: absolute;
    /* background-color:#5f6330; */
    /* width: 90%; */
    height: 25%;
    left: 5%;
    right: 5%;
    top: 55%;
}
.volumeIcon{
    position: absolute;
    top: 0;
    width: 20%;
    right: -10%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
}
.musicIcon{
    position: absolute;
    top: 0;
    width: 20%;
    right: -10%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
}
.inSettsTitle{
    position: relative;
    width: 100%;
    font-family: 'Roboto-Mono', sans-serif;
    color: whitesmoke;
    font-size: medium;
}
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90%;
    margin-left: 2.5%;   
    height: 60%;
    background: #1F1F47; /* Цвет полосы */
    outline: none;
    /* border-radius: 5px; */
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */
    border: solid #282E7D 6px;
}
.slider::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    height: 100%;
    /* cursor: pointer; */
    background: #1F1F47;
    /* border-radius: 5px; */
}

/* Стилизация бегунка */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 100%;
    background: #FFD952; 
    border: solid 5px #D2A400;;
    box-shadow: 
    -200px 6px 0px 200px #FFD952;
    cursor: pointer;
    position: relative;
    /* margin-top: -5px;  */
}

#backButtonInSetts{
    z-index: 4;
}
#settingsInBlock{
    height: 0%;
    transition: 0.3s;
}


.heartPrev{
    position: relative;
    margin-top: 5%;
    width: 8vh;
    height: 8vh;
    background-repeat: no-repeat;
    background-size: contain;
}

.lifesCountPrev{
    color: whitesmoke;
    text-align: center;
    font-size: larger;
    width: 60%;
}
.redColor{
    color: #FF5252;
}

#useLifeButton{
    bottom: 28%;
}
#addLifeButton{
    bottom: 28%;
}


.activeChildrenBlock{
    position: relative;
    width: 75%;
    height: 75%;
    top: 12.5%;
    left: 12.5%;
    border: solid 4px black;
    opacity: 10%;
}

.OnClickBanner{
    position: absolute;
    left: 5%;
    right: 5%;
    top: 77vh;
    height: auto;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.GameLevelInfoBlock{
    position: absolute;
    height: 100%;
    width: 60%;
    right: 5%;
    top: 5%;
    bottom: 5%;
}

.LinesCountList{
    position: relative;
    display: inline-block;
    font-family: 'Snowstorm', sans-serif;
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    margin-left: 9%;
    margin-top: 8%;
    line-height: 41px;

}
.ScoresForLinesInfoList{
    position: relative;
    display: inline-block;
    border: solid 4px #8489C5;
    border-bottom: none;
    border-top: none;

    font-family: 'Snowstorm', sans-serif;
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    margin-left: 2vh;
    width: 35%;

    z-index: 1;
    line-height: 41px;
}

.DrDwnBtn{
    background-color: #1F1F3F;
    color: whitesmoke;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    font-size: 22px;
    border: solid 4px #282E7D;
    position: relative;
    height: 6vh;
}
.DrDwnBtnIcon{
    position: absolute;
    height: 3vh;
    right: 5%;
    width: 3vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top: 0%;
    height: 100%;
    transition: 0.3s;

}

.DrDwnContent{
    overflow: auto;
    height: 15vh;
    position: relative;
    z-index: 2;
}
.DrDwnContent>div{
    background-color: #1F1F3F;
    color: whitesmoke;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border: solid 4px #282E7D;
    position: relative;
    height: 6vh;
}

#chooseLvlButton{
    bottom: 8vh;
}