@import url('https://fonts.googleapis.com/css?family=Pixelify Sans');

.desktop-page{
	visibility: hidden;
	display: none;
}

.horizontal-page{
    visibility: hidden;
	display: none;
}

.desktop-page > body{
  margin: 0px;
  overflow: hidden;
}

.desktop-page > div{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  margin: 0px;
  background: radial-gradient(circle, #240015 0%, #12000b 100%);
  overflow: hidden;
}

.desktop-page > .wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.desktop-page > h2{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 200px;
  font-size: 40px;
  text-position: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  display: block;
  color: #12000a;
  font-weight: 300;
  text-align: center;
  font-family: Pixelify Sans;
  text-shadow: 0px 0px 4px #12000a;
  animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}

.horizontal-page > body{
  margin: 0px;
  overflow: hidden;
}

.horizontal-page > div{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  margin: 0px;
  background: radial-gradient(circle, #240015 0%, #12000b 100%);
  overflow: hidden;
}

.horizontal-page > .wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.horizontal-page > h2{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 40px;
  text-position: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  display: block;
  color: #12000a;
  font-weight: 300;
  text-align: center;
  font-family: Pixelify Sans;
  text-shadow: 0px 0px 4px #12000a;
  animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}

#svgWrap_1,
#svgWrap_2{
  position: absolute;
  height: auto;
  width: 600px;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#svgWrap_1,
#svgWrap_2,
.desktop-page > div{
  animation: hueRotate 6s ease-in-out 3s infinite;
}

.horizontal-page > div{
  animation: hueRotate 6s ease-in-out 3s infinite;
}

#id1_1,
#id2_1,
#id3_1{
  stroke: #ff005d;
  stroke-width: 3px;
  fill: transparent;
  filter: url(#glow);
}

#id1_2,
#id2_2,
#id3_2{
  stroke: #12000a;
  stroke-width: 3px;
  fill: transparent;
  filter: url(#glow);
}

#id3_1{
  stroke-dasharray: 940px;
  stroke-dashoffset: -940px;
  animation: drawLine3 2.5s ease-in-out 0s forwards, flicker3 4s linear 4s infinite;
}

#id2_1{
  stroke-dasharray: 735px;
  stroke-dashoffset: -735px;
  animation: drawLine2 2.5s ease-in-out 0.5s forwards, flicker2 4s linear 4.5s infinite;
}

#id1_1{
  stroke-dasharray: 940px;
  stroke-dashoffset: -940px;
  animation: drawLine1 2.5s ease-in-out 1s forwards, flicker1 4s linear 5s infinite;
}

@keyframes drawLine1 {
  0%  {stroke-dashoffset: -940px;}
  100%{stroke-dashoffset: 0px;}
}

@keyframes drawLine2 {
  0%  {stroke-dashoffset: -735px;}
  100%{stroke-dashoffset: 0px;}
}

@keyframes drawLine3 {
  0%  {stroke-dashoffset: -940px;}
  100%{stroke-dashoffset: 0px;}
}

@keyframes flicker1{
  0%  {stroke: #ff005d;}
  1%  {stroke: transparent;}
  3%  {stroke: transparent;}
  4%  {stroke: #ff005d;}
  6%  {stroke: #ff005d;}
  7%  {stroke: transparent;}
  13% {stroke: transparent;}
  14% {stroke: #ff005d;}
  100%{stroke: #ff005d;}
}

@keyframes flicker2{
  0%  {stroke: #ff005d;}
  50% {stroke: #ff005d;}
  51% {stroke: transparent;}
  61% {stroke: transparent;}
  62% {stroke: #ff005d;}
  100%{stroke: #ff005d;}
}

@keyframes flicker3{
  0%  {stroke: #ff005d;}
  1%  {stroke: transparent;}
  10% {stroke: transparent;}
  11% {stroke: #ff005d;}
  40% {stroke: #ff005d;}
  41% {stroke: transparent;}
  45% {stroke: transparent;}
  46% {stroke: #ff005d;}
  100%{stroke: #ff005d;}
}

@keyframes flicker4{
  0%  {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  30% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  31% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
  32% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  36% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  37% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
  41% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
  42% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  85% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  86% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
  95% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
  96% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
  100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
}

@keyframes fadeInText{
  1%  {color: #12000a;text-shadow:0px 0px 4px #12000a;}
  70% {color: #ff005d;text-shadow:0px 0px 14px #ff005d;}
  100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
}

@keyframes hueRotate{
  0%  {
    filter: hue-rotate(0deg);
  }
  50%  {
    filter: hue-rotate(-120deg);
  }
  100%  {
    filter: hue-rotate(0deg);
  }
}

@media (max-width: 3080px) and (min-width: 1080px){
	.desktop-page{
		visibility: visible;
		display: flex;
	}
	#unity-container{
		visibility: hidden;
		display: none;
	}
	.unity-desktop{
		visibility: hidden;
		display: none;
	}
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse){
    .desktop-page{
        visibility: hidden;
        display: none;
    }
    .horizontal-page{
        visibility: visible;
        display: flex;
    }
    #unity-container{
        visibility: hidden;
        display: none;
    }
}


body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #231F20 }
#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 { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; 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-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }