h1, p {
  font-family: 'Press Start 2P', monospace;
}

ul {
  width:100%;
  list-style-type:none;
  margin-left: 0px; 
  padding-left: 0px;
}

li { 
 
  padding: 4px;
  padding-left:0px; 
  font-size: .5rem;
  width: 100%; 
}
li span {

  width: 100%;

}

#listWrapper {
  display: flexbox; 
  margin: auto; max-width: 600px;
}

a {
  text-decoration: none;
}

.leaderBoardTitle { 
  font-size: .9rem;
  text-align: center;
  width: 100%; 
  margin: auto 0; 
}

#pressStartLeaderboard{
  font-family: 'Press Start 2P', monospace;
  margin: 0px; 
  padding: 0px; 
  width: 50%;
  border-right: solid;
}

#pressStartAllTime{
  font-family: 'Press Start 2P', monospace;
  margin-left: 0px; 
  padding: 0px; 
  width: 50%;
  float: right;
}

#currentScore {
  font-family: 'Press Start 2P', monospace;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#gorillaHead {
  height: 100px;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  margin-top: 20px;
  display: block;
}



#nameFormLabel, .add {
  font-family: 'Press Start 2P', monospace;
  text-align: center;
  margin:auto; 
  align-items: center;
}

.scoreItem { padding: 4px 5px 4px 10px; margin: 0; width: 100%;


}

.score { 
  display:unset; 
  padding: 0px 4px 0px 4px; 
  margin: 0px; 

  float: right; 
}


.highlight { 
  color: white; 
  background-color: #535353;

}
#submitScoreButton {
  padding: 1rem 0px 1rem 0px; 
  text-align: center;
  background-color: transparent; 
  font-family: 'Press Start 2P', monospace;
  margin:0 auto; 
  position: relative;  
  display : block;
  align-items: center;
  float:none; 
  width: 125px; 
}

#submitButtonImage {
width: 125px; 
}

#navbar{


  text-align: center;

  min-height: 1rem;
  border-bottom: solid;
  border-color: #f2f2f2;
  background-color: #535353;
  margin-bottom: 30px;
  padding: 0;
  margin-top: 0; 
  margin-bottom: 0;
  overflow: hidden;
  position: sticky;
  margin-left: auto; 
  margin-right:auto;
  width:100%; 

}


.navbarItem { 
  padding-right: 5px; 
  padding-left: 5px; 
  text-align: center;
}

#aboutBox { 
  position:relative; 

  float: left; 

}
#leaderBoardBox { 
  float: right; 
}

#logoBox { 

  margin: auto 0; 
  padding: 0; 
}






#headerAssets{
  align-items: center;
  justify-content: center;
}

#gggLogo {
  align-content: center;


}

#about-page {
  height: 100%; 
  background-color: #535353;
  color:#f2f2f2; 

} 

#x-image {
  padding-left: 85vw; 
  padding-top: 5vw; 
  height: 1rem;
  width: 1rem;
}

#x {



}

#leaderX {



}


#aboutDescription {
 
  color: #f2f2f2; 
  background-color: #535353;
  text-align: center;
  width:100%;
  margin-bottom: 15%;
  line-height: 1rem;
  float:none; 
}

#aboutLink {

  color: #f2f2f2; 
  background-color: #535353;
  text-align: center;
  width:100%;

  line-height: 1rem;
  float:none; 
}

#leaderBoard { 
  float:right; 
}

.headerImage {
  height: 30px;
  width: auto;
  margin-top: 5px;
  margin-bottom: 5px; 
}

.leaderImage {
  width: 100%;
  height: 40vh;
  margin: auto;
}

.invisible {
	display: none !important;
}

.userScore {
  background-color: rgb(89, 89, 89);
  color: white;
}

.leaderboard-bottom {
  margin-top: 20px;
  margin-bottom: 20px;
  width:100%; 
}

#leaderboard-image-wrapper { 
  padding: 0;
  margin: auto 0;
  margin-bottom: 3vw;
  background-image: url("/images/leaderboard-placeholder-lights.png");
  background-position: center; 
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 300%;
  height: 25vw;  
  width: 100%;
}

.textLeaderboard{
 
  padding-top: 5vw; 
  text-align: center;
  padding-bottom: 0px; 
}

.small-text { 
  
  margin:auto 0; 
  padding-top:20px; 
  text-align: center; 
  font-size: 8px;  
}

@media (min-width: 992px) { 
  li span {
    margin: 0;
    padding: 0;
    font-size: .6rem;
  }

  #aboutDescription {
 
  }

  #buttonWrapper { 
    text-align: center;
    margin: auto 0; 
    width:100%; 
  }


  #currentScore {
    display: block;
  }

  #listWrapper {
    display: flexbox; 
    margin: auto; max-width: 600px;
  }

  #pressStartLeaderboard{
    padding-top: 20px; 
    font-size: 1rem;
  }
  
  #pressStartAllTime{
    padding-top: 20px; 
    font-size: 1rem;
  }

  #submitForm { 
    text-align: center;
  }
  
  #submitScoreButton {  
    font-family: 'Press Start 2P', monospace;
    color: black; 
    background-color: transparent; 
    margin:0 auto; position: relative;  display : block; float:none; 
  }

  #tryAgainButton {  
    padding: 10px;
    margin:0 auto; 
    position: relative;  
    display : block;
    align-items: center;
    width:200px; 
    max-width: 80%;
    float:none; 
  }

  .leaderboard-bottom {
    width:100%; 
  }

  .textLeaderboard{
    font-size: 1.2rem; 
    margin-top: 35px; 
    text-align: center;
  }

  #leaderboard-image-wrapper { 
    padding: 0;
    margin: auto 0;
    margin-bottom: 3vw;
    background-image: url("/images/leaderboard-placeholder-lights.png");
    background-position: center; 
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 150%;
    height: 15vw;  
    width: 100%;
  }

 }

 @media (prefers-color-scheme: light) { 
  #leaderX { 
    filter: invert(90%);
  }
 }