/*CSS*/
:root {
    --current-rotation: 0deg;
    --start-rotation: 0deg;
    --end-rotation: 0deg;
}

#Title {
    border-block: 10px double;
    text-shadow: -6px 3px #49575366;
}


.noto-serif-<uniquifier > {
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.carrois-gothic-sc-regular {
    font-family: "Carrois Gothic SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}


#Coin-Container {
    display: flex;
    border: 5px dotted;
    border-radius: 30%;
    margin: 50px 200px 10px 200px;
    padding: 10px;
    perspective: 300px;
}


#Coin {
    width: 200px;
    height: 200px;
    position: relative;
    border: 3px solid;
    border-radius: 50%;
    animation-iteration-count: 1;
    animation-duration: 3s;
    transform-style: preserve-3d;
    animation-fill-mode: forwards;
}

.Front, .Back {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    display: flex;
    backface-visibility: hidden; /* Hide the back of the coin */
    font-family: "Carrois Gothic SC", sans-serif;
    font-size: 50px;
    background: radial-gradient(#FFEE9A,#B88A2E);
}

.Middle {
    text-align: center;
    justify-content: center;
    align-items: center;
}

.Front {
    color: green;
}

.Back {
    color: silver;
    transform: rotateY(180deg);
}

.Result {
    font-size: 70px;
    font-family: "Noto Serif", serif;
}

#Button-Container {
    display: flex;
}

button {
    width: 200px;
    height: 50px;
}

.Flip-Heads {
    animation: Flip-Heads 3s forwards ease-in-out;
}

.Flip-Tails {
    animation: Flip-Tails 3s forwards ease-in-out;
}


@keyframes Flip-Heads {
    0% {
        transform: rotateY(var(--start-rotation, 0deg));
    }

    100% {
        transform: rotateY(var(--end-rotation, 2160deg));
    }
}

@keyframes Flip-Tails {
    0% {
        transform: rotateY(var(--start-rotation, 0deg));
    }

    100% {
        transform: rotateY(var(--end-rotation, 1980deg));
    }
}

body {
    background-color: #D4DFD3;
}