@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
body{
    background: url(../src/img/backgroung.jpeg) no-repeat;
    background-size: 100% 100%;
    /* background-color: gainsboro; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    margin: 0;
}

.menu{
    position: absolute;
    background: radial-gradient(circle, rgba(75,37,19,1) 10%, rgba(116,73,40,1) 50%, rgba(204,150,86,1) 100%);
    width: 40vw;
    height: 80vh;
    left: 30vw;
    top: 10vh;
    z-index: 10;
    border-radius: 5vw;
    display: flex;
    justify-content: center;
    font-family: "Playwrite PT", cursive;
    font-size: 1.5dvw;
    color: whitesmoke;
    /* visibility: hidden; */
}

.menu .underline{
    text-decoration: underline;
    display: inline-block;
}

.menu .bold{
    font-weight: bold;
    display: inline-block;
}

.menu .main{
    /* visibility: hidden */
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.menu .rules{
    position: absolute;
    left: 15%;
    top: 15%;
    margin-right: 1vw;
}

.menu .result{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    visibility: hidden;
}

.menu .content{
    position: absolute;
    top: 15%;
}

.menu .result .centered{
    position: relative;
    width: 35vw;
    margin-left: 5vw;
    display: flex;
    justify-content: center;
}

.menu .marge{
    position: relative;
    width: 33vw;
    left: 15%;
    margin-right: 1vw;
    
}

.menu .button{
    position: absolute;
    align-self: center;
    width: 60%;
    height: 10%;
    bottom: 5%;
    background-color: rgba(116,73,40,1);
    border-radius: 50%;
    border-style: solid;
    font-size: 2dvw;
    height: 10%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .button .text{
    width: 100%;
    text-align: center;
}

.machine-positon{
    width: 50dvw;
    height: 50dvh;
    margin-top: -15dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

#trigger{
    cursor: pointer;
}

.slot-machine{
    user-select: none;
    height: 330px;
    width: 400px; 
    z-index: 5;
    position: absolute;
}

.img-machine{
    width: 100%;
    position: absolute;
    z-index: 5;
}


.lever{
    height: 100%;
    width: 100%;
    position: absolute;
    right: -2%;
    z-index: 6;
}


.buttonHandler
{
    width: 9%;
    height: 10.91%;
    position: inherit;
    right: -.3%;
    top: 20%;
    z-index: 6;

    border: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #fb0000 0%,#c50000 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.arm{
    background: #0d0d0d;
    background: linear-gradient(to right, #0d0d0d 0%,#4e4e4e 47%,#383838 87%,#1b1b1b 100%);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);

    height: 41%;
    width: 2%;
    position: inherit;
    right: 3.1%;
    top: 26%;
    z-index: 3;
    overflow: visible !important;
}

.armPoint{
    background: #000;
    border-radius: 10px;
    bottom: 66px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    height: 2%;
    width: 2.5%;
    position: inherit;
    right: 3%;
    top: 66%;
    z-index: 2;
}

.bigRing{
    background: #282828;
    
    background: linear-gradient(to bottom, #282828 0%,#959595 14%,#d1d1d1 37%,#bababa 49%,#959595 67%,#212121 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8);
    
    height: 18%;
    width: 5%;
    position: inherit;
    right: 5.8%;
    bottom: 20.5%;
    z-index: 2;
}


.bigRing .shadowRing{
    background: linear-gradient(to bottom,  rgba(149,149,149,0.2) 0%,rgba(13,13,13,0.18) 46%,rgba(1,1,1,0.18) 50%,rgba(10,10,10,0.18) 53%,rgba(78,78,78,0.17) 76%,rgba(56,56,56,0.16) 87%,rgba(27,27,27,0.15) 100%);
    border-radius: 0 2px 2px 0;
    height: 50%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 1;
}

.littleRing{
    background: #282828;
    background: linear-gradient(to bottom, #282828 0%,#959595 14%,#d1d1d1 37%,#bababa 49%,#959595 67%,#212121 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8);
    height: 12%;
    width: 3.75%;
    position: inherit;
    right: 2.2%;
    bottom: 24%;
    z-index: 1;
}

.littleRing .shadowRing{
    background: linear-gradient(to bottom,  rgba(149,149,149,0.15) 0%,rgba(13,13,13,0.15) 46%,rgba(1,1,1,0.15) 50%,rgba(10,10,10,0.15) 53%,rgba(78,78,78,0.15) 76%,rgba(56,56,56,0.15) 87%,rgba(27,27,27,0.15) 100%);
    border-radius: 0 2px 2px 0;
    height: 50%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 66.7%;
    z-index: 1;
}

.trigger{
    position: absolute;
    width: 12%;
    height: 60%;
    right: -1%;
    top: 19.5%;
    cursor: pointer;
    z-index: 10;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* margin-left: -10%; */
    top: 52%;
    left: 4%;
    /* bottom: 20%; */
    width: 83%;
    height: 38%;
    z-index: 1;
}

.slot-img
{
    background-color: white;
    background-size: 105% 105%;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slot-img img
{
    padding-top: 25%;
    padding-bottom: 25%;
    width: 100%;
}

.slot-img img.animate{
    animation: slideDown .2s ease-out;
    animation-iteration-count: 1;
}

:root {
    --end-positon: 100px;
    --end-blur: 5px;
}

@keyframes slideDown {
    0% {
        filter: blur(5px);
        transform: translateY(-100px);
        overflow: visible;
    }
    100%{
        filter: blur(var(--end-blur));
        transform: translateY(var(--end-positon));
    }
}

@media (max-width: 480px) {
    body{
        height: 100dvh;
        background-size: 250% 100%;
        background-position: center;
    }
    .machine-positon{
        margin-top: -15vh;
    }
    .slot-machine {
        height: 230px;
        width: 290px; 
    }
    .container {
        top: 55%;
    }

    .slot-img img{
        padding-top: 45%;
        padding-bottom: 45%;
    }
    .lever{
        top: 3%;
    }
}