body {

     background-color: #f0f0f0;
     font-family: Arial, sans-serif;
     overflow: scroll;
 }

 #game-container {
     width: 90vw;
     max-width: 800px;
     height: 80vh;
     max-height: 600px;
     background: linear-gradient(to top, #f6f6f7, #FFFFFF);
     position: relative;
     overflow: hidden;
     border: 5px solid #FFD700;
     border-radius: 8px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
     margin: 1rem auto;
 }

 .letter {
     position: absolute;
     font-size: 5vmin;
     font-weight: bold;
     cursor: pointer;
     user-select: none;
     transition: transform 0.1s;
 }

 .letter:hover {
     transform: scale(1.2);
 }

 .correct {
     animation: correctFeedback 0.3s ease;
 }

 .incorrect {
     animation: incorrectFeedback 0.3s ease;
 }

 @keyframes correctFeedback {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.5);
         color: green;
     }

     100% {
         transform: scale(1);
     }
 }

 @keyframes incorrectFeedback {
     0% {
         transform: translateX(0);
     }

     25% {
         transform: translateX(-5px);
     }

     50% {
         transform: translateX(5px);
     }

     75% {
         transform: translateX(-5px);
     }

     100% {
         transform: translateX(0);
     }
 }

 #dashboard {
     position: absolute;
     bottom: 2vmin;
     left: 2vmin;
     font-size: 2vmin;
     color: #333;
     background: rgba(255, 255, 255, 0.7);
     padding: 1vmin;
     border-radius: 10px;
     line-height: 1.5;
     min-width: 15%;
     color: #3f10a3;
     font-weight: 600;
     padding: 1rem;

 }

 #name-modal {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: white;
     padding: 2rem;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     display: none;
     text-align: center;
     width: 80%;
     max-width: 300px;
 }

 #name-modal input {
     padding: 0.5rem;
     font-size: 1rem;
     margin-bottom: 1rem;
     width: 80%;
     border: 1px solid #ccc;
     border-radius: 5px;
 }

 #start,
 #restart,
 #submit-name,
 #pause,
 #sound-toggle,
 #quit {
     padding: 1vmin 2vmin;
     font-size: 2.5vmin;
     background-color: #4CAF50;
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     margin: 0.5vmin;
 }

 #start:hover,
 #restart:hover,
 #submit-name:hover,
 #pause:hover,
 #sound-toggle:hover,
 #quit:hover {
     background-color: #45a049;
 }

 #restart {
     display: none;
     background-color: #f44336;
 }

 #restart:hover {
     background-color: #da190b;
 }

 #pause {
     display: none;
     background-color: #ff9800;
 }

 #pause:hover {
     background-color: #e68a00;
 }

 #sound-toggle {
     display: none;
     background-color: #2196F3;
 }

 #sound-toggle:hover {
     background-color: #1976D2;
 }

 #quit {
     display: none;
     background-color: #9c27b0;
 }

 #quit:hover {
     background-color: #7b1fa2;
 }

 #high-score-list {
     margin-top: 1vmin;
     padding-left: 2vmin;
 }

 @media (max-width: 800px) {
     #game-container {
         width: 95vw;
         height: 95vh;
     }

     .letter {
         font-size: 6vmin;
     }

     #dashboard {
         font-size: 2.8vmin;
         padding: 0.8vmin;
         min-width: 25%;
         padding: 1rem;
     }

     #start,
     #restart,
     #submit-name,
     #pause,
     #sound-toggle,
     #quit {
         font-size: 3vmin;
         padding: 1.5vmin 2.5vmin;
     }

     #name-modal {
         width: 90%;
         padding: 1rem;
     }

     #name-modal input {
         font-size: 0.9rem;
     }
 }

 #game-container h1 {
     text-align: center;
     font-size: 1.2rem;
     margin: 8px auto;
     padding: .5rem;
     background-color: #a2d5fe;
     color: #3f10a3;
 }


 .word {
     position: absolute;
     font-size: 3vmin;
     font-weight: bold;
     cursor: pointer;
     user-select: none;
     transition: transform 0.1s;
     white-space: nowrap;
 }

 .word:hover {
     transform: scale(1.2);
 }


 @media (max-width: 800px) {

     .word {
         font-size: 4vmin;
     }
 }