/* background-color = #f3e5f5
text-color = #311b92
ui elements = #ea80fc #e040fb
dicee border = #311b92
dicee balls = #311b92 */


/* 
reset */
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
body{
    font-size: 62.5%;
}
.game{
    width: 100vw !important;
    height: 100vh !important;
    background-color: #f3e5f5;
    position: relative;
    z-index: -20;
}

.game .header{
    text-align: center;
    font-size: 2rem;
    color: #311b92;
    
    
}
.game .header h1{
    font-size: 4rem;
    padding: 1rem 0;
    transition: all ease-out;
    animation-name: moveInFromTop;
    animation-delay: .3s;
    animation-duration: 1s;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.game .header .header-sub{
    font-family: cursive;
    font-size: 2rem;
    padding: 1rem 0;
    animation-name: moveInFromTop;
    animation-delay: .5s;
    animation-duration: 1s;
}

.winner{
    font-size: 1.6rem;
}

.game .dicee-box{
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.dice-header{
    font-size: 1.6rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    color: #311b92;
    margin: 1rem 0;
}

.game .dicee-box .box{
    width: 50%;

}


/* dice box */
.game .dicee-box .box .dice{
    max-width: 15rem;
    height: 15rem;
    border: solid 5px #311b92;
    border-radius: 8px;
    display: none;
    margin: 5% auto;
    text-align: center;
    background-color: #f3e5f5;
    animation-name: wiggle;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-delay: 2s;
    box-shadow: 5px 5px 10px 10px hsla(251, 69%, 34%, 0.26);
}


/* dice balls */
.game .dicee-box .box .dice .ball{
    width: 3rem ;
    height: 3rem;
    border-radius: 50%;
    background-color: #311b92;
    display: inline-block;
    margin: .8rem;
    animation-name: moveSideWays;
    animation-duration: .5s;
    animation-delay: 2.1s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;

}

.game .dicee-box .box .six{
    display: block;
}




/* footer */
.footer{
    position: absolute;
    width: 100vw;
    bottom: 0;
    text-align: center;
}
.footer .footer-info{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem ;
    letter-spacing: .2rem;
    color: rgb(7, 4, 4);
}


/* UI elements */

.element1{
    width: 15rem;
    height: 15rem;
    border: none;
    border-radius: 50%;
    box-shadow: 5px 5px 5px 5px #e980fc93;
    background-image:radial-gradient(#ea80fc,#e040fb);
    z-index: -10;
    position: absolute;
    left: 2rem;
    animation-name: moveAlong;
    animation-duration: 30s;
    animation-delay: .2s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.element1 .inner-circle{
   width: 50%;
   height: 50%;
   margin: auto ;
   background-image: radial-gradient(#f3e5f5, #dbccdd);
   border-radius: 50%;
   border: none;
   z-index: -10;
   transform: translateY(3.5rem);
}
.element2{
    z-index: -5;
    width: 10rem;
    height: 10rem;
    border: none;
    box-shadow: 5px 5px 5px 5px #311b9244;
    border-radius: 50%;
    background-image: radial-gradient(#311b928e,#311b92d0, #311b92);
    position: absolute;
    top: 2rem ;
    left: 2rem;
    animation-name: moveUpAndDown;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay:.3s ;
}
/* display */
.display{
    display: block !important;
}
.none{
    display: none !important;
}

/* media breakpoints */


/* animations */

@keyframes moveInFromTop {
    0%{
        transform: translateY(3rem);
        opacity: 0;

    }
    80%{
        transform: translateY(-.5rem);
        opacity: 1;

    }
    100%{
        transform: none;
        opacity: 1;
    }
}


@keyframes wiggle {
    0%{
        transform: rotate(8deg);
    }
    50%{
        transform: none;
    }
    80%{
        transform:rotate(-8deg) ;
    }
    100%{
        transform: none;
    }
}


@keyframes moveSideWays {
    0%{
        transform: translateX(5px);
    }
    100%{
        transform: none;
    }
}

/* UI elements animations */

@keyframes moveAlong {
    0%{
        transform: rotate(360deg);
        transform: translateX(6rem);
    }
    10%{
        transform: translateX(13rem);
        transform: rotate(360deg);
    }
    20%{
        transform: translateX(27rem);
        transform: rotate(360deg);
    }
    30%{
        transform: translateX(40rem);
        transform: rotate(360deg);
    }
    40%{
        transform: translateX(54rem);
        transform: rotate(360deg);
    }
    50%{
        transform: translateX(68rem);
        transform: rotate(360deg);
    }
    60%{
        transform: rotate(360deg);
        transform: translateX(81rem);
    }
    70%{
        transform: translateX(95rem);
        transform: rotate(360deg);
    }
    80%{
        transform: translateX(108rem);
        transform: rotate(360deg);
    }
    90%{
        transform: rotate(360deg);
        transform: translateX(122rem);
    }
    100%{
        transform: translateX(136rem);
        transform: rotate(360deg);
    }
}

@keyframes moveUpAndDown {
    0%{
        transform: translateY(10rem);
    }
    20%{
        transform: translateY(20rem);
    }
    50%{
        transform: translateY(30rem);
    }
    75%{
        transform: translateY(-20rem);
    }
    100%{
        transform: none;
    }
}