:root {
    --bgColor: #010a01;
    --whiteColor: rgb(237, 88, 163);
    --headerTextShadowColor: rgb(167, 89, 38);
    --colorBtn: #db3eb1;
    --colorReset: #29e4af;
    --colorStop: #de1e24;
    --clickColor: #279f23;
}

* {
    padding: 0;
    margin: 0;
    text-transform: capitalize;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,700;1,400;1,500;1,700;1,900&display=swap");
html {
    /* cursor: url('../../logo/github_logo.png'); */
    /* cursor: alias; */
}
body {
    display: flex;
    min-height: 100vh;
    width: 100%;
    align-items: center;
    place-content: center;
    /* background-color: var(--bgColor); */
    background: url("https://images8.alphacoders.com/625/625551.jpg");
    background-size: cover;
    font-family: "Roboto", sans-serif;
}

/* cursor */
.cursor {
    /* opacity: 0; */
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* background: url("./mouse_change.png"); */
    background-color: #fff;
    background-size: cover;
    /* transition: 0s; */
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
}

/* header   */
h1 {
    color: var(--whiteColor);
}
/* score */
.text {
    font-size: 2rem;
    color: var(--whiteColor);
}
#score_result {
    font-size: 5rem;
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 30px #0fa, 0 0 60px #0fa, 0 0 70px #0fa, 0 0 90px #0fa,
        0 0 120px #0fa;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 70vh;
    width: 70%;
    animation: flicker 5.5s infinite alternate;
    /* From https://css.glass */
    background: rgba(87, 109, 56, 0.1);
    border-radius: 16px;
    padding: 2rem;
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(87, 109, 56, 0.71);
}
.your_life_text {
    color: greenyellow;
    display: flex;
    /* width: 50%; */
    margin: auto;
    justify-content: space-between;
}
.your_life {
    display: flex;
    justify-content: flex-end;
}
/* animation for the theme */
@keyframes flicker {
    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        box-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 30px #0fa, 0 0 60px #0fa, 0 0 70px #0fa,
            0 0 90px #0fa, 0 0 120px #0fa;
    }

    20%,
    24%,
    55% {
        box-shadow: none;
    }
}

/* play area */

.play_area {
    /* position: relative; */
    flex-grow: 1;
    width: 100%;
    display: flex;
    /* overflow: hidden; */
}
/* candle style fork from https://www.geeksforgeeks.org/how-to-create-candle-animation-using-css/ */
.candle_frame {
    position: relative;
    width: 25%;
    /* height: 75%; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.candle {
    position: absolute;
    width: 120px;
    height: 30%;
    background: linear-gradient(orange, darkorange, sienna, saddlebrown, rgba(0, 0, 0, 0.4) 90%);
    bottom: 0%;
    /* left: 45%; */
    transition: all 100ms;
}
.candle:hover {
    transform: translateY(-10px);
}
.candle:hover ~ .cursor {
    /* transform: scale(150%); */
}
.candle:before {
    content: "";
    position: absolute;
}
.candle:after {
    content: "";
    position: absolute;
    top: -25px;
    height: 50px;
    width: 100%;
    border-radius: 50%;
    background: radial-gradient(sienna, orange, darkorange, saddlebrown);
    transform: rotateX(60deg);
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), inset -3px -3px 5px rgba(0, 0, 0, 0.2);
}

.thread {
    width: 5px;
    height: 35px;
    position: absolute;
    top: -35px;
    left: 55px;
    background: linear-gradient(blue 2%, black 80%, orange 99%);
    border-radius: 50% 50% 20% 20%;
    z-index: 10;
}
.fire {
    position: absolute;
    width: 45px;
    height: 110px;
    background: linear-gradient(white 50%, orange, blue);
    border-radius: 50% 50% 30% 30%;
    box-shadow: 70px -50px 100px orangered, -70px -50px 100px orangered;
    top: 120px;
    left: 25px;
    animation: move 1s linear infinite, rotate 2s linear infinite;
}
.fire:hover {
    /* cursor: alias; */
    /* cursor: url("../../logo/love_logo.png"), auto; */
}


/*  */
@keyframes move {
    0% {
        transform: rotateZ(1deg);
    }
    100% {
        transform: rotateZ(-1deg);
    }
}
@keyframes rotate {
    0% {
        top: -119px;
        left: 34px;
    }
    100% {
        top: -121px;
        left: 36px;
    }
}



/* constrol  */
.control {
    padding-top: 4rem;
}

.btn {
    font-size: 1rem;
    border-radius: 50px;
    padding: 1rem;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.5s;
}

.start {
    filter: drop-shadow(0 0 15px var(--colorBtn)) drop-shadow(0 0 50px var(--colorBtn)) contrast(2) brightness(4);
    color: var(--colorBtn);
    border: 4px solid var(--colorBtn);
}
.stop {
    filter: drop-shadow(0 0 15px var(--colorStop)) drop-shadow(0 0 50px var(--colorStop)) contrast(2) brightness(4);
    color: var(--colorStop);
    border: 4px solid var(--colorStop);
}
.reset {
    filter: drop-shadow(0 0 15px var(--colorReset)) drop-shadow(0 0 50px var(--colorReset)) contrast(2) brightness(4);
    color: var(--colorReset);
    border: 4px solid var(--colorReset);
}

.btn:hover {
    font-size: 1rem;
    color: black;
    background-color: #db3eb1;
    filter: drop-shadow(0 0 20px #db3eb1) contrast(2) brightness(2);
}

.clicked {
    border: 4px solid var(--clickColor);
    pointer-events: none;
}

/* modal  */
.modal {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    place-content: center;
    /* background-color:
; */
    /* background-color: #0fa ; */
    /* display: none; */
    background: rgba(227, 218, 218, 0.63);
    backdrop-filter: blur(5px);
    /* display: none; */
}

.modal .content {
    background: rgba(68, 192, 41, 0.333);
    height: 500px;
    width: 80vw;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.modal h1 {
    font-size: 5rem;
    text-align: center;
    color: var(--colorBtn);
    width: 100%;
}

.modal .content .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.display_none {
    display: none;
}

.rank {
}