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

::-webkit-scrollbar {
    width: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100svh;
    background: linear-gradient(90deg, #283e51, #182848);
    user-select: none;
}

.game{
    position: relative;
    display: block;
    height: 100vh;
    height: 100svh;
    background-image: url(../img/texture.png);
    background-size: 10%;
}

/* Style for mobile devices */
@media ( max-width: 1024px) {
    .game {
        width: 100%; 
    }
}

/* Style for desktop devices */
@media (min-width: 1025px) {
    .game {
        width: 25vw;
    }
}
.infoBoxBasic{
    height: 35%;
    display: block;
}
.infoBoxSmaller{
    height: 30vh;
    display: block;
}

#bottomBlock {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 8vh;
    background-color: #282E7D;
    display: flex;
    justify-content: space-around; 
    align-items: center; 
    z-index: 2;
    transition: 0.3s;
}

.bottomButton{
    width: 20%;
    height: 100%;
    display: block;
    justify-content: space-around; 
    align-items: center; 
}

.bottomButtonTextActive{
    color: whitesmoke;
}
.bottomButtonTextPassive{
    color: #7e82b1;
}

.bottomText{
    position: relative;
    bottom: -15%;
    font-size: small;
    width: 100%;
    text-align: center;
}

.bottomIcons{
    position: relative;
    bottom:-15%;
    width: 100%; 
    height: 45%; 
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
    border: none; 
}

#infoBox{
    background: linear-gradient(0deg, #323B9F 10%, #1C1C1C );
    overflow: visible;
    display: inline-block;
    position: absolute;
    left: -20px;
    top: -20%;
    width: 115%;
    border-bottom-style: solid;
    border-width: 12px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transform: rotate(-3deg);
    transition: width 0.3s ease, height 0.3s ease;
}

.infoBoxGradient {
    position: absolute;
    background: linear-gradient(to bottom, rgba(28, 28, 28, 1) 0%, rgba(28, 28, 28, 0) 100%);
    left: 0px;
    right: 0px;
    height: 5vh;
    z-index: 2;
    transition: none;
}

.interface{
    background-color: #3137a1; 
    border: #272b7f;
    z-index: 2;
    visibility: visible;
}

.field{
    font-family: 'Snowstorm', sans-serif;
    text-align: center;
}

.lives{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 7vh;
}

.livesInfo{
    position: absolute;
    left: 3%;
    font-family: 'Roboto-Mono', sans-serif;
    width: 33%;
    font-size:smaller;
    text-align: left;
    top: 20%;
    color: whitesmoke;
}
.healthBlock{
    position: absolute;
    border-width: 4px;
    border-color: #282E7D;
    border-style: solid;
    width: 60%;
    right: 0px;
    height: 95%;
    top: 2.5%;
    display: flex;
    justify-content: center;
}
.hearts{
    display: inline-block;
    height: 95%;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center; 
    border: none; 
}

.taskOverview{
    position: absolute;
    width: calc(90% + 5px);
    left: 5%;
    font-family: 'Roboto-Mono', sans-serif;
    color: whitesmoke;
    font-size: large;
    font-weight: 500;
    line-height: 125%;
}
.taskIcon{
    position: relative;
    height: 9.5vh;
    width: 9.5vh;
    background-size: 60% 60%; 
    background-repeat: no-repeat;
    background-position: center;
    /* border-right-color: #282E7D;
    border-right-style: solid;
    border-right-width: 2px; */
}
.taskInfo{
    top: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    right: 0;
    /* border-left-style: solid; */
    border-left-width: 4px;
    border-color: #282E7D;
    width: calc(100% - 9.5vh);
    height: 100%;

    justify-content: center;
}
.taskText{
    color:#747BCA;
    text-align: left;
    font-size: large;
    font-family: 'Roboto-Mono', sans-serif;
}

.taskInField{
    height: 100%;
    overflow-y: auto;
}
.taskInField>div{
    position: relative;
    /* display: flex; */
    background-color: #323B9F;
    border-style: solid;
    border-color: #282E7D;
    border-width: 4px;
    height: 11vh;
    width: calc(100% - 5px);
    display: flex;
    margin-top: 5px;
}
.tournamentInField{
    height: 100%;
    overflow-y: auto;
}
.tournamentInField>div{
    position: relative;
    /* display: flex; */
    background-color: #323B9F;
    border-style: solid;
    border-color: #282E7D;
    border-width: 4px;
    height: 13vh;
    width: calc(100% - 5px);
    display: flex;
    margin-top: 5px;
}

