body {
  background-color:black;
  font-family:Arial;
  margin:0;
}

#loadScreen {
  position:fixed;
  width: 100%;
  height: 100%;
  background: black;
  z-index:100;
  transition: opacity 300ms ease;
}
#loadScreen.fadeout {
  opacity: 0;
}

#loadAnimation,
#loadPercent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#loadAnimation {
  width: 300px;
  height: 300px;
}
#loadAnimationCircle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  background: #dc0505;
}
#loadAnimationHoriz {
  position: absolute;
  top: 66%;
  height: 30px;
  left: 0;
  right: 0;
  background: #000;
  transform-origin: left center;
  animation: load-animation-horiz 2s ease infinite;
}
#loadAnimationVerti {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15%;
  width: 65px;
  background: #000;
  transform-origin: top center;
  animation: load-animation-verti 2s ease infinite;
}

@keyframes load-animation-horiz {
  0%, 10% {
    transform: scaleX(0);
  }
  60%, 70% {
    transform: scaleX(1);
  }
  85%, 100% {
    transform: scaleY(0);
  }
}

@keyframes load-animation-verti {
  0% {
    transform: scaleY(0);
  }
  50%, 70% {
    transform: scaleY(1);
  }
  80%, 100% {
    transform: scaleX(0);
  }
}

#loadText {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 200px;
  width: 300px;
  margin-left: -150px;
  color: white;
  font-size: 15px;
  text-align: center;
}

#loadPercent {
  color: #000;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  margin-left: 50px;
  margin-top: -50px;
}
#loadPercent em {
  font-size: 22px;
}

.gameCanvas {
  display:inline-block;
  position:absolute;
  padding:0;
  vertical-align: top;
}

#topButtonContainer {
  display:inline-block;
  width:100%;
  height:31px;
  position:relative;
  top:0px;
  z-index:10;
  background-color:rgb(82, 82, 82);
}

#hideButton {
  width:25px;
  background-color:rgb(50, 50, 50);
  background-image:url(assets/header-icons/collapseicon.png);
}

#fullscreenButton {
  width:35px;
  background-color:rgb(50, 50, 50);
  float:right;
  background-image:url(assets/header-icons/fullscreenicon.png);
}

#hideButton:hover,#fullscreenButton:hover {
  background-color:rgb(18, 18, 18);
}

#downloadButton {
  width: 24px;
  background-image:url(assets/header-icons/downloadicon.png);
}

#discordButton {
  width:33px;
  background-image:url(assets/header-icons/discordicon.png);
}

#githubButton {
  width : 25px;
  background-image:url(assets/header-icons/githubicon.png);
}

#keyboardButton {
  width: 36px;
  background-image:url(assets/header-icons/keyboardicon.png);
}

#keyboardPrompt {
  width: 260px;
  height:80px;
  position: absolute;
  top:40px;
  background-color: #454545;
  border-radius:5px;
  color:white;
  border:1px solid white;
  animation-name: floating;
  -webkit-animation-name: floating;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-duration: 4s;
  z-index:5;
}


@keyframes floating {
  0% {
    transform: translate(0%,0%);  
  }
  25% {
    transform: translate(0%,15%); 
  } 
  50% {
    transform: translate(0%,5%); 
  } 
  75% {
    transform: translate(0%,15%); 
  } 
  100% {
    transform: translate(0%,0%);
  }     
}
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translate(0%,0%);  
  }
  25% {
    -webkit-transform: translate(0%,15%); 
  } 
  50% {
    -webkit-transform: translate(0%,5%); 
  } 
  75% {
    -webkit-transform: translate(0%,15%); 
  } 
  100% {
    -webkit-transform: translate(0%,0%);
  }     
}

#kPSmallText {
  font-size:10px;
  top:-17px;
  vertical-align: top;
  position: relative;
}

#kPBigText {
  font-size: 25px;
}

#keyboardPrompt p {
  margin: 0;
  padding:10px;
  text-align: center;
}

#controllerButton {
  width: 33px;
  background-image:url(assets/header-icons/controllericon.png);
}

.topButton {
  height:25px;
  margin:3px 5px;
  display:inline-block;
  background-color:rgb(82, 82, 82);
  z-index:10;
  vertical-align: top;
  cursor:pointer;
  border-radius: 5px;
}

