label {
    display: inline-block;
    clear: left;
    width: 90px;
    text-align: left;
    /*Change to right here if you want it close to the inputs*/
}

.question input {
    display: inline-block;
    width: 80%;
    height: 32px;
    border-radius: 10px;
    border: 4px solid rgb(81, 129, 99);
    padding-left: 12px;

}

.questions {
    margin: auto;
    max-width: 60%;
    padding: 10px;
    margin-top: 40px;
    background-color: rgb(255, 250, 244);
    border: 4px solid rgb(81, 129, 99);
    border-radius: 10px;

}

.question {
    margin: 16px 0px 32px 0px;
}

.submit {
    margin: 0px auto 24px;
    padding: 8px;
    text-align: center;
    width: 50%;
    display: block;

    color: rgb(255, 250, 244);
    font-size: large;
    font-weight: bolder;
    background-color: rgb(81, 129, 99);
    border-radius: 8px;
}

.coin-title {
    text-align: center;
}

#result {
    text-align: center;
}


.coin-container {
    margin: 24px auto;
    max-width: 20%;
    text-align: center;
    aspect-ratio: 1/1;
    border: 4px solid black;
    perspective: 1000px; /* determines distance beween the z=0 plane and user */

}

#try-again {
    text-align: center;
    padding: 8px;
    margin: 24px;
    color: rgb(255, 250, 244);
    background-color: rgb(81, 129, 99);
    border-radius: 8px;
    cursor: pointer;
}

#try-again:active {
    transform: translateY(2px)
}


/* Coin Animation*/

#coin {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* makes 3d space  for child elements */
}

#coin .heads,
#coin .tails {
    position: absolute; /* so it doesn't fly around the place */
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* don't show element when its back is facing the screen */
    border-radius: 50%;
    overflow: hidden;
}

#coin .heads img,
#coin .tails img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#coin .tails {
    transform: rotateX(180deg);
}

.show-heads {
    transform: rotateX(0deg);
}

.show-tails {
    transform: rotateX(180deg);
}

.flipping {
    animation: toss 3s forwards
}

/* forwards: once animation finish, element should stay in its final state rather than original style */

@keyframes toss {
    0% {
        transform: scale(1) rotateX(0deg); /* how many times it rotates on the X axis */
    }

    50% {
        transform: scale(1.5) rotateX(720deg); /* scale: make it bigger or smaller */
    }

    100% {
        transform: scale(1) rotateX(1440deg);
    }


}