.buttonText{
    position: relative;
    color:#000000;
    font-size:x-large;
    top: 25%;
}

.button{
    position: absolute;
    background-color: #FFD952;
    width: 90%;
    height: 8vh;
    left: 5%;
    /* margin-right: auto; */
    border-style: solid;
    border-width: 4px;
    border-color: #D2A400;
    box-shadow: 0 6px 0px #A07D01;
    /* z-index: 2;   */
}
.biggerButton{
    position: absolute;
    width: 90%;
    height: 14vh;
    left: 5%;
    border-style: solid;
    border-width: 4px;
    box-shadow: 0 6px 0px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    font-family: 'Snowstorm',sans-serif;
    font-weight: 400;
    font-size: 35px;
    justify-content: center;
    align-items: center;
}

.violettBiggerButton{
    box-shadow: 0 6px 0px #B558CC;
}
.violettBiggerButton:active{
    box-shadow: none;
}

.goldBiggerButton{
    box-shadow: 0 6px 0px #A07D01;
}
.goldBiggerButton:active{
    box-shadow: none;
}

.button:active{
    box-shadow: none;
    transform: translateY(6px);
}
.biggerButton:active{
    box-shadow: none;
    transform: translateY(6px);
}

#playBiggerButton{
    bottom: 57%;
}
#tournamentBiggerButton{
    bottom: 28%;
}
#connectWalletBiggerButton{
    bottom: 25%;
    color: black;
}

.disabledButton{
    background-color: #817e70;
    border-color: #53514c;
    box-shadow: 0 6px 0px #3d3a2f;
}

.popUp{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.432);
    background: linear-gradient(to bottom, rgba(28, 28, 28, 1) 1%, rgba(28, 28, 28, 0) 70%);
    z-index: 3;
    top: 0px;
}
.upperBlock{
    position: absolute;
    width: 110%;
    height: 10vh;
    background-color:  #323B9F;
    border-top-style: solid;
    border-top-color: #282E7D;
    border-top-width: 12px;
    transform: rotate(-3deg);
    /* top: 20vh; */
}

.popUpField{
    position: absolute;
    background-color: #323B9F;
    bottom: 0px;
    /* top: 24vh; */
    width: 100%;
    overflow: visible;

}
.popUpIcon{
    position: absolute;
    left: 5%;
    width: 12vh;
    height: 12vh;
    top: -10%;
    background-size: 160%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #282E7D;
    border-style: solid;
    border-color: #FFD952;
    border-width: 4px;
}
.popUpInfoTitle {
    position: relative;
    left: 5%;
    font-family: 'Roboto-Mono', sans-serif;
    font-size: xx-large;
    color: whitesmoke;
    margin-top: 10%; 
    margin-bottom: 2%; 
    width: 90%;
}

