html, body {
       height: 100%;
       overflow: hidden; /* Prevent scrolling */
       background-color: rgb(236, 255, 196);
}
   
html {
       display: table;
       margin: auto;
}
   
body {
       display: table-cell;
       vertical-align: middle;
}

h1,h2, #score_text{
       text-align: center;
       
}

h1{
       position: relative;
       padding: 0px;
       margin: 0;
       
}

#gameControls {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       flex-direction: column;
       align-items: center;
     }
     
.controlButton {
       width: 50px;
       height: 50px;
       margin: 5px;
       background-color: #e0e0e0;
       border: none;
       border-radius: 5px;
       font-size: 20px;
       font-weight: bold;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
}
     
#gameControls > div {
       display: flex;
       justify-content: center;
}
     

button{
       background-color: #4CAF50;
       border: 1px solid;
       color: white;
       padding: 10px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
}

button:hover{
       background-color: #409242;
}

#snake_board{
       border:6px solid;
       /* width: 100vh;
       height: 100vh; */
       background-image: url("../source/grass.jpg");
       background-color: aqua;
}

.dimmed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as desired */
  z-index: 999;
}

#startMenu , #leaderBoard{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #ffffff00;
}

#startMenu h2 {
       font-size: 30px;
       margin-bottom: 20px;
}

#startMenu label, #startMenu select {
       margin-bottom: 10px;
}

#gameControls {
       top: 85%;

}


#canvasPhoto{
       margin-top: -200%;
       border-radius: 50%;
       height: 400px;
       width: 300px;
}
video {
       height: 400px;
       width: 300px;
       border-radius: 50%; 
       overflow: hidden;
       object-fit: cover;
 }

 img{
       border-radius: 50%;
 }

 #leaderBoard{
       transform: translate(-50%, -50%);
       border-collapse: collapse; 
       font-family: Calibri, sans-serif; 
 }

 td {
       background-color: #e0e0e0;
       border: solid;
       height: 1em;
       width: 3.8em; 
   }

#lb-p {
       font-family: “Open Sans”, sans-serif;
       color: #f9f6f6;
       text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px         #F90, 0px -20px 40px #C33;
       font-size: 30px;
       margin: 0;
       padding: 4px;

}


/*******************8 font ***********/

@font-face {
       font-family: arcadeFont;
       src: url(../source/barcade-font/Barcade-R4LM.otf);
}

@font-face {
       font-family: arcadeFont2;
       src: url(../source/barcade-font/Barcade3D-YZBj.otf);
}

@font-face {
       font-family: arcadeFont3;
       src: url(../source/barcade-font/SuperLegendBoy-4w8Y.ttf);
}

h1{
       font-family: arcadeFont;
}

h2, #lb-p{
       font-family: arcadeFont2;
}

div, button, select{
       font-family: arcadeFont3; 
}





#alertBox{
       position:absolute;
       top:100px;
       left:100px;
       border:solid 1px black;
       background-color: #528CE0;
       padding: 50px;
       visibility: hidden;
   }
   #alertClose{
       position: absolute;
       right:0;
       top: 0;
       background-color: black;
       border: solid 1px white;
       color: white;
       width: 1em;
       text-align: center; 
       cursor: pointer;
   }