:root {
   --gray: #888888;
   --light-gray: #CCCCCC;
   --dark-gray: #444444;
   --gray-bg: rgba(32, 32, 32, 0.9);
   --light-gray-bg: rgba(255, 255, 255, 0.1);
   --font-game: "Press Start 2P", monospace;
   --mouse-cursor: default;
}

@keyframes alert-blink {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes alert-fading {
   from {opacity: 1;}
   to {opacity: 0;}
}

@keyframes score-blink {
   from {color: white;}
   to {color: var(--gray);}
}

@keyframes box-show {
   from {opacity: 0;}
   to {opacity: 1;}
}

body {
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   overscroll-behavior: contain;
}

a, a:link, a:visited {
   color: var(--gray);
   text-decoration-line: underline;
   text-decoration-style: dotted;
   text-decoration-thickness: 3px; 
   cursor: pointer;
}
 
a:hover, a:active {
   color: var(--light-gray);
}

#spacetime {
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: black;
   top: 0px;
   left: 0px;
}

.top-10 {
   padding-top: 10px;
}

.top-20 {
   padding-top: 20px;
}

.top-30 {
   padding-top: 30px;
}

.top-40 {
   padding-top: 40px;
}

.left-10 {
   padding-left: 10px;
}

.left-20 {
   padding-left: 20px;
}

.left-30 {
   padding-left: 30px;
}

.left-40 {
   padding-left: 40px;
}

.font-50 {
   font-size: 50%;
}

.font-75 {
   font-size: 75%;
}

.font-100 {
   font-size: 100%;
}

.font-125 {
   font-size: 125%;
}

.font-150 {
   font-size: 150%;
}

.slider {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 100%;
   height: 40px;
   background: var(--gray);
   outline: none;
   cursor: pointer;
}
 
.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   width: 40px;
   height: 40px;
   background: var(--light-gray);
   cursor: pointer;
}
 
.slider::-moz-range-thumb {
   width: 40px;
   height: 40px;
   background: var(--light-gray);
   cursor: pointer;
}

.radio {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   display: inline-block;
   width: 25px;
   height: 25px;
   padding: 6px;
   background-clip: content-box;
   border: 2px solid var(--gray);
   cursor: pointer;
 }
 
.radio:checked {
   background-color: var(--light-gray);
 }

.radio-label {
   cursor: pointer;
}

.profile-label {
   display: inline-block;
   min-width: 180px;
}

input[type=text], input[type=password], input[type=email] {
   font-family: var(--font-game);
   font-size: 100%;
   color: var(--dark-gray);
   text-transform: uppercase;
   caret-color: var(--gray);
   background-color: var(--light-gray);
   padding: 16px;
   border: none;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
   outline: none;
   background-color: white;
}

::selection {
   color: white;
   background: var(--dark-gray);
}

::-moz-selection {
   color: white;
   background: var(--dark-gray);
}

button {
   font-family: var(--font-game);
   font-size: 100%;
   color: var(--light-gray);
   background-color: var(--dark-gray);
   padding: 16px;
   border: none;
   cursor: pointer;
}

button:hover, button:focus {
   color: white;
   background-color: var(--gray);
   outline: none;
}

button:disabled {
   color: var(--gray);
   background-color: var(--dark-gray);
   cursor: wait;
}

::-webkit-scrollbar {
   width: 40px;
}
 
::-webkit-scrollbar-track {
   background: var(--light-gray-bg);
}
  
::-webkit-scrollbar-thumb {
   background: var(--light-gray);
}
 
::-webkit-scrollbar-thumb:hover {
   background: var(--gray);
}

.box-container {
   position: absolute;
   width: 60vw;
   margin-top: 10vh;
   margin-left: 20vw;
   font-family: var(--font-game);
   color: var(--gray);
   font-size: 100%;
   line-height: 1.2;
   background-color: var(--gray-bg);
   animation-name: box-show;
   animation-duration: 0.3s;
}

.box-content {
   padding: 20px 40px;
}

.box-title {
   font-size: 200%;
   color: var(--light-gray);
   padding-bottom: 10px;
}

.box-title-small {
   font-size: 125%;
   color: var(--light-gray);
   padding-top: 10px;
}

.box-light-gray {
   color: var(--light-gray);
}

.box-dark-gray {
   color: var(--dark-gray);
}

.box-chat-container {
   margin-top: 0;
   top: 0;
   height: 100%;
}