.popUpInfo {
    position: relative; 
    left: 5%;
    width: 90%;
    /* background-color: #A07D01; */
    border-top: 4px solid #747BCA;
    height: 12%;
    display: flex;
    margin-top: 5%; 
}
.popUpDateInfo{
    position: relative;
    left: 0%;
    /* width: 50%; */
    height: 100%;
    /* border-right: 2px solid #747BCA; */
    display: flex;
    flex-direction: column;
}
.popUpDateInfo>div{
    position: relative;
    left: 10%;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.popUpRewardInfo{
    position: relative;
    right: 0%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.popUpRewardInfo>div{
    position: relative;
    left: 10%;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.popUpInfoInTitle{
    color: #747BCA;
    font-family: 'Roboto-Mono', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center; /* Центрирование по вертикали */

}
.popUpInfoIn{
    color: whitesmoke;
    font-family: 'Roboto-Mono', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    width: 100%;
    height: 50%;
}

#inPopUpReward{
    left: 0%;
    width: 100%;
    height: 50%;
    bottom: 5%;
    align-items: center;
    font-size: medium;
    background-size: contain;
}

.popUpPlayers{
    position: relative;
    display: flex;
}
.popUpPlayers>div{
    position: relative;
    left: 10%;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popUpMaxPlayers{
    position: relative;
}
.popUpMaxPlayers>div{
    position: relative;
    left: 10%;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.popUpText {
    position: relative; /* Изменено на relative */
    left: 5%;
    width: 90%;
    height: calc(100vh - (52vh + 18vh));
    margin-top: 5%; /* Отступ сверху после блока popUpInfo */
    text-align: left;
    font-family: 'Roboto-Mono', sans-serif;
    color: whitesmoke;
    font-size: medium;
    font-size: 20px;
    font-weight: 500;
    line-height: 125%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.reward{
    position: absolute;
    display: flex;
}

.rewardIcon{
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    width: 20%;
    height: auto;
    left: 0px;
    top: 0px;
}
.rewardText{
    display: flex;
    align-items: center; 
    justify-content: left; 
    /* color: #B5E0FF; */
    /* color: #FFD952 ; */
    /* vertical-align: middle; */
    /* font-size: smaller; */
    font-size: 95%;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    /* width: 100%;  */
    height: 100%; 
    margin-left: 3%;

}

.tournamentTable{
    position: absolute;
    right: 5%;
    top: 5%;
    width: 42%;
    height: 3%;
    display: flex;
    flex-direction: row;
    z-index: 5;
}
.tournamentTableText{
    font-family: 'Roboto-Mono', sans-serif;
    color: whitesmoke;
    font-size: 16px;
}
.tournamentTableIcon{
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0%;
}

.backButton{
    position: absolute;
    background-image: url(../img/icons/BackArrow.svg);
    left: 5%;
    top: 5%;
    width: 5%;
    height: 3%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
}

.popUpAddInfo{
    position: absolute;
    width: 50%;
    left: 25%;
    margin-left: 10%;
    top: -1.5%;
    display: flex;
}

.popUpAddInfoText{
    font-family: 'Roboto-Mono', sans-serif;
    color: #FFD952;
    text-align: left;
    margin-left: 5%;
}
.popUpPlayTimeInfo{
    position: absolute;
    height: 100%;
    width: 33%;
    left: 66%;
    border-left: 2px solid #747BCA;
    display: flex;
    flex-direction: column;
}
.popUpPlayTimeInfo>div{
    position: absolute;
    left: 10%;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#rewardStylePlayed{
    width: 33%;
    /* right: 0; */
    left: 33%;
    border-right: 2px solid #747BCA;
}
.popUpInfoPlayed{
    color: whitesmoke;
    font-family: 'Roboto-Mono', sans-serif;
    font-size: large;
    text-align: left;
    width: 100%;
    height: 50%;
}

.popUpTitle{
    font-size: xx-large;
    color: whitesmoke;
    position: relative;
    text-align: center;
    top: -8%;
    transform: rotate(-3deg);
}
.dailyRewardsGrid{
    position: absolute;
    display: grid;

    left: 5%;
    right: 5%;
    top: 10%;
    bottom: 20%;
    grid-template-columns: repeat(4, 24.5%);

    padding: 0.6vh;
    gap: 0.35vh;

}

.dailyRewardsGrid>div {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}
.dailyRewardTitle{
    position: relative;
    font-family: 'Roboto-Mono', sans-serif;
    color: whitesmoke;
    font-size: large;
    text-align: center;
    top: 7%;
}
.dailyRewardIcon{
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    width: 100%;
    height: 60%;
}
.dailyRewardReward{
    position: relative;
    font-family: 'Roboto-Mono', sans-serif;
    color: whitesmoke;
    font-size: large;
    text-align: center;
    /* bottom: 7%; */
}

.dailyRewardDissabled{
    opacity: 50%;
    z-index: 4;
}
.dailyRewardClaimed{
    border: solid 4px #7FD42C;
}
.dailyRewardActive{
    border: solid 4px #FFD952;
}

#claimButton{
    bottom: 10%;
}
.exitField{
    width: 100%;
    height: 100%;
}
.disabledTask{
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: rgba(28, 28, 28, 0.11); */
    opacity: 55%;
    /* z-index: 1; */
}

#losePopUp{
    display: none;
}
.exitButton{
    position: absolute;
    width: 100%;
    font-size: 4vh;
    bottom: 10vh;
    height: auto;
    color: whitesmoke;
}

#table{
    width: 100%;
    height: 100%;
    position: absolute;
}

#tableListField{
    position: absolute;
    /* top: 17vh; */
    left: 5%;
    right: 5%;
    bottom: 8vh;
}

.inListText{
    display: flex;
    flex-direction: row;
}

#inListTextText{
    color: whitesmoke;
    font-family: 'Roboto-Mono', sans-serif;
    font-size: large;

}

