/**** Custom Beginning ***/
a { color: #525252;}
body.main-page { background: #000000;}
body.header-wrapper { color: #ddd;}
body.high-scores { color: #bbb;}
body.other-versions ul li a { color: #ccc;}
ul { margin: 0; padding: 0; list-style: none;}
p { margin: 0 0 10px; font-size: 16px; line-height: 18px; text-align: center;}
.wrapperpage { margin-top: 80px; width: auto; max-width: 620px; margin-left: auto; margin-right: auto; font-family: "Pixelify Sans", sans-serif; font-weight: 400; font-style: normal; color: #525252;}
#dino-game { margin: 0; padding: 0;}
#dino-game h3 { margin: 0 0 10px; font-size: 14px; font-family: "Times New Roman", Times, serif; text-align: center; color: #2F6CAA;}
.online .header-wrapper { margin-bottom: 40px; padding-top: 18px;}
.online .runner-container,.online .runner-canvas { position: relative;}
.other-versions { margin-bottom: 30px; text-align: center;}
.other-versions ul { display: inline-block; margin: 0;}
.other-versions ul li { float: left; margin: 0 5px; text-align: center;}
.other-versions ul li img { display: block;}
.other-versions ul li a { font-size: 12px; font-weight: bold; text-decoration: none;}
.dice {
    width: 1.1rem;
    height: 1.1rem;
    position: absolute;
	top: 1.3rem;
    left: 1.6rem;
}

button {
	padding: 1.5rem 1.5rem 1.5rem 3.6rem;
    font-size: 14px;
	font-family: "Press Start 2P", system-ui;
    text-transform: uppercase;
    position: relative;
    outline: none;
	background: transparent;
    border: transparent;
    color: #535353;
	cursor: pointer;
	transform: translateZ(0);
}
button:hover {
  color: #858585;
  animation-name: button;
  animation-duration: 0.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes button {
  to {
    transform: scale(1.1);
  }
}

h1 {
  margin: 35px 0 0;
  font-size: 1.9em;
  font-family: "Press Start 2P", system-ui;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  color: #525252;
}

#footer { color: #444; margin: 10px; font-size: 12px;}
.copyright { position: absolute; left: 0; bottom: 0; padding: 15px 0; width: 100%; color: #444; font-family: "Times New Roman", Times, serif; text-align: center;}

/**** Custom Responsive ***/
@media screen(max-width: 520px) { 
#dino-game h3 { font-size: 16px; font-weight: bold;}
.online .header-wrapper { margin-bottom: 40px; padding-top: 18px;}
.online .runner-container,.online .runner-canvas { position: relative;}
.other-versions { margin-bottom: 30px; text-align: center;}
.other-versions ul { display: inline-block; margin: 0;}
.other-versions ul li { float: left; margin: 0 5px; text-align: center;}
.other-versions ul li img { display: block;}.
.other-versions ul li a { font-size: 12px; font-weight: bold; text-decoration: none;}
}
@media (max-width: 420px) { 
.wrapperpage { padding: 0 5px;}
h1 {font-size: 1.2em;}
}
@media (max-height: 350px){
#dino-game h3 { margin: 0 0 15px; } 
.icon-online { margin: 0 0 10px; } 
.header-wrapper { margin-top: 5%; } 
}
@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) { 
.online .header-wrapper { margin-left: 0; margin-right: 0; }
}
@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) { 
.header-wrapper { margin-bottom: 40px; }
}
@media (min-height: 240px) and (orientation: landscape) { 
.online .header-wrapper { margin-bottom: 20px; } 
.icon-online { margin-bottom: 20px; }
}
@media (max-height: 320px) and (orientation: landscape) { 
.icon-online { margin-bottom: 0; } 
.online .runner-container { top: 10px; }
}
@media (max-width: 240px) { 
.header-wrapper { overflow: inherit; padding: 0 8px; }
}
@media (max-width: 120px) { 
button { width: auto; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) { 
#dino-game h3 { display:none;}
.copyright {bottom: -370px; font-size: 14px;}
}
@media screen and (min-width: 768px) { 

}