.box-chat-content {
   box-sizing: border-box;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.box-chat-messages {
   flex-grow: 1;
   text-transform: uppercase;
   word-wrap: break-word;
   overflow-x: hidden;
   overflow-y: auto;
}

.box-chat-form {
   padding: 20px 0;
}

.box-chat-input {
   width: 70%;
}

.chat-container {
   position: absolute;
   left: 10px;
   width: 30vw;
   min-width: 300px;
   bottom: 0;
   max-height: 50vh;
   font-family: var(--font-game);
   color: var(--dark-gray);
   font-size: 75%;
   text-transform: uppercase;
   opacity: .5;
   transition: opacity .5s;
   word-wrap: break-word;
   overflow-x: hidden;
   overflow-y: hidden;
   z-index: -1;
}

.chat-container-hidden {
   opacity: 0;
}

.menu-container {
   position: absolute;
   top: 0px;
   right: 0px;
   font-family: var(--font-game);
   color: var(--gray);
   font-size: 100%;
}

.menu-start {
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
}
 
.menu-bar1, .menu-bar2, .menu-bar3 {
   width: 35px;
   height: 5px;
   background-color: var(--gray);
   margin: 6px 0;
   transition: 0.3s;
}

.menu-x .menu-bar1 {
   transform: translate(0, 11px) rotate(-45deg);
}
 
.menu-x .menu-bar2 {
   opacity: 0;
}
 
.menu-x .menu-bar3 {
   transform: translate(0, -11px) rotate(45deg);
}

.menu-content {
   display: none;
   padding: 50px 10px 10px;
   background-color: var(--gray-bg);
}

.menu-content-show {
   display: block;
   animation-name: box-show;
   animation-duration: 0.3s;
}

.menu-item {
   padding: 10px 10px;
   cursor: pointer;
   white-space: nowrap;
}

.menu-item:hover {
   background-color: var(--light-gray-bg);
   color: var(--light-gray);
}

.menu-item-disabled {
   display: none;
}

.alert, .alert-hidden {
   position: absolute;
   top: 40%;
   width: 100%;
   color: var(--gray);
   text-align: center;
   font-family: var(--font-game);
   font-size: 200%;
   cursor: var(--mouse-cursor);
}

.alert {
   animation-name: alert-blink;
   animation-delay: 0.5s;
   animation-duration: 1s;
   animation-iteration-count: infinite;
}

.alert-hidden {
   opacity: 0;
   cursor: var(--mouse-cursor);
   animation-name: alert-fading;
   animation-duration: 0.3s;
}

.leaderboard, .leaderboard-hidden {
   position: absolute;
   top: 50%;
   width: 100%;
   color: var(--gray);
   text-align: center;
   font-family: var(--font-game);
   font-size: 150%;
   cursor: var(--mouse-cursor);
}

.leaderboard {
   animation-name: box-show;
   animation-duration: 0.3s;
}

.leaderboard-hidden {
   opacity: 0;
   cursor: var(--mouse-cursor);
   animation-name: alert-fading;
   animation-duration: 0.3s;
}

.leaderboard-table {
   width: 100%;
}

.leader-score {
   width: 50%;
   padding: 10px 20px 0px 0px;
   text-align: right;
}

.leader-name {
   padding: 10px 0px 0px 20px;
   text-align: left;
}

.score-and-lives {
   top: 10px;
   left: 10px;
   min-width: 10%;
   color: var(--gray);
   text-align: right;
   font-family: var(--font-game);
   font-size: 175%;
   position: absolute;
   cursor: var(--mouse-cursor);
}

.score-blink {
   animation-name: score-blink;
   animation-duration: 0.5s;
}

.high-score {
   top: 10px;
   width: 100%;
   color: var(--gray);
   text-align: center;
   font-family: var(--font-game);
   font-size: 125%;
   position: absolute;
   cursor: var(--mouse-cursor);
}

@media screen and (max-height: 850px) {

   .box-container {
      margin-top: 5vh;
   }

   .box-chat-container {
      margin-top: 0;
   }


}

@media screen and (max-height: 800px) {

   .box-container {
      margin-top: 0px;
   }
   
   .leaderboard, .leaderboard-hidden {
      font-size: 125%;
   }

}

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

   .box-container {
      width: 80vw;
      margin-left: 10vw;
   }

}

@media screen and (max-width: 900px), (max-height: 750px) {

   .box-container {
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-y: auto;
   }
      
   .alert, .alert-hidden {
      font-size: 150%;
   }

   .leaderboard, .leaderboard-hidden {
      font-size: 100%;
   }
  
   .score-and-lives {
      font-size: 125%;
   }
   
   .high-score {
      font-size: 100%;
   }
      
}

@media screen and (max-height: 650px) {

   .leaderboard, .leaderboard-hidden {
      font-size: 75%;
   }

   .leader-score {
      padding: 5px 20px 0px 0px;
   }
   
   .leader-name {
      width: 50%;
      padding: 5px 0px 0px 20px;
      text-align: left;
   }
      
}

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

   .chat-container {
      display: none;
   }

   ::-webkit-scrollbar {
      display: none;
   }

   .profile-label {
      display: block;
   }   

   input[type=text], input[type=password], input[type=email] {
      padding: 16px;
   }   

   .box-container {
      font-size: 75%;
   }
   
   .box-content {
      padding: 10px 20px;
   }
               
   .box-title {
      font-size: 150%;
   }
   
   .box-title-small {
      font-size: 100%;
   }   
               
   .alert, .alert-hidden {
      font-size: 100%;
   }

   .leaderboard, .leaderboard-hidden {
      font-size: 75%;
   }

   .leader-score {
      width: auto;
   }

   .score-and-lives {
      font-size: 100%;
   }
   
   .high-score {
      font-size: 75%;
   }
   
}

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

   .alert, .alert-hidden {
      font-size: 75%;
   }

   .score-and-lives {
      font-size: 75%;
   }
   
   .high-score {
      font-size: 50%;
   }
   
}