* {
  padding: 0;
  margin: 0;
  border: 0;
}

@font-face {
  font-family: Megrim;
  src: url("../fonts/Megrim.ttf");
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.ttf");
}

html, body {
  height: 100%;
}

html {
  background: url("../images/px_by_Gre3g.png");
  font-family: "Open Sans", arial, sans-serif;
  color: white;
}

button {
  outline: none;
  font-family: "Open Sans", arial, sans-serif;
  cursor: pointer;
}

input {
  font-family: "Open Sans", arial, sans-serif;
}

h1 {
  font-family: Megrim, verdana, arial, sans-serif;
  color: white;
  font-size: 100px;
  cursor: default;
}

#container-game {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}

.container {
  max-width: 1000px;
  min-width: 600px;
  margin: 0 auto -50px auto;
  min-height: 100%;
}

.container:after {
  content: "";
  display: block;
}

.footer, .container:after {
  height: 50px;
}

.small-text {
  color: #ffb502;
  font-size: 23px;
  text-shadow: 0 1px 0 #000000;
  font-family: Megrim, verdana, arial, sans-serif;
}

.note {
  color: #1f87e8;
}

/* Header */

.header {
  padding: 20px 0;
}

.header .sub-text {
  margin-left: 6px;
}

/* Content */

.content .host-or-join {
  font-size: 30px;
  text-align: center;
  margin: 0 0 20px 0;
}

.content .host-or-join-move {
  position: fixed;
  top: 0;
  right: 0;
  width: 32%;
}

.host-or-join button {
  width: 40%;
  height: 50px;
  text-transform: uppercase;
  font-size: 30px;
  margin-top: 20px;
  color: white;
  background-color: rgb(162, 144, 92);
  transition: border-radius 0.5s ease, box-shadow 0.5s ease;;
  border-radius: 5px;
}

.host-or-join button:hover {
  border-radius: 15px;
  -webkit-box-shadow: 0 0 30px 0 #000000;
  box-shadow: 0 0 30px 0 #000000;
}

.host-options, .join-options {
  display: none;
  margin-top: 30px;
  position: relative;
  z-index: 100;
}

/* Footer */

.footer {
  text-align: center;
}

.footer div {
  padding-top: 12px;
}

/* Sidebar and game splitup fuckup */

.side-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 70%;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}

.game-content {
  position: absolute;
  top: 0;
  left: 30%;
  bottom: 0;
  right: 0;
}

.side-bar h1 {
  font-size: 60px;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.controls img {
  width: 90%;
  margin: 20px 5%;
}

.game-content .emulator-container {
  width: 100%;
  height: 100%;
  background-color: black;
  -webkit-box-shadow: 0 0 20px 0 #ABA495;
  box-shadow: 0 0 20px 0 #ABA495;
  position: relative;
  display: none;
}

#emulator, #emulator-slave {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.emulator-container canvas {
  height: 100%;
  margin: 0 auto;
}

.nes-roms select {
  padding: 10px;
  font-size: 18px;
  margin: 10px;
  color: white;
  background-color: rgb(162, 144, 92);
  border-radius: 5px;
  cursor: pointer;
}

.nes-controls input[type=button] {
  padding: 10px;
  font-size: 18px;
  margin: 10px;
  color: white;
  background-color: rgb(162, 144, 92);
  transition: border-radius 0.5s ease, box-shadow 0.5s ease;;
  border-radius: 5px;
  cursor: pointer;
}

.join-options input[type=text] {
  padding: 10px;
  color: white;
  background-color: rgb(162, 144, 92);
  border-radius: 5px;
  font-size: 18px;
}

.join-options button {
  padding: 10px;
  font-size: 18px;
  margin: 10px;
  color: white;
  background-color: rgb(162, 144, 92);
  transition: border-radius 0.5s ease, box-shadow 0.5s ease;;
  border-radius: 5px;
  cursor: pointer;
}

