@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"');
html,body{ padding: 0; margin: 0; width: 100%; height: 100%;}
.icon { -webkit-user-select: none; display: inline-block;}
.icon-online { content: -webkit-image-set( url(img/100-error-online.png) 1x, url(img/200-error-online.png) 2x); position: relative;}
.hidden { display: none;}
.online .header-wrapper { color: #2b2b2b; font-size: 1em; line-height: 1.55; margin: 0 auto; max-width: 600px; padding-top: 100px; width: 100%; position: relative;}
.online .runner-container { height: 150px; max-width: 600px; overflow: hidden; position: absolute; top: 5px; width: 44px; position: relative;}
.online .runner-canvas { height: 150px; max-width: 600px; opacity: 1; overflow: hidden; position: absolute; top: 0; z-index: 2;}
.online .controller { background: rgba(247,247,247, .1); height: -webkit-calc(100% + 18px); height: -moz-calc(100% + 18px); height: calc(100% + 18px); left: 0; position: absolute; top: 0; width: 100vw; z-index: 1;}
#online-resources { display: none;}
/**** Custom Beginning ***/
a { color: #000; text-decoration: none;}
body.main-page { background: #f7f7f7;}
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 { 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: 16px; font-family: "Times New Roman", Times, serif; text-align: center; color: #525252;}
.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: #000000;
  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: 2.5em;
  font-family: "Press Start 2P", system-ui;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  color: #525252;
}
.wave-animation {
  display: inline-block;
  position: relative;
  animation: wave 1s ease;
}

@keyframes wave {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

#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.8em;}
}
@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) { 

}