body{
    overflow: hidden;
    font-family: "Schoolbell", cursive;
    font-weight: 400;
    font-style: normal;
    border: dotted blue 3px;
    padding: 14px;
    background: #e4f8ff;
    text-align: center;
}
.guessingButtons {
    background-color: #1E90FF;
    color: #FFFFFF;
    border: 2px solid #000080;
    border-radius: 5px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.guessingButtons:hover {
    background-color: #4169E1;
}
#guessingInput{
    cursor: text;
}
#guessingInput::placeholder{
    color: white;
}

.mainDivHidden{
    visibility: hidden;
}
.piImage{
    width: 96px;
}
#guessedDigitsInput{
    width: 1495px;
    height: 15px;
    resize: none;
    border: darkblue dotted 2px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.tools{
    background-color: #1E90FF;
    color: #FFFFFF;
    border: 2px solid #000080;
    border-radius: 5px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.tools:hover{
    background-color: #4169E1;
}
#piSongButton{
    position: absolute;
    transform: rotate(270deg);
    left: -4.6%;
}
#gameOverPopup{
    visibility: hidden;
    position: relative;
    top: -241px;
}
#hintsBox{
    border: dashed #cfcf0d 2px;
}
.hintsBox{
    display: none;
}
.hintsBoxNotVisible{
    display: none;
}
.hintsBoxVisible{
    display: block;
}
.gameOverPopupLost {
    background: #ffa8a8;
    border: red dotted;
    padding: 18px;
    color: darkred;
}
.gameOverPopupButtonsLost{
    background-color: #FF0000;
    color: #FFFFFF;
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.gameOverPopupButtonsLost:hover {
    background-color: #CC0000;
}
.popupResultTextsLost{
    color: red;
}
.gameOverPopupWon{
    background: #69ff56;
    border: #237a00 dotted;
    padding: 18px;
    color: darkgreen;
}
.gameOverPopupButtonsWon{
    background-color: #32CD32;
    color: #FFFFFF;
    border: 2px solid #006400;
    border-radius: 5px;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.gameOverPopupButtonsWon:hover{
    background-color: #228B22;
}
.gameOverPiImageWon{
    animation: grow-shrink 3s infinite;
}
@keyframes grow-shrink {
    0%, 100% {
        transform: scale(1); /* Original size */
    }
    50% {
        transform: scale(4); /* Scaled up by 50% */
    }
}
.videoDiv{
    visibility: hidden;
}
.videoDivVisible{
    top: 2%;
    position: absolute;
    visibility: visible;
}