/* Hide useless stuff */
.nes-controls input:nth-child(3) {
  display: none;
}

.nes-controls input:nth-child(4) {
  display: none;
}

.nes-status {
  display: none;
}

/* Glitchy stuff */
.glitch {
  position: relative;
  display: inline-block;
}

@keyframes noise-anim {
  0% {
    clip: rect(63px, 9999px, 13px, 0);
  }
  5% {
    clip: rect(77px, 9999px, 82px, 0);
  }
  10% {
    clip: rect(87px, 9999px, 50px, 0);
  }
  15% {
    clip: rect(5px, 9999px, 78px, 0);
  }
  20% {
    clip: rect(98px, 9999px, 23px, 0);
  }
  25% {
    clip: rect(87px, 9999px, 91px, 0);
  }
  30% {
    clip: rect(44px, 9999px, 37px, 0);
  }
  35% {
    clip: rect(33px, 9999px, 73px, 0);
  }
  40% {
    clip: rect(88px, 9999px, 23px, 0);
  }
  45% {
    clip: rect(95px, 9999px, 62px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 78px, 0);
  }
  55% {
    clip: rect(47px, 9999px, 42px, 0);
  }
  60% {
    clip: rect(44px, 9999px, 32px, 0);
  }
  65% {
    clip: rect(42px, 9999px, 25px, 0);
  }
  70% {
    clip: rect(4px, 9999px, 47px, 0);
  }
  75% {
    clip: rect(96px, 9999px, 7px, 0);
  }
  80% {
    clip: rect(48px, 9999px, 34px, 0);
  }
  85% {
    clip: rect(35px, 9999px, 81px, 0);
  }
  90% {
    clip: rect(14px, 9999px, 53px, 0);
  }
  95% {
    clip: rect(24px, 9999px, 93px, 0);
  }
  100% {
    clip: rect(48px, 9999px, 69px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: url("../images/px_by_Gre3g.png");
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 20s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(49px, 9999px, 71px, 0);
  }
  5% {
    clip: rect(90px, 9999px, 93px, 0);
  }
  10% {
    clip: rect(20px, 9999px, 43px, 0);
  }
  15% {
    clip: rect(3px, 9999px, 50px, 0);
  }
  20% {
    clip: rect(62px, 9999px, 35px, 0);
  }
  25% {
    clip: rect(1px, 9999px, 67px, 0);
  }
  30% {
    clip: rect(38px, 9999px, 56px, 0);
  }
  35% {
    clip: rect(24px, 9999px, 29px, 0);
  }
  40% {
    clip: rect(52px, 9999px, 68px, 0);
  }
  45% {
    clip: rect(85px, 9999px, 7px, 0);
  }
  50% {
    clip: rect(84px, 9999px, 28px, 0);
  }
  55% {
    clip: rect(82px, 9999px, 15px, 0);
  }
  60% {
    clip: rect(57px, 9999px, 96px, 0);
  }
  65% {
    clip: rect(58px, 9999px, 47px, 0);
  }
  70% {
    clip: rect(59px, 9999px, 25px, 0);
  }
  75% {
    clip: rect(71px, 9999px, 21px, 0);
  }
  80% {
    clip: rect(70px, 9999px, 53px, 0);
  }
  85% {
    clip: rect(52px, 9999px, 82px, 0);
  }
  90% {
    clip: rect(38px, 9999px, 78px, 0);
  }
  95% {
    clip: rect(65px, 9999px, 68px, 0);
  }
  100% {
    clip: rect(44px, 9999px, 67px, 0);
  }
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: url("../images/px_by_Gre3g.png");
  overflow: hidden;
  clip: rect(0,900px,0,0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

::-webkit-input-placeholder {
  color: #E4E4E4;
}

:-moz-placeholder { /* Firefox 18- */
  color: #E4E4E4;
}

::-moz-placeholder {  /* Firefox 19+ */
  color: #E4E4E4;
}

:-ms-input-placeholder {
  color: #E4E4E4;
}