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

.alertDisplay{
    position: absolute;
    top: 40dvh;
    left: 2.5dvh;
    width: 90dvw;
    /* height: 20dvh; */
    background-color: crimson;
    border-radius: 15%;
    border-style: solid;
    z-index: 20;
    display: inline-block;
    text-align: center;
    display: none;
}

.strip{
    user-select: none;
    display: grid;
    /* grid-auto-flow: column; */
    grid-template-columns: repeat(4, 1fr);
}

.timerPosition{
    position: relative;
}
    
.timerHandler{
    background: url(../src/img/Timer.png) no-repeat center;
    background-size: 100% auto;
    width: 50%;
    grid-column: 3 / 4;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: right;
}

.timerAdjuster{
    position: relative;
    display: flex;
    align-items: center;
    margin-right: .8vw;
}

.timer{
    font-size: 1.5vw;
}

.removeNumber{
    animation: removeNumber .25s forwards;
    transform-origin: bottom;
}

.addNumber{
    animation: addNumber .25s forwards;
    transform-origin: top;
}

@keyframes removeNumber {
    0%{
        transform: rotateX(0deg);
        }
    100%{
        transform: rotateX(90deg);
    }
}
@keyframes addNumber {
    0%{
        transform: rotateX(-90deg);
        }
    100%{
        transform: rotateX(0deg);
    }
}

.counterHandler{
    background: url(../src/img/Compteur.png) no-repeat center;
    background-size: 100% auto;
    width: 12%;
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: right;
}

/* chiffre clignotte et couleur rouge */

.counter{
    margin-right: .7vw;
    font-size: 1.5vw;
}

/* .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
    margin-top: 130px;
} */

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

.countdown{
    user-select: none;
    display: inline-block;
    font-size: 8dvw;
    color: black;
    background-color: #2a7333;
    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);
    }
}

.cage{
    position: absolute;
    width: 100dvw;
    height: 2dvh;
    /* background-color: white; */
}

.topCage{
    top: 26dvh;
}

.bottomCage{
    top: 68dvh;
}

.extrem{
    position: absolute;
    width: 100dvw;
    height: 2dvh;
    /* background-color: red; */
}

.topEx{
    top: 10dvh;
}

.bottomEx{
    top: 75dvh;
}

.posts{
    position: absolute;
    display: flex;
    justify-content: center;
    height: 42dvh;
    width: 3dvw;
    /* background-color: rgba(66, 135, 245, .5); */
    top: 26dvh;
}

.leftPo{
    left: 41.5dvw;
    /* padding-left: 2dvw; */
}

.rightPo{
    right: 43dvw;
}

.centerPo{
    width: 10%;
    height: 100%;
    /* align-self:flex-start; */
    /* background-color: rgba(245, 66, 188, 0.5); */
}

.transPo{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 15dvw;
    height: 6dvh;
    left: 42.5dvw;
    top: 52dvh;

    /* background-color: rgba(66, 135, 245, .5); */
}

.Ccenter{
    height: 10%;
    width: 100%;
    /* background-color: rgba(245, 66, 188, 0.5); */
}

.ballon{
    user-select: none;
    position: absolute;
    top: 80dvh;
    left: 46dvw;
    width: 5dvw;
    height: 9dvw;
    background: url("../src/img/ballon.png") no-repeat;
    background-size: 100%;
    /* background-color: brown; */
    /* background: radial-gradient(circle at 5% 10%, brown 40%, #000);
    border-radius: 2.5dvw/4.5dvw;
    cursor:grab;*/
    /* transform: rotateX(80deg);  */
}

/* .ballon .lineContainer{
    position: relative;
    width: 100%;
    height: 100%;
}

.ballon .line{
    background-color: white;
}

.ballon .greatLine{
    position: absolute;
    left: 47.5%;
    top: 30%;
    width: 5%;
    height: 40%;
    border-radius: 2.5dvw/4.5dvw;
}

.ballon .shortLineContainer{
    position: absolute;
    left: 43%;
    top: 30%;
    width: 10%;
    height: 40%;
    border-radius: 2.5dvw/4.5dvw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.ballon .shortLineContainer .line{
    width: 150%;
    height: 6%;
} */

.target{
    user-select: none;
    position: absolute;
    top: 30dvh;
    left: 44dvw;
    width: 12dvw;
    height: 12dvw;
    /* background: url("../src/img/rugby.jpg") no-repeat; */
    /* background-color: rebeccapurple; */
    background-size: 100%;
    z-index: 10;
}

.menu{
    position: absolute;
    background: radial-gradient(circle, rgba(34,103,48,1) 0%, rgba(80,158,59,1) 100%);
    width: 50dvw;
    height: 80dvh;
    left: 24vw;
    top: 10dvh;
    z-index: 10;
    border-radius: 5vw;
    display: flex;
    justify-content: center;
    /* font-family: "Playwrite PT", cursive; */
    font-size: 1.5dvw;
    color: white;
}

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

.menu .bold{
    font-weight: bold;
    display: inline-block;
    /* color: black; */
}

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

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

.menu .rules h3{
    position: relative;
    left: 2.5dvw;
}

.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: 100%;
    margin-left: 2dvw;
    display: flex;
    justify-content: center;
}

.menu .button{
    position: absolute;
    align-self: center;
    width: 50%;
    height: 15%;
    bottom: 5%;
    font-size: larger;
    color: white;
    border-radius: 50%;
    border-style: solid;
    cursor: pointer;
    background-size: 100% 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: gray;
}

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


@media (max-width: 480px) and (orientation: portrait) {
    body{
        background-size: 300% 100%;
    }
    /* play shake if click */
    /* .alertDisplay{
        display: inline-block;
    } */
    .menu{
        display: none;
    }
    .coutdownCenter{
        display: none;
    }
    .strip{
        height: 10dvh;
        grid-template-columns: repeat(6, 1fr);
    }
    .timerHandler{
        grid-column: 5;
        grid-row: 1;
        width: 200%;
        height: 100%;
    }
    .timerAdjuster{
        margin-right: 2vw;
    }
    .timer{
        font-size: 3.5vw;
    }
    .counterHandler{
        width: 150%;
        height: 100%;
        grid-column: 2;
        grid-row: 1;
    }
    .counter{
        margin-right: 1.9vw;
        font-size: 4vw;
    }
   
    .posts{
        height: 42dvh;
        width: 8dvw;
        top: 26dvh;
    }
    .leftPo{
        left: 26dvw;
    }
    .rightPo{
        right: 29dvw;
    }
    .transPo{
        width: 38dvw;
        height: 4dvh;
        left: 31dvw;
        top: 54dvh;
    }
    .target{
        top: 27dvh;
        left: 32dvw;
        width: 19dvh;
        height: 28dvh;
    }
    .ballon{
        /* display: none; */
        left: 40dvw;
        width: 20dvw;
        height: 35dvw;
    } 
}