* {
  font-family: 'Courier Prime', Courier, monospace;
  color: white;
  
  border-radius: 8px;
}

@font-face {
  font-family: 'pixelify';
  src: url('pixelify.woff2') format('woff2'),
       url('pixelify.woff') format('woff'),
       url('pixelfy.ttf') format('truetype');
}

button {
  font-family: 'pixelify' !important;
}
#nesinfo {
  display: flex !important; 
  justify-content: space-around;
}
body {
  background-color: gray;
}
#gamediv, #gamediv2 {
  display: none;
}  
#gamediv:fullscreen {
  background-color: white;
}
#gamebutton, #gamebutton2 {
  background-color: lightskyblue;
  font-size: 200%;
}
#gamebutton:hover, #gamebutton2:hover {
  border: 3px solid grey;
}

strong {
  color: black;
}

button, input {
  background-color: black;
  display: block;
  font-size: 15pt;
  width: 100%;
  
  border: 3px solid transparent;
  
  text-align: left;
}

button:hover {
  border: 3px solid lightskyblue;
}

#custom div {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  
  margin-bottom: 10px;
}

#custom div button{
  text-align: center;
  width: 32%;
  height: 100%;
  overflow: auto;
}

body {
  margin: 0px;
  padding: 5px;
  background-color: gray;
}

.tip {
  background-color: white; 
  color: black; 
  font-size: 13.5pt;
}

.tip strong {
  color: black;
}

p {
    padding: 5px;
    background-color: black;
    font-size: 15pt;
}

h1 {
  font-size: 30px;
  background-color: black;
  padding: 5px;
}
.quotediv {
  background-color: black;
  height: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.quote {
  font-size: 35px;
  font-style: italic;
  color: lightskyblue;

  white-space: nowrap;
  animation: marquee 7s linear infinite;

  margin: auto;
}

header {
  background-color: black;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  height: 80px;
  overflow-x: auto;
  overflow-y: hidden;
}
header a p {
  font-size: 20pt;
}

header a  {
  text-decoration: none;
  margin-right: 20px;
}

#title {
  font-size: 40pt;
  font-weight: bold;
  animation: 2s infinite alternate bluemix;
}

#account {
  height: 30px;
  width: 30px;
  background-color: white;
  display: inline-block;
  border-radius: 3px;
}

#account:hover {
  background-color: gray;
  animation: 0.3s tilt;
  animation-fill-mode: forwards;
}

header a p:hover {
  color:gray;
}

.about{
  display: flex;
  margin-bottom: 0px;
  overflow: auto;
  
}

.aboutInfo {
  color: white; 
  font-size: 125%;
}

footer {
  background-color: black;
  width: 100%;
  overflow: auto;
}

footer td{
  border-right: 3px solid white;
  border-radius: 0px;
  cursor: pointer;
  
  max-width: 30%;
}

td {
  text-align: center;
}

footer table {
  padding: 10px;
  width: 100%;
  margin: auto;
}

th {
  font-weight: bold;
  margin-bottom: 10px;
}
.firstcol {
  border-left: 3px solid white;
}

.endless {
  margin-bottom: 15px;
}

.category img {
  height: 150px;
  width: 200px;
  margin-right: 20px;
  background-color: white;
}

.category img:hover {
  border: 5px solid lightskyblue;
  height: 145px;
  width: 190px;
  cursor: not-allowed;
  background-color: grey;
  background-size: 100% 100%;
}

.category {
  overflow: auto;
  display: flex;
  height: 160px;
}

.underconstruction {
  background-image: url("https://ae01.alicdn.com/kf/Hff8968fbfe294998bbd1e4e050a09deb0.jpg_640x640Q90.jpg_.webp");
  background-size: 100% 100%;
}

@keyframes bluemix {
  from {
    color: white;
  }
  
  50% {
    color: grey;
  }
  
  to {
    color: lightskyblue;
  }
}

@keyframes marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

iframe {
  width: 100%;
  background-color: black;
  border: 2px solid lightskyblue;
}

.favorite-game img {
  border: 3px solid red;
  border-radius: 10px;
  transition: transform 0.2s;
}

.favorite-game img:hover {
  transform: scale(1.05);
}

.fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  width: auto;
  text-align: center;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: 2px solid lightskyblue;
  z-index: 9999;
}

.fullscreen-btn:hover {
  border-color: grey;
}

/* Hide fullscreen button when the container is fullscreen */
#game-container:fullscreen .fullscreen-btn,
:-webkit-full-screen #game-container .fullscreen-btn {
  display: none;
}

/* Kill outlines/borders in fullscreen */
*:fullscreen,
:-webkit-full-screen {
  outline: none !important;
  border: none !important;
}

/* Game container */
#game-container {
  position: relative;
  margin-top: 20px;
}

/* Once the game is shown, give the container height */
#game-container.game-on {
  height: 80vh;
}

/* Fullscreen height */
#game-container.game-on:fullscreen,
:-webkit-full-screen #game-container.game-on {
  width: 100%;
  height: 100vh;
}

/* Iframe inside the container */
#game-container .game-iframe {
  width: 100%;
  height: 100%;
  background-color: black;
  border: 2px solid lightskyblue;
}

/* Remove border in fullscreen */
#game-container.game-on:fullscreen .game-iframe,
:-webkit-full-screen #game-container.game-on .game-iframe {
  border: none !important;
}