.topButton p {
  margin:0;
  color:white;
  text-align: center;
  padding:5px;
  font-size:15px;

}

.buttonDetails {
  height:20px;
  width:auto;
  position: absolute;
  top:35px;
  background-color: rgb(38, 38, 38);
  border-radius: 5px;
  color:white;
  display:none;
  z-index:6;
}

.buttonDetails p {
  font-size:15px;
  text-align: center;
  padding:2px;
}

#fullscreenButton .buttonDetails {
  right:0px;
}

.topButton:hover {
  background-color:rgb(48, 48, 48);
}

#keyboardControlsImg {
  display:none;
  z-index:10;
  top:25px;
  position:relative;
}

#controllerSupportContainer {
  top:25px;
  position:relative;
  width:510px;
  height:490px;
  display:none;
  z-index:10;
  background-color: black;
  border-radius:10px;
}

#controllerMessage {
  width:240px;
  height:82px;
  border: 2px solid rgb(255, 85, 85);
  margin: 3px 0px 3px 125px;
  border-radius:5px;
}

#controllerMessage p {
  font-size:15px;
  text-align: center;
  color:rgb(249, 131, 131);
}

.controllerBox {
  width:240px;
  height:118px;
  border: 2px solid rgb(134, 134, 134);
  margin: 3px;
  border-radius:5px;
  display:inline-block;
}
.controllerName {
  width:240px;
  height:30px;
}

.controllerName p {
  font-size:20px;
  text-align: center;
}
.controllerDriver {
  width:240px;
  height:20px;
}

.controllerDriver p {
  font-size:15px;
  text-align: center;
  margin:0;
  padding:0;
}
.controllerBrowser {
  width:240px;
  height:32px;
}

.browserBox {
  width:56px;
  height:32px;
  display:inline-block;
  vertical-align: top;
  border:1px solid rgb(108, 108, 108);
  margin:0px 1px;
}

.browserImg {
  width:32px;
  height:32px;
  display: inline-block;
  vertical-align: top;

}

.browserImgFile {
  display:inline-block;
  vertical-align: top;
}

.browserSupport, .osSupport {
  width:18px;
  height:32px;
  display:inline-block;
  vertical-align: top;
}

.browserSupport p, .osSupport p {
  text-align:center;
  font-size:19px;
  margin:0;
  padding:3px 0px;
  display:inline-block;
  vertical-align: top;
}

.controllerOS {
  width:240px;
  height:32px;
}

.osBox {
  height:32px;
  display:inline-block;
  vertical-align: top;
  border:1px solid rgb(108, 108, 108);
  margin:0px 1px;
}

.osBoxWide {
  width:90px;
}

.osBoxShort {
  width:69px;
}

.osName {
  height:32px;
  display:inline-block;
  vertical-align: top;
}

.osNameWide {
  width:62px;
}

.osNameShort {
  width:41px;
}

.osName p {
  text-align:center;
  font-size:15px;
  margin:0;
  padding:7px;
}

.tick {
  color:#28ed48;
}

.unknown {
  color:rgb(175, 175, 175);
  padding:6px 3px;
}

.cross {
  color:#ff4e4e;
}

.native {
  color:#28ed48;
}
a {
  color:#edbc28;
}
.driver {
  color:#edbc28;
  text-decoration: underline;
}

#display {
  width:1200px;
  height:750px;
  background-color: black;
  position:relative;
  padding:0;
  vertical-align: top;
  z-index:9;
  transform-origin: top left;
}

#tagTextContainer {
  width:1040px;
  height:50px;
  margin-left:160px;
  position:absolute;
  top:620px;
}

.pTagEdit {
  width:169px;
  height:30px;
  background-color:#262626;
  color:white;
  text-align:Center;
  font-size:25px;
  margin:0px 46px 0px 0px;
  padding:5px;
  border:0;
  resize:none;
  display:none;
}

#customStageContainer {
  width:800px;
  height:450px;
  margin-left:200px;
  position:absolute;
  top:100px;
  z-index:9;
  display:none;
  background-color:rgb(29, 29, 29);
  font-weight: 900;
}
#cStage1 {
  width:550px;
  height:450px;
  display:inline-block;
  vertical-align: top;
}
#cStage2 {
  width:250px;
  height:450px;
  display:inline-block;
  vertical-align: top;
}

