* {
       margin: 0;
       padding: 0;
       font-family: 'Poppins', sans-serif;
   }

   /* Fixed Controls Container */
   #controlsContainer {
       position: fixed;
       top: 10px;
       right: 20px;
       display: flex;
       flex-direction: column;
       gap: 10px;
       z-index: 100;
   }

   .controlButton {
       background: none;
       border: none;
       cursor: pointer;
       padding: 5px;
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 5px;
       transition: background-color 0.2s ease;
   }

   .controlButton img {
       width: 100%;
       height: auto;
   }

   .controlButton:hover {
       background-color: rgba(255, 255, 255, 0.1);
   }

   /* Welcome Screen Styles */
   #welcomeScreen {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 80vh;
   }

   .dot {
       color: #FD9D00;
   }

   #gameTitle {
       font-size: 6em;
       font-weight: 700;
   }

   #gameInstructions {
       font-size: 1em;
       margin-top: 20px;
   }

   #utilsContianer {
       margin-top: 20px;
       font-weight: 500;
       font-size: 1.2em;
   }

   .utilElement {
       background-color: #1E3229;
       border-radius: 10px;
       color: white;
       padding: 10px 50px;
       margin: 0 10px;
   }

   #playerSelection {
       display: flex;
       justify-content: center;
       gap: 10px;
       margin-top: 20px;
   }

   .playerSelectButton {
       padding: 10px 50px;
       font-size: 18px;
       cursor: pointer;
       border: none;
       background-color: rgba(0, 0, 0, 0.76);

       color: white;
       border-radius: 5px;
       transition: 0.3s;
   }

   .playerSelectButton:hover {
       background-color: rgba(0, 0, 0, 1);
   }

   /* Game Speed Selection Styles */
   #gameSpeedSelection {
       margin-top: 40px;
       text-align: center;
       font-size: 16px;
   }

   #gameSpeedSelection label {
       margin-right: 10px;
       font-weight: bold;
   }

   #gameSpeedSelection input {
       width: 50px;
       padding: 5px;
       font-size: 16px;
       text-align: center;
       border: 2px solid #1e322974;
       border-radius: 5px;
       outline: none;
   }

   #gameSpeedSelection span {
       display: block;
       margin-top: 5px;
       font-size: 14px;
       color: #666;
   }

   /* Game Screen Styles */
   canvas {
       display: block;
       margin: 0 auto;
       background-color: #f0f0f0;
       border-radius: 0 0 5px 5px;
       border: 2px solid #e0e0e0;
       box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
   }

   body {
       text-align: center;
       background-color: #C2CCC7;
   }

   h1 {
       margin-top: 20px;
       font-size: 1em;
   }

   /* Score Board Styles */
   #scoreBoard {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       width: 800px;
       margin: 0 auto;
       justify-content: center;
       margin-top: 20px;
       background-color: #332B27;
       color: white;
       padding: 10px 0;
       box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
       border-radius: 5px 5px 0 0;
       border-right: 2px solid transparent;
       border-left: 2px solid transparent;
       border-top: 2px solid transparent;
   }

   #scoreBoard div:not(:last-of-type) {
       border-right: 1px solid #e0e0e0;
   }

   .playerScore {
       border-radius: 10px;
       padding: 10px;
       font-size: 1.5em;
   }

   /* Footer Styles */
   #footer {
       background-color: #222;
       color: #fff;
       text-align: center;
       padding: 10px 0;
       position: fixed;
       bottom: 0;
       width: 100%;
       font-size: 14px;
   }

   .footer-content {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
   }

   .footer-content .icon {
       width: 14px;
       height: 14px;
   }

   @media only screen and (max-width: 980px) {

       /* Hide game for small screen devices */
       #welcomeScreen,
       #controlsContainer,
       #footer {
           display: none;
       }
   }