@import 'base.css';

main {
   background-image: url("/images/webp/background/BG-1366x768.webp");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   height: 100dvh;
}

.main-content {
   width: 90%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 0 auto;
   /* border: 1px solid black; */
}

#play-button, #leadership-board-button {
   width: 250px;
}

#menu-button-bottom {
   width: 150px;
}

.game-button-wrapper {
   margin-top: .8rem;
   display: flex;
   justify-content: center;
   gap: 12px;
}

#user-modal-registration {
   position: fixed;
   inset: 0; /* Centers the dialog */
   margin: auto; /* Ensures it's centered */
   padding: 1rem;
   border: none;
   border-radius: 8px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   background: white;
 }

 #user-modal-registration h2, 
 #user-modal-registration p 
 {
   text-align: center;
 }

 #user-modal-registration input {
   width: 100%;
   height: 64px;
   font-size: 1.5em;
   border-radius: 8px;
   margin-top: 4px;
 }

 #user-modal-registration 
 input::placeholder 
 {
   width: 100%;
   height: 64px;
 }

 #user-modal-registration 
 .button-save-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin-top: 8px;
   gap: 12px;
 }

 #user-modal-registration 
 button
 {
   font-size: 1.6em;
   font-weight: 900;
   width: 150px;
   height: 50px;
   border-radius: 4px;
   border: 1px solid gray;
   background-color: grey;
 }

@media (max-width: 1280px) {
   .img-title {
      width: 570px;
   }
   #play-button, #leadership-board-button {
      width: 150px;
   }
   
   #menu-button-bottom {
      width: 100px;
   }

}

@media screen and (max-width: 768px) {
   .img-title {
      width: 370px;
   }

   #play-button, #leadership-board-button {
      width: 125px;
   }
   
   #menu-button-bottom {
      width: 100px;
   }
}

@media screen and (max-width: 480px) {
   .img-title {
      width: 270px;
   }

   #play-button, #leadership-board-button {
      width: 100px;
   }
   
   #menu-button-bottom {
      width: 75px;
   }

}