@font-face {
  font-family: 'FranklinGothic';
  src: url('fonts/FRADMCN.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}




body { padding: 0; margin: 0 }

header{
  position: relative;
  padding-top: 14%;
  top: 0px;
  left: 0px;
  width: 100%;
  background: url("header.png") no-repeat;
  background-size: cover;
  margin-bottom: 50px;
}

#main-message
{
  width: 100%;
  margin: 20px auto;
  font-family: 'FranklinGothic', sans-serif;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 4vw;
  color: #4ba7c7;
}

#main-message p {margin-right:30px;}

#playnow 
{
  display: flex;
  position: relative;
  width: 100%;
  height: 300px;
}

#playnow .characters{
  display: flex;
  background: url("characters.png") no-repeat;
  width: 65%;
  background-size: contain;
  background-position: center top; 
}




#buttonplaynow
{
  width: 30%;
  height: 100px;
  margin: 20px auto;
  background: url("button_playnow.png") no-repeat;
  background-size: contain;
  cursor:pointer;

  font-family: 'Fredoka One', sans-serif;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
}

#info {
  margin: 100px 0 0 30px;
  width: 60%;
}


#info h1 , #info h2{
  font-family: 'Fredoka One', sans-serif;
  color: #fe9f4d;
}

#info h3 {
  font-family: 'Noto Sans', sans-serif;
  font-size: medium;
}

#more {
  align-content: center;
  text-align: center;
  font-family: 'Fredoka One', sans-serif;
  font-size: larger;
  margin: 0 20%;
  padding-top: 50px;
}

#more p {
  font-family: 'Noto Sans', sans-serif;
}

#info .button{
  width: 40%;
  text-align: center;
  background-color: #fe9f4d;
  border-radius: 10px;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  margin-left: auto;
  font-family: 'Noto Sans', sans-serif;
  color:white;
}

#info .button:hover{color:black}



footer{
  position: relative;
  padding-top: 45%;
  width: 100%;

  background: url("footer.png") no-repeat;
  background-size: cover;
}

footer .icon{
  width: 70px;
  height: 70px;
  position: absolute;
  bottom: 30px;
  background: url('social_media_icons.png') no-repeat;
  background-size: auto 50px;
  background-position-y: 10px;

  cursor: pointer;
} 

footer .icon:hover{
  background-size: cover;
  background-position-y: 0px;
}

footer .icon#linkedin {right: 220px;background-position-x: 10px;}
footer .icon#linkedin:hover{background-position-x: 0px;}

footer .icon#facebook {right: 150px;background-position-x: -73px;}
footer .icon#facebook:hover{background-position-x: -118px;}

footer .icon#twitter {right: 80px;background-position-x: -158px;}
footer .icon#twitter:hover{background-position-x: -237px;}

footer .icon#tiktok {right: 10px;background-position-x: -244px;}
footer .icon#tiktok:hover{background-position-x: -356px;}

footer .contactus {
  font-family: 'FranklinGothic', sans-serif;
  position: relative;
  bottom: 100px;
  left: 24px;
  color: white;
}


#unity-container { 
  position: relative; 
  margin: 0 auto;
  width: 960px;
  align-content: center;
}


#unity-container.unity-desktop { /*left: 50%; top: 50%; transform: translate(-50%, -50%) */}
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }