@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@600&display=swap');

@font-face {
    font-family: oxanium;
    src: url(fonts/Oxanium-Light.ttf);
}

@font-face {
    font-family: gilroy;
    src: url(fonts/Gilroy-Bold.ttf);
}

@font-face {
    font-family: aloevera;
    src: url(fonts/Aloevera-Bold.otf);
}


body {
    overflow: hidden;
    transition: 1s;
    background: linear-gradient(102deg, #89f7fe 0%, #66a6ff 38.82%, #4d84f2 80.81%);
    display: none;
}

.unique {
    background: linear-gradient(102deg, #89f7fe 0%, #66a6ff 38.82%, #4d84f2 80.81%);
}

.common{
    background: gray;
}

.standart{
    background: #258D29;
}

.rare{
    background: #25748D;
}

.epic{
    background: #8D257D;
}

.legendary{
    background: #B71919;
}

@keyframes common { 
    from { 
        box-shadow: 0px 0px 130.1px -1px #ffffff4a;
        border: 13px solid gray;

    } to { 
        box-shadow: 0px 0px 0px -1px #713c3c06;; 
    }
}

@keyframes standart { 
    from { 
        box-shadow: 0px 0px 130.1px -1px #ffffff4a;
        border: 13px solid #258D29;
 
    } to { 
        box-shadow: 0px 0px 0px -1px #713c3c06;
        border: 13px solid #ffffff;
    }
}

@keyframes rare { 
    from { 
        box-shadow: 0px 0px 130.1px -1px #ffffff4a;; 
        border: 13px solid #25748D;

    } to { 
        box-shadow: 0px 0px 0px -1px #713c3c06;; 
        border: 13px solid #ffffff;
    }
}

@keyframes epic { 
    from { 
        box-shadow: 0px 0px 130.1px -1px #ffffff4a;;
        border: 13px solid #8D257D;

    } to { 
        box-shadow: 0px 0px 0px -1px #713c3c06;
        border: 13px solid #ffffff;
    }
}

@keyframes legendary { 
    from { 
        box-shadow: 0px 0px 130.1px -1px #ffffff4a;; 
        border: 13px solid #B71919;

    } to { 
        box-shadow: 0px 0px 0px -1px #713c3c06;; 
        border: 13px solid #ffffff;
    }
}


@keyframes unique { 
    from { 
        box-shadow: 0px 0px 130.1px -1px #8D257D;; 
        border: 13px solid #8D257D;
    } to { 
        box-shadow: 0px 0px 0px -1px #713c3c06;; 
        border: 13px solid #ffffff;
    }
}

.kopya{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0vw;
    top: 0vw;
    opacity: 0.5;
    display:block;
    z-index: 8667;
}

.background{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0vw;
    top: 0vw;
    z-index: 7;
}

.spinArea{
    position: absolute;
    width: 80.6vw;
    height: 33.8vw;
    left: 9.8vw;
    top:10.75vw;
    border-radius: 1.3vw;
    background: #13173f;
    z-index: 6;
    display: block;
}

.spin-1{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 1.2vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #ffffff00;
    overflow: hidden;
}

.spin-1-border{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 1.2vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #FFF;
    overflow: hidden;

    transition: 1s;

    /* animation-name: spin3; */
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.spin-2-border{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 27.8vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #FFF;
    overflow: hidden;

    transition: 1s;

    /* animation-name: spin3; */
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.spin-3-border{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 54.4vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #FFF;
    overflow: hidden;

    transition: 1s;

    /* animation-name: spin3; */
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* .spin-1-border{
    position: absolute;
    width: 23.705vw;
    height: 14.6vw;
    top: 10.43vw;
    left: 1.2vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #FFF;
    overflow: hidden;
} */

.spin-1-area{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: -483.4vw;
    left: 0vw;
    /* overflow: hidden; */
}

.spin-2-area{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: -483.4vw;
    left: 0vw;
    /* overflow: hidden; */
}

.spin-3-area{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: -483.4vw;
    left: 0vw;
    /* overflow: hidden; */
}

.spin{
    position: relative;
    width: 21.75vw;
    height: 13.15vw;
    top:-6.3vw;
    margin-top: 1.5vw;
    left: 1vw;
}

.spinImage{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0vw;
    left: 0vw;
}

.spinText{
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.83vw;
    top: -0.4vw;
    color:white;
    font-family: oxanium;
}

.spinReward{
    position: absolute;
    width: 9rem;
    height: 9rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    top: 4.5vw;
    object-fit: contain;
}

.spin-2{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 27.78vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #ffffff00;
    overflow: hidden;
}

.spin-3{
    position: absolute;
    width: 23.705vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 54.36vw;
    border-radius: 0.6vw;
    border: 0.68vw solid #ffffff00;
    overflow: hidden;
}

.spinMoneyType{
    position: absolute;
    top: 1.6vw;
    left: 3.05vw;
    font-size: 3.2vw;
    color: rgba(19, 136, 0, 0.72);
    background: white;
    font-family: gilroy;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 50%
}

.spinMoney{
    position: absolute;
    font-family: gilroy;
    font-size: 3.5vw;
    left: 7.7vw;
    top: 0.8vw;
    color:White
}

.test{
    position: absolute;
    width: 250vw;
    height: 250vw;
    top: -110vw;
    left: -65vw;

    animation-name: spin2;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin2 { 
    from { 
        transform: rotate(360deg); 
    } to { 
        transform: rotate(0deg); 
    }
}

.deneem{
    position: absolute;
    width: 100%;
    height: 100%;
    height: 37vw;
    top:6.5vw;
    left: 0vw;
    overflow: hidden;
    z-index: 6;

}

.whitebars{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0vw;
    top: 0vw;
    z-index: 7;
    
}

.inside{
    position: absolute;
    width:130vw;
    height: 130vw;
    left: -15vw;
    top: -38vw;
    z-index: 5;
    animation-name: spin2;
    animation-duration: 120000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.top{
    position: absolute;
    left: 0vw;
    top: 0vw;
    width: 101%;
    height: 8.5vw;
    z-index: 6;
}

.bottom{
    position: absolute;
    left: 0vw;
    bottom: 0vw;
    width: 100%;
    height: 9.3vw;
    z-index: 6;
}

.logo{
    position: absolute;
    width: 40vw;
    left: 29.05vw;
    top: -4vw;
    z-index: 99;
}

.spinTitle{
    position: absolute;
    font-size: 1.2vw;
    color:#DBFF00;
    background: #301919;
    border: 0.26vw solid #FFF;
    font-family: Gilroy;
    top: 44.15vw;
    left: 43.3vw;
    z-index: 555;
    padding-top: 0.5vw;
    padding-left: 0.7vw;
    padding-right: 0.7vw;
    padding-bottom: 0.4vw;
}

.spinTitle2{
    position: relative;
    left: 0.3vw;
    color:White
}

.logoTitle{
    position: absolute;
    left: 44.7vw;
    width: 8.5vw;
    top: 3vw;
    text-align: center;
    transform: rotate(-11deg);
    font-size: 0.8vw;

    color:#1a1c7f;
    z-index: 999;
    font-family: aloevera;
}

.logoName{
    position: absolute;
    width: 13.3vw;
    text-align: center;
    left: 42.8vw;
    top: 0.57vw;
    transform: rotate(-12deg);
    font-size: 3.5vw;

    color:white;
    z-index: 999;
    font-family: aloevera;
    text-shadow: -3px 4px 0px #000
}

.logoWheel{
    position: absolute;
    width: 9.9vw;
    text-align: center;
    top: 6.25vw;
    transform: rotate(-12deg);
    font-size: 1.8vw;
    left: 45.2vw;
    color:white;
    z-index: 999;
    font-family: aloevera;
    text-shadow: -3px 4px 0px #000  
}

.spinButton{
    position: absolute;
    width: 12vw;
    height: 4.6vw;
    bottom: 3vw;
    left: 44vw;
    z-index: 55;
}

.rewardButton{
    position: absolute;
    width: 12.6vw;
    height: 4.6vw;
    bottom: 1.0vw;
    right: 1vw;
    z-index: 55;
}

.spinIcon{
    position: absolute;
    width: 1.6vw;
    height: 1.6vw;
    top: 1.5vw;
    left: 2.35vw;
}

.spin-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 6.8vw;
    height: 3.05vw;
    top: -1.8vw;
    left: 0.55vw;
    font-size: 2.1vw;
    background: white;
    padding-left: 4.07vw;
    padding-top: 0.8vw;
    border-radius: 0.5vw;
}

.reward-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 9.1vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.55vw;
    font-size: 2.1vw;
    background: white;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
}

.rewardIcon{
    position: absolute;
    width: 1.6vw;
    height: 1.6vw;
    top: 1.5vw;
    left: 1.4vw;
}

.page-1{
    display: none;
}

.page-2{
    position: absolute;
    width: 80.35vw;
    height: 33.8vw;
    left: 9.8vw;
    top:10.75vw;
    border-radius: 1.3vw;
    background: #13173f;
    z-index: 9;
    display: block;
}

.border{
    position: absolute;
    width: 76.55vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 1.2vw;
    border-radius: 0.6vw;
    border: 13px solid #FFF;

    overflow-y: scroll;

    z-index: 999552525;
}

.border::-webkit-scrollbar {
    width: 0vw;
}

.reward{
    position: relative;
    width: 71.15vw;
    height: 8vw;
    /* top: 0.84vw; */
    left: 2.6vw;
    border-radius: 0.9vw;
    background: white;
    margin: 1.1rem 0;
}

.rewardPink{
    position: absolute;
    width: 28.6vw;
    height: 8vw;
    right: 0vw;
}

.rewardImage{
    position: absolute;
    width: 11rem;
    height: 7rem;
    top: 1vw;
    left: 1.5vw;
    object-fit: contain;
}

.rewardTitle{
    position: absolute;
    font-family: Fira Sans Condensed;
    color: #00a2ff;
    font-size: 2.05vw;
    left: 14.07vw;
    top: -0.66vw;
}

.rewardName{
    position: absolute;
    font-family: Fira Sans Condensed;
    color: black;
    font-size: 2.05vw;
    left: 14.07vw;
    top: 1.35vw;
}

.sellButton{
    position: absolute;
    width: 9vw;
    height: 4.6vw;
    bottom: 1.6vw;
    right: 13vw;
    z-index: 55;
}

.sell-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 5.1vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.34vw;
    font-size: 2.1vw;
    background: white;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
}

.sellIcon{
    position: absolute;
    width: 1.6vw;
    height: 1.6vw;
    top: 1.5vw;
    left: 1.1vw;
}

.claimButton{
    position: absolute;
    width: 10vw;
    height: 4.6vw;
    bottom: 1.6vw;
    right: 2.5vw;
    z-index: 55;
}

.claim-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 5.95vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.25vw;
    font-size: 2.1vw;
    background: white;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
}

.itemArea{
    position: absolute;
    width: 43.2vw;
    height: 27.35vw;
    left: 28vw;
    top: 14vw;
    border-radius: 26px;
    border: 7px solid #565656;
    background: #FFF;
    z-index: 999999999;
}

.item-image{
    position: absolute;
    height: 10vw;
    width: 11rem;
    left: 9.5rem;
    top: 1.5rem;
    object-fit: contain;

}

.item-title{
    position: absolute;
    font-family: Fira Sans Condensed;
    color: #00a2ff;
    font-size: 3.05vw;
    left: 21.65vw;
    top: -0.2vw;
}

.item-name{
    position: absolute;
    font-family: Fira Sans Condensed;
    color: black;
    font-size: 3.05vw;
    left: 21.65vw;
    top: 2.5vw;
}

.item-description{
    position: absolute;
    font-family: Fira Sans Condensed;
    color: black;
    font-size: 2.1vw;
    left: 4.5vw;
    top: 11vw;
}

.itemdesc-2{
    position: relative;
    left: 0.5vw;
    color: #00a2ff;
}

.itemsellButton{
    position: absolute;
    width: 9vw;
    height: 4.6vw;
    bottom: 2.7vw;
    left: 10vw;
    z-index: 55;
}

.itemsell-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 5.1vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.34vw;
    font-size: 2.1vw;
    background:  #00a2ff;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
    color: white;
}

.cancelButton{
    position: absolute;
    width: 9vw;
    height: 4.6vw;
    bottom: 2.7vw;
    left: 22.4vw;
    z-index: 55;
}

.cancel-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 7.1vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.34vw;
    font-size: 2.1vw;
    background:  #565656;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
    color: white;
}

.itemSell{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0vw;
    left: 0vw;

    background: rgba(217, 217, 217, 0.05);
    backdrop-filter: blur(19.100000381469727px);
    z-index: 5559;
}

.page2{
    display: none;
}

.logoArea{
    display: none;
}

.logoArea-2{
    position: absolute;
    left: -34vw;
    top: 21vw;
}

.page3{
    position: absolute;
    width: 57.28vw;
    height: 33.8vw;
    left: 29.75vw;
    top:11.15vw;
    border-radius: 1.3vw;
    background: #13173f;
    z-index: 9;
    display: block;
}

.border-2{
    position: absolute;
    width: 53.3vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 1.28vw;
    border-radius: 0.6vw;
    border: 13px solid #ffffff00;


    z-index: 999552525;
    overflow: hidden;
}

.page2-border{
    position: absolute;
    width: 53.3vw;
    height: 30.05vw;
    top: 1.2vw;
    left: 1.28vw;
    border-radius: 0.6vw;
    border: 13px solid #FFF;

    overflow: hidden;


    z-index: 999552525;
    transition: 1s;

    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.reward-2{
    position: relative;
    width: 52.5vw;
    height: 13.8vw;
    bottom: 459.65vw;
    left: 0.5vw;
    transition: 3s;
}

.rewardBackground-2{
    position: absolute;
    width: 51.5vw;
    height: 13.1vw;
    top: 0.3vw;
    left: 0.4vw;
}

.reward2-Image{
    position: absolute;
    width: 10.5rem;
    height: 10.5rem;
    left: 2.3vw;
    top: 2.9vw;
    object-fit: contain;
}

.reward2-name{
    position: absolute;
    left: 19.7vw;
    top: 1.22vw;
    font-family: oxanium;
    color: white;
    font-size: 3.5vw;
}

.rewardArea{
    position: absolute;
    width: 53.3vw;
    height: 30.05vw;
    top: 0vw;
    left: 0vw;
    overflow: hidden;

    z-index: 999552525;
}

.rewardArea::-webkit-scrollbar {
    width: 0vw;
}

.page-3{
    display: none;
}

.arrow-left{
    position: absolute;
    width: 3.4vw;
    height: 6.3vw;
    left: 10.25vw;
    top: 26vw;
    z-index: 554;
}

.arrow-right{
    position: absolute;
    width: 3.4vw;
    height: 6.3vw;
    right: 10vw;
    top: 26vw;
    z-index: 554;
}

.buttonAnim{
    transition: 0.3s;
}

.buttonAnim:hover{
    transform: scale(0.9);
}

.loading{
    position:absolute;
    left:44.1vw;
    top:20vw;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.loadingArea{
    position:absolute;
    width:100%;
    height:100%;
    left:0vw;
    top:0vw;
    background:rgba(0,0,0,0.40);
    z-index:999999;
    display: none;
}

.loading{
    position:absolute;
    left:44.5vw;
}

@keyframes spin { 
    from { 
        transform: rotate(360deg); 
    } to { 
        transform: rotate(0deg); 
    }
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

*:not(input):not(textarea) {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.claimAllButton{
    position: absolute;
    width: 38.5vw;
    height: 4.6vw;
    bottom: 1vw;
    left: 1vw;
    z-index: 55;
}

.claimAll-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 9.6vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.34vw;
    font-size: 2.1vw;
    background:  white;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
    color: black;
}

.sellAllButton{
    position: absolute;
    width: 12.6vw;
    height: 4.6vw;
    bottom: 1vw;
    left: 15vw;
    z-index: 55;
}

.sellAll-text{
    position: absolute;
    font-family: Fira Sans Condensed;
    width: 8.7vw;
    height: 3.15vw;
    top: -1.8vw;
    left: 0.34vw;
    font-size: 2.1vw;
    background:  white;
    padding-left: 3.05vw;
    padding-top: 0.7vw;
    border-radius: 0.5vw;
    color: black;
}

.arrow2-left{
    position: absolute;
    width: 3.4vw;
    height: 6.3vw;
    left: 30.25vw;
    top: 26vw;
    z-index: 9999999999999999999999554;
}

.arrow2-right{
    position: absolute;
    width: 3.4vw;
    height: 6.3vw;
    right: 13.5vw;
    top: 26vw;
    z-index: 9999999999999999999999554;
}

.spinMoneyType-2{
    position: absolute;
    top: 1.6vw;
    left: 18vw;
    font-size: 3.2vw;
    color: rgba(19, 136, 0, 0.72);
    background: white;
    font-family: gilroy;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 50%
}

.spinMoney-2{
    position: absolute;
    font-family: gilroy;
    font-size: 3.88vw;
    left: 23vw;
    top: 0.5vw;
    color:White
}