#playersReward{
    left: 27%;
    width: 45%;
    top: 55%;
    height: 25%;
}
#playersReward>div{
    color: #FFD952;
}
#playersNameField{
    top: -15%;
}
.playerPosition{
    position: absolute;
    border-radius: 100%;
    /* background-color: rgba(40, 46, 125, 1); */
    width: 4vh;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color:#7E82B1; */
    font-family:'Roboto-Mono', sans-serif;
    font-size: larger;
    right: 5%;
    top: calc(50% - 2vh);
}

.scoresInfo{
    position: absolute;
    display: flex;
    width: 75%;
    height: 20%;
    flex-direction: row;
    bottom: 0%;    
    left: 15%;
    justify-content: center;
    align-items: center;
}
.scoresInfo>div{
    width: 65%;
    height: 100%;
    position: static;
}

#scoreOnPlay{
    position: relative;
    color:whitesmoke;
    font-size: 19px;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
}


#livesInfoOnPlay{
    width: 27%;
    position: relative;
    bottom: -12.5px;
}

#pointsScore>div{
    color:whitesmoke;
    font-size: large;
}
#coinsScore>div{
    color: whitesmoke;
    font-size: large;
}

.livesInfoBox{
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.livesInfoBoxText {
    color: whitesmoke;
    font-size: 19px;
    font-weight: 700;
    font-family: 'Roboto-Mono', sans-serif;
}

.livesInfoBoxIconPlus{
    background-size: contain;
    height: 3vh;
    width: 3vh;
    background-repeat: no-repeat;
    margin-left: 5%;
    position: relative;
    background-position: center;
}


.cardsList{
    position: absolute;
    display: flex;
    left: 5%;
    right: 5%;
    top: 20vh;
    bottom: 15vh;
    /* background-color: #747BCA; */
    flex-direction: row;
}
.card{
    position: relative;
    display: inline-block;
    
    border: 3px solid #282E7D;
    background-color: #323B9F;
    width: 50%;
    height: 35vh;
}

.flexCardContainer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cardIcon{
    width: 12vh;
    height: 12vh;
    border: solid 4px #282E7D;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    position: relative;
    /* top: -20%; */
}
.cardTitle{
    /* width: 80%; */
    height: 5vh;
    font-family: 'Roboto-Mono', sans-serif;
    color: white;
    text-align: center;
    margin-top: 5%;
    font-weight: 700;
    font-size: 16px;
}

.disabledCard{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:#00000062;
    z-index: 4;
   

}
.disabledCard>div{
    position: relative;
    font-family: 'Roboto-Mono',sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    color: whitesmoke;
    align-items: center;
    justify-content: center;
    height: 40px;
    display: flex;
    top: 80%;
}
.disabledCard>div>.rewardIcon{
    height: 20px;
}


.inPopUpPrev{
    position: absolute;
    background-color: #1F1F3F;
    left: 5%;
    right: 5%;
    top: 13vh;
    height: 18vh;
    display: flex;
    flex-direction: column;
    /* justify-items: center; */
    align-items: center;
}

.inPopUpPrevText{
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: whitesmoke;
    text-align: center;
    width: 80%;
    display: flex;
    flex-direction: row;
}

.inPopUpPrevTitle{
    position: relative;
    margin-top: 5%;
    width: 100%;
    height: 4vh;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 400;
    font-size: larger;
    color: whitesmoke;
}

#reffReward{
    left: 5%;
    position: relative;
    height: 6vh;
    width: 60%;
}

#reffReward>.rewardText{
    font-size: 6vh;
    color: whitesmoke;
    font-family: 'Snowstorm', sans-serif;
    margin: auto;
}
#reffButton{
    bottom: 15vh;
}

.reffInviteButton{
    position: absolute;
    width: 100%;
    font-size: 3vh;
    bottom: 8vh;
    color: whitesmoke;
}