#cStageTitle{
  z-index:9;
  width:500px;
  height:40px;
  color:white;
  font-size:30px;
  margin-left:25px;
}

#cStageInfo {
  width:225px;
  height:320px;
  z-index:9;
  color:white;
  font-size:20px;
  margin-left:10px;
  margin-right:25px;
}

#cStagePrompt {
  width:250px;
  z-index:9;
  height:40px;
  color:white;
  font-size:30px;
  margin-left:10px;
}

#cStagePrompt p {
  margin:0;
  padding:10px;
}

#cStagePrompt p {
  display:inline-block;
  vertical-align: top;
}

#aButton {
  background-color:rgb(50, 177, 47);
  width:50px;
  height:50px;
  border-radius:25px;
  color:rgb(26, 50, 27);
  display:inline-block;
  vertical-align: top;
}

#aButton p {
  margin:0;
  padding:4px 13px;
}

#cStageEdit {
  width:500px;
  height:300px;
  background-color:#262626;
  color:white;
  text-align:Center;
  font-size:25px;
  margin:25px 0px 0px 25px;
  padding:5px;
  border:0;
  resize:none;
}

#pTagEdit1 {
  margin-left:225px;
}

#pTagEdit2 {
  margin-left:450px;
}

#pTagEdit3 {
  margin-left:675px;
}

#buttons {
  position:absolute;
  width:650px;
  height:50px;
  background-color:none;
  left:307px;
  top:700px;
}

.gameButton {
  width:100px;
  height:30px;
  display:inline-block;
  background-color:rgba(0, 0, 0, 0.3);
  border-radius:10px;
  margin:0px 5px;
}

.gameButton p {
  color:white;
  padding: 6px;
  margin:0;
  text-align: center;
  cursor:pointer;
  font-size:13px;
  font-weight:bolder;
}

#layerDropdown {
  display:none;
  width:100px;
  height:100px;
  background-color:rgba(0, 0, 0, 0.3);
  position:absolute;
  top:-100px;
}

.layer {
  width:100px;
  height:20px;
  background-color:rgba(0, 0, 0, 0.3);
}

.layerOn {
  background-color:rgba(255, 255, 255, 0.3);
}

#debug {
  position:absolute;
  width:400px;
  height:100px;
  right: 20px;
  top : 20px;
  font-size:10px;
  color:white;
  display:none;
}

.resetIndicator {
  width:120px;
  height:30px;
  position:absolute;
  display:none;
}

.resetIndicator p {
  text-align: center;
  color:#fffd59;
  text-shadow:
      3px 4px 0 #000,
    -1px -2px 0 #000,
     1px -2px 0 #000,
     -1px 2px 0 #000,
      1px 2px 0 #000;
  font-size:18px;
  font-weight:bold;
  margin:0;
}

#players {
  display:none;
}

.playerDetails {
  width:300px;
  height:150px;
  display:inline-block;
  background-color: #363636;
  color:white;
}

.playerTitle {
  height:20px;
  width:150px;
  text-align: center;
  font-size: 14px;
  background-color:#1f1f1f;
  border-radius:5px;
  margin:2px 75px;
}

.playerTitle p {
  margin:0;
  padding:2px;
}

.inputs, .actionstatetext, .velocities {
  height:15px;
  text-align: center;
  font-size: 11px;
}

.inputs, .velocities {
  display:inline-block;
  width:100px;
  text-align: left;
  margin:1px 0px;
}

.inputs p, .actionstatetext p, .velocities p{
  margin:0;
  padding:2px 10px;
}

.buttons {
  margin-left:17px;
}

.b {
  display:inline-block;
  width:20px;
  height:20px;
  border:1px solid white;
}

.b div {
  position:absolute;
  display:inline-block;
  width:20px;
  height:20px;
  background-color:rgba(255, 0, 0, 0.53);
  z-index:0;
  vertical-align: top;
}

.b p {
  margin:0;
  text-align: center;
  padding:3px;
  font-size:12px;
  z-index:5;
  vertical-align: top;
}