@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');
body{
    background-color: gainsboro;
    margin: 0;
    height: 100dvh;
    background: url("../src/img/back.jpeg") no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.handler{
    position: fixed;
    width: 93dvw;
    height: 100dvh;
    top: 0dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mat{
    user-select: none;
    height: 10dvh;
    padding-top: 10dvh;
    width: 35dvw;
    display: flex;
    justify-content: space-between;
}

.container{
    height: 100%;
    width: 30%;
}

.gobelet{
    height: 100%;
    width: 100%;
    /* position: relative; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* top: 1%;
    left: 1%; */
    /* box-shadow: 0px -100px 30px -30px #000000; */
    /* filter: drop-shadow(0px -50px 200px #000000); */
}

.gobelet .shadow{
    position: absolute;
    width: 80%;
    bottom: -10%;
}

.gobelet .gift{
    position: absolute;
    width: 30%;
    bottom: 15%;
    z-index: 0;
}

.gobelet .item{
    position: absolute;
    width: 60%;
    z-index: 5;
    bottom: 0;
}

.gobelet .reveal{
    animation: revealDotation 1.5s forwards;
    /* transform-origin: bottom; */
}


@keyframes revealDotation {
    0% {
        /* transform: scale(1);
        transform: rotateX(0deg); */
        transform: translateY(0dvh);
        
    }
    25%{
        /* transform: scale(3);
        transform: rotateX(30deg); */
        transform: translateY(-15dvh);
    }
    75%{
        /* transform: scale(3);
        transform: rotateX(30deg); */
        transform: translateY(-15dvh);
    }    
    100% {
        /* transform: scale(1);
        transform: rotateX(0deg); */
        transform: translateY(0dvh);
    }
    
}

.menu{
    position: fixed;
    width: 93dvw;
    height: 100dvh;
    top: 0dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Marcellus SC", serif;
    z-index: 10;
}

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

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

.menu .main{
    background: radial-gradient(circle, rgba(236,132,96,1) 0%, rgba(252,244,221,1) 80%);
    width: 60dvw;
    height: 60dvh;
    border-style: solid;
    /* border-width: 1dvh; */
    border-radius: 5dvh;
    border-color: black;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    font-size: 1.1dvw;
}

.menu .main .rules{
    /* position: absolute; */
    width: 40dvw;
    height: 38dvh;
    /* top: 10%; */
}

.menu .button{
    background-color: rgba(236,132,96,1);
    border-radius: 50%;
    border-style: solid;
    /* border-color: black; */
    font-family: "Marcellus SC", serif;
    font-size: 2dvw;
    width: 25%;
    height: 10%;
    cursor: pointer;
}

.coutdownCenter{
    position: fixed;
    top: 0;
    width: 93dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown{
    display: inline-block;
    font-size: 8dvw;
    color: black;
    background-color: rgba(236,132,96,1);
    border-style: solid;
    border-color: black;
    border-radius: 5dvh;
}

.animCountdown{
    animation: countdownAnim .9s forwards;
}

@keyframes countdownAnim {
    0%{
        transform: scale(1);
        }
    25%{
        transform: scale(1.4);
    }
    100%{
        transform: scale(1);
    }
}

.result{
    position: absolute;
    width: 25dvw;
    /* height: 25dvh; */
    top: 5dvh;
    right: 20dvw;
    z-index: -5;
    transform: rotateZ(-15deg);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.result .text{
    position: absolute;
    top: 15%;
    width: 70%;
    left: 25%;
    font-family: "Marcellus SC", serif;
    text-align: center;
    font-size: 1.25dvw;
    /* display: none; */
}


.result .bubble{
    width: 100%;
}

/* define variable modify in JS */
:root {
    
}

@media (max-width: 480px) {
    body{
        background-size: 250% 100%;
    }
    .menu .main{
        width: 80dvw;
        height: 70dvh;
        font-size: 4dvw;
    }
    .menu .main .rules{
        width: 70dvw;
        height: 50dvh;
    }
    .menu .button{
        font-size: 4dvw;
    }
    .mat{
        height: 10dvh;
        padding-top: 10dvh;
        width: 80dvw;
    }    
    .container{
        height: 100%;
        width: 150%;
    }
    .result{
        width: 45dvw;
        /* height: 25dvh; */
        top: 15dvh;
        right: 4dvw;
    }
    .result .text{
        top: 10%;
        width: 70%;
        left: 25%;
        font-size:2.8dvw;
        /* display: none; */
    }
}