.wentWrongBlock{
    position: absolute;
    left: 5%;
    right: 5%;
    font-family: 'Snowstorm', sans-serif;
    font-weight: 400;
    color: whitesmoke;
    font-size: xx-large;
    text-align: center;
    top: 20vh;
}
.logBlock{
    background-color: #3137a1;
    position: absolute;
    left: 5%;
    right: 5%;
    top: 33vh;
    bottom: 12vh;
    overflow: scroll;

    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 400;
    color: whitesmoke;
    font-size: xx-large;
    text-align: left;
}

#inWinPopUpText{
    margin-top: 5%;
    width: 100%;
    height: 70%;
}
#inWinPopUpText>div{
    font-size: 5vh;
    color: #FFD952;
    font-size: xx-large;
    /* margin-left: 5%; */
}
#inPopUpTableButton{
    top: auto;
    bottom: 0%;
    height: auto;
}

.defaultList{
    height: 100%;
    overflow-y: auto;
}
.defaultList > .PlayerBlock{
    position: relative;
    display: flex;
    background-color: #1F1F3F;
    border-style: solid;
    border-color: #282E7D;
    border-width: 4px;
    height: 11.5vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}
.defaultList>#undefinedTask{
    position: relative;
    /* display: flex; */
    background-color: #323B9F;
    border-style: solid;
    border-color: #282E7D;
    border-width: 4px;
    height: 11vh;
    width: calc(100% - 5px);
    display: flex;
    margin-top: 5px;
}

.gameTableChooser{
    position: absolute;
    width: 11vh;
    height: 5.5vh;
    display: flex;
    flex-direction: row;
    top: 7vh;
    right: 5%;
    z-index: 1;
}
.chooserBlock{
    position: relative;
    height: 100%;
    width: 100%;
}
.indicator{
    position: absolute;
    display: block;
    height: 5.5vh;
    width: 5.5vh;
    border: solid 4px #FFD952;
    z-index: 1;
    transition: .3s;
    box-sizing: border-box;
}


.tableButtonBlock{
    position: absolute;
    top: 6vh;
    width: 100%;
    height: 5vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: visible;
    
}
.tableButton{
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: whitesmoke;
    margin: 5px;
}
.figureIndicator{
    position: absolute;
    top: 3vh;
    width: 4vh;
    height: 4vh;
    height: 50%;
    transition: 0.3s;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.playersCountInfo{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 6vh;
    left: 5%;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: whitesmoke;
}

.infoBoxFilledField{
    height: 115vh;
    display: flex;
    flex-direction: row;
}

.loadingIntro{
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: whitesmoke; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* background-color: #01050d; */
    background-color: #000000;
}
.loadingAnim {
    position: relative;
    width: 100%;
    height: 0; /* Устанавливаем высоту на 0, чтобы использовать padding для создания соотношения */
    padding-top: 100%; /* Создаем квадрат с помощью padding */
    background-size: cover; /* Используем cover, чтобы картинка заполнила весь контейнер */
    background-repeat: no-repeat;
    background-position: center; /* Центрируем картинку внутри контейнера */
}


.bottomButtonAlert::after{
    content: "";
    position: absolute;
    top: 6px;
    transform: translateX(45px);
    width: 10px;
    height: 10px;
    background-color: #FF5252;
    border-radius: 50%;
}

.bottomButtonPointer{
    top: 8px;
    height: 10px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}

.championPrizesButton{
    display: flex;
    flex-direction: row;
    color: whitesmoke;
    font-family: 'Roboto-Mono', sans-serif;
    font-weight: 700;
    position: absolute;
    top: 2vh;
    right: 5%;
    font-size: larger;
    z-index: 4;
}

li{
    /* height: fit-content; */
    width: 82px;
    min-width: 82px;
    height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.tipComponent{
    /* width: 45%; */
    height: 4vh;
    background-color: #21224a;
    font-family: 'Snowstorm', sans-serif;
    color: rgb(233, 233, 233);
    font-weight: 300;
    font-size: large;
    text-align: center;
    position: absolute;
    left: 25%;
    right: 25%;
    z-index: 4;
    border-radius: 15px;
    top: -5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: .3s;
}

.upperAnim{
    animation: upperTipAnim 2.4s linear;
}

@keyframes upperTipAnim {
    10%{
        top: 13%;
        transform: scale(120%);
    }
    95%{
        top: 13%;
        transform: scale(120%);
    }
    100%{
        transform: scale(100%);
        top: -5%;
    }
}