@font-face { font-family: 'Odin Rounded'; src: url("odinRounded-bold.otf"); font-weight: 400; font-style: normal; font-stretch: normal; unicode-range: U+0020-00FE; }

body { font-family: "Odin Rounded", sans-serif; background-color: #5B5B5B; line-height: 1; font-size: 17px !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding:0px; margin: 0px; }

.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; width:100%; height:100%; bottom: 0px; left: 0px; border: 0; }

.webgl-content {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#bg {
    position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    /* background: url('roadbg.jpg') no-repeat center / contain;  */
    min-height:100%; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    /* background-size:cover; */
    /* background-image: url('roadbg.jpg'); */
}

#gameContainer {
  width: 100vw;
  height: 100vh;
  display: block;
}

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

div#loadingBox {
  position: absolute;
  width: 60%;
  height: 31px;
  top: 50%;
  left: 20%;
  text-align: center;
}

/* Progress bar */

img#bgBar {
  position: absolute;
  width: 100%;
  margin-left: -50%;
  left: 50%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

img#progressBar {
  position: absolute;
  width: 100%;
  left: 50%;
  margin-left: -49.7%;
  margin-top: 3px;
  height: 79%;
  object-fit: cover;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

#spinner {
  position: absolute;
  left: 0%;
  width: 22px; 
  margin-top: 4px;
  margin-left: 5px;
  object-fit: auto;
  z-index: 10;
}

.rotate {
  animation: rotate 0.75s infinite linear;
  -webkit-animation: rotate 0.75s infinite linear;
}
.paused {
  animation-play-state: paused;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@-webkit-keyframes loading-percent-final
{
    0%{content:'90';}
    10%{content:'91';}
    20%{content:'92';}
    30%{content:'93';}
    40%{content:'94';}50%{content:'95';}60%{content:'96';}70%{content:'97';}80%{content:'98';}90%{content:'99';}
    100%{content:'100';}
}
@keyframes loading-percent-final
{0%{content:'90';}10%{content:'91';}20%{content:'92';}30%{content:'93';}40%{content:'94';}50%{content:'95';}60%{content:'96';}70%{content:'97';}80%{content:'98';}90%{content:'99';}100%{content:'100';}}

@-webkit-keyframes loading-bar-final{0%{-webkit-width:90%;}100%{-webkit-width:100%;}}
@keyframes loading-bar-final{0%{width:90%;}100%{width:100%;}}


#loadingInfo {
  color: #ffffff;
  letter-spacing: 2px;
  left: 0%;
  position: absolute;
  width: 100%;
  font-family: "Odin Rounded", sans-serif;
  text-transform: uppercase;
  text-align: left;
  font-size: 20px;
  margin-top: 5px;
  margin-left: 35px;
  display: block;
  z-index: 10;
}

#loadingPercent {
  color: #ffffff;
  letter-spacing: 2px;
  left: 0%;
  position: absolute;
  width: 100%;
  font-family: "Odin Rounded", sans-serif;
  text-transform: uppercase;
  text-align: right;
  font-size: 20px;
  margin-top: 5px;
  display: block;
  z-index: 10;
}

#loadingPercent.in-final-stage:before
{
    content:'90';
    -webkit-animation:loading-percent-final 10s linear;
    animation:loading-percent-final 10s linear;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}

#loadingPercent.in-final-stage:after
{
    content:'%';
}

#progressBar.in-final-stage
{
    -webkit-animation:loading-bar-final 10s linear;
    animation:loading-bar-final 10s linear;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}


#links {
	position: absolute; right: 0px; bottom: 0px;
	padding: 8px;
	list-style: none; background-color: #fff; border-top-left-radius: 5px;
}

#links ul {
	list-style-type: none;
}

#links ul li {
        display: inline;
}

#links ul li a {
	color: #000;
	display: inline-block; margin-right: 10px;
	text-decoration: none;
}
#links ul li a.visited {
	color: #000;
}

#links ul li a:hover {
	opacity: 0.85;
}


#ads {
	position: absolute; left: 0px; bottom: 0px;
	padding: 8px; background-color: #fff; border-top-right-radius: 5px;  
	display: none;
}

#gdads {
	position: absolute; left: 0px; bottom: 0px; width: 346px; height: 290px;
	padding: 0px; margin: 0px; 
	display: none;
	vertical-align: bottom;
}
#gddisplayad {
	display:block;
	padding: 0; margin: 0;
	width: 336px; height: 280px;
	vertical-align: bottom;
}

#shares {
	position: absolute; left: 0px; top: 0px;
	color: #FFFFFF;
	font-size: 22px;
	padding: 12px;
}

#shares p
{
	padding: 6px;
}

#shares a {
	display: inline-block; margin-right: 10px;
}

#popup-about {
	display: none;
}


#leaderboard
{
	position: absolute; 
	top: 20px;
	right: 0px;
	width: 230px;
	text-align: center;
	background-color: #fff;
	border-top-left-radius: 5px;  
	border-bottom-left-radius: 5px;  
}

#banner {
	position: absolute;
	top: 460px;
	right: 20px;
}
#banner img {
	border-radius: 5px;
}


#killBoard {
	color: #404040; width: 100%;font-size: 16px;
}

#scoreBoard {
	color: #404040; width: 100%;font-size: 16px;
}
	
#switchBoard {
	width: 100%;
	text-align: center;	
	padding-top: 4px;
	padding-bottom: 4px;
}

#switchBoard a {
	color: #000000;
	text-decoration: none;
}
#switchBoard a.visited {
	color: #000000;
}
#switchBoard a:hover {
	opacity: 0.85;
}
.leaderboardHeading {
	color:#000000; background-color: #959595; border-top-left-radius: 5px;
}

#ideaBlock
{
	position: absolute; 
	top: 416px;
	right: 0px;
	width: 230px;
	text-align: center;
	background-color: #fff;
	border-top-left-radius: 5px;  
	border-bottom-left-radius: 5px;  
}
#ideaLink {
	width: 100%;
	text-align: center;	
	padding-top: 4px;
	padding-bottom: 4px;
}

#ideaLink a {
	color: #1f40e2;
	text-decoration: none;
}
#ideaLink a.visited {
	color: #1f40e2;
}
#ideaLink a:hover {
	opacity: 0.85;
}

#preroll {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: none;
}

#rl1 {
	position: absolute;
	right: 34px;
	top: 594px;
	width: 160px;
	text-align: center;
	background: white;
	padding: 5px;
	border-radius: 5px;
}
#rl1 a {
	color: black;
	font-size: 24px;
	text-decoration: underline;
}
#rl1 a:visited {
	color: black;
}

#rl2 {
	position: absolute;
	right: 34px;
	top: 640px;
	height: 30px;
	width: 160px;
	text-align: center;
	background: white;
	padding: 5px;
	border-radius: 5px;
}
#rl2 a {
	color: black;
	font-size: 24px;
	text-decoration: underline;
}
#rl2 a:visited {
	color: black;
}

#popup-howtoplay {
	display: none;
}

#popup-tipsandtricks {
	display: none;
}

#popup-shop {
	display: none;
}


#discord {	
	position: absolute;
	left: 50%;
	top: 8px;
	z-index: 3;
	margin-left: -100px;
}

#discordgd {	
	position: absolute;
	left: 50%;
	top: 8px;
	z-index: 3;
	margin-left: -100px;
}

#discord a img {
	border-radius: 6px;
}

#discordgd a img {
	border-radius: 6px;
}

#discord img {
	border-radius: 6px;
}
#discordgd img {
	border-radius: 6px;
}


#aipBranding {
	display: none!important;
}

#aip_gdpr {
	pointer-events: all!important;
}

.tshirtshop {
	font-size: 20px;
}