@charset "utf-8";

html, body {margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; -webkit-animation: shake 0.5s 19s 7 backwards; animation: shake 0.5s 19s 7 backwards;}

/*body {-webkit-animation: fadein 0.5s linear 1 forwards, flickerface 1.5s 13s linear 2 forwards; animation: fadein 0.5s linear 1 forwards, flickerface 1.5s 13s linear 2 forwards;}*/

#slideshow {position: absolute; margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; background: center / cover no-repeat fixed #000; 
-webkit-animation: changeBG 12s steps(1) infinite, fadein 0.8s ease 1 forwards;
animation: changeBG 12s steps(1) infinite, fadein 0.8s ease 1 forwards;}

body {background-color: #000;}

/*#disappear {position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
background: transparent; 
-webkit-animation: fadein 0.5s 9s reverse forwards; animation: fadein 0.5s 9s reverse forwards;
z-index: 100;}*/

.face {position: absolute; margin: auto;
filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 5px #000);
-webkit-animation: flickerface 1s linear both, fadein 1s reverse forwards;
animation: flickerface 1s linear both, fadein 1s reverse forwards;}

#eyes {top: 0; left: 0; right: 0; bottom: 285px; -webkit-animation-delay: 6s, 8s; animation-delay: 6s, 8s;}
#mouth {top: 220px; left: 0; right: 0; bottom: 0; -webkit-animation-delay: 4s, 8s; animation-delay: 4s, 8s;}

.moguro {position: absolute; margin: auto; left: 0; right: 0; bottom: 0;}

#mogurotalk {height: 347px; width: 381px; z-index: 1; opacity: 0; -webkit-animation: talk 6s linear 10s; animation: talk 6s linear 10s;}
#mogurogreet {height: 347px; width: 385px; z-index: 2; opacity: 0; -webkit-animation: greet 2s linear 12.5s; animation: greet 2s linear 12.5s;}
#moguropoint {height: 347px; width: 346px; z-index: 3; -webkit-animation: fadein 0.5s 15.5s linear backwards, power 0.1s 17s steps(2, end) 20 both; 
animation: fadein 0.5s 15.5s linear backwards, power 0.1s 17s steps(2, end) 20 both;}

@-webkit-keyframes talk {5%, 45%, 75%, 95% {opacity: 1;} 0%, 50%, 60%, 70%, 100% {opacity: 0;} }
@keyframes talk {5%, 45%, 75%, 95% {opacity: 1;} 0%, 50%, 60%, 70%, 100% {opacity: 0;} }

@-webkit-keyframes greet {0%, 100% {opacity: 0;} 20%, 90% {opacity: 1;} }
@keyframes greet {0%, 100% {opacity: 0;} 20%, 90% {opacity: 1;} }
	
#lipsbg {position: absolute; 
margin: auto;
left: 0; right: 0; bottom: 3%;
width: 600px; height: 75px;
opacity: 0;
filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 5px #000);
-webkit-animation: fadein 0.5s 10.5s forwards, fadeout 0.5s 15.5s forwards;
animation: fadein 0.5s 10.5s forwards, fadeout 0.5s 15.5s forwards;
z-index: 4;}

#lips {position: absolute; 
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
width: inherit; height: inherit;
opacity: 0.4;
-webkit-border-radius: 25px; border-radius: 25px;
background: url(https://i.imgur.com/jbmU2fu.gif) top left / 105% repeat #000;}

#appear {position: fixed; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0;
-webkit-animation: fadein 0.2s 19s linear forwards; animation: fadein 0.2s 19s linear forwards;}

.message, .boom {position: absolute;
margin: auto;
width: 100%;
height: 100%;
text-align: justify;
font: 32px impact, helvetica, sans-serif;
right: 0; left: 0; bottom: 0; top: 0;}

.message {color: white; opacity: 0;}
#message1 {-webkit-animation: fadein 0.5s 11s linear forwards, fadeout 0.5s 13s linear forwards; animation: fadein 0.5s 11s linear forwards, fadeout 0.5s 13s linear forwards;}
#message2 {-webkit-animation: fadein 0.5s 13.5s linear forwards, fadeout 0.5s 15.5s linear forwards; animation: fadein 0.5s 13.5s linear forwards, fadeout 0.5s 15.5s linear forwards;}

.boom {-webkit-animation: enlarge 0.7s linear forwards, shake 0.8s linear infinite, flash 0.1s linear infinite;
-webkit-animation: enlarge 0.7s linear forwards, shake 0.8s linear infinite, flash 0.1s linear infinite;}

/*#message1 {z-index 1; -webkit-animation-delay: 13s, 13.5s, 100ms;}
#message2 {z-index 2; -webkit-animation-delay: 13s, 13.6s, 200ms;}
#message3 {z-index 3; -webkit-animation-delay: 13s, 13.7s, 300ms;}*/

#boom1 {color: white; z-index: 1; -webkit-animation-delay: 19s, 100ms, 100ms; animation-delay: 19s, 100ms, 100ms;}
#boom2 {color: black; z-index: 2; -webkit-animation-delay: 19s, 200ms, 200ms; animation-delay: 19s, 200ms, 200ms;}
#boom3 {color: yellow; z-index: 3; -webkit-animation-delay: 19s, 300ms, 300ms; animation-delay: 19s, 300ms, 300ms;}

@-webkit-keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-2deg); }
  20% { transform: translate(-3px, 0px) rotate(2deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(2deg); }
  50% { transform: translate(-1px, 2px) rotate(-2deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-2deg); }
  80% { transform: translate(-1px, -1px) rotate(2deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-2deg);}}
  
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-2deg); }
  20% { transform: translate(-3px, 0px) rotate(2deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(2deg); }
  50% { transform: translate(-1px, 2px) rotate(-2deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-2deg); }
  80% { transform: translate(-1px, -1px) rotate(2deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-2deg);}}

@-webkit-keyframes enlarge { from {font-size: 32px;} to {font-size: 85px;}}
@keyframes enlarge { from {font-size: 32px;} to {font-size: 85px;}}

@-webkit-keyframes 'changeBG' {0%, 100% {background: url(https://i.imgur.com/pO06xLb.jpg) /*Day Skyscraper*/ center / cover no-repeat rgba(0,0,0,0.5); background-blend-mode: multiply;}
10% {background-image: url(https://i.imgur.com/LZDyzcR.jpg) /*Demons Nest Bar*/;}
20% {background-image: url(https://i.imgur.com/rEFY4X3.jpg) /*Alley*/;}
30% {background-image: url(https://i.imgur.com/V8LRe2W.jpg) /*Night Park*/;}
40% {background-image: url(https://i.imgur.com/kFXWT1H.jpg) /*NOTLD House*/;}
50% {background-image: url(https://i.imgur.com/5xg3ViI.jpg) /*Peach Castle*/;}
60% {background-image: url(https://i.imgur.com/0LD2RvE.jpg) /*Beacon Academy*/;}
70% {background-image: url(https://i.imgur.com/Pxgowsa.jpg) /*Harukei Shrine*/;}
80% {background-image: url(https://i.imgur.com/GEvIYmQ.jpg) /*Silent Hill*/;}
90% {background-image: url(https://i.imgur.com/J9esMgS.jpg) /*Tattooine*/;}}

@keyframes 'changeBG' {0%, 100% {background: url(https://i.imgur.com/pO06xLb.jpg) /*Day Skyscraper*/ center / cover no-repeat rgba(0,0,0,0.5); background-blend-mode: multiply;}
10% {background-image: url(https://i.imgur.com/LZDyzcR.jpg) /*Demons Nest Bar*/;}
20% {background-image: url(https://i.imgur.com/rEFY4X3.jpg) /*Alley*/;}
30% {background-image: url(https://i.imgur.com/V8LRe2W.jpg) /*Night Park*/;}
40% {background-image: url(https://i.imgur.com/kFXWT1H.jpg) /*NOTLD House*/;}
50% {background-image: url(https://i.imgur.com/5xg3ViI.jpg) /*Peach Castle*/;}
60% {background-image: url(https://i.imgur.com/0LD2RvE.jpg) /*Beacon Academy*/;}
70% {background-image: url(https://i.imgur.com/Pxgowsa.jpg) /*Harukei Shrine*/;}
80% {background-image: url(https://i.imgur.com/GEvIYmQ.jpg) /*Silent Hill*/;}
90% {background-image: url(https://i.imgur.com/J9esMgS.jpg) /*Tattooine*/;}}

@-webkit-keyframes 'flickerface' {0% {opacity: 0;}
20%  {opacity: 1;}
50%  {opacity: 0;}
100% {opacity: 1;}}

@keyframes 'flickerface' {0% {opacity: 0;}
20%  {opacity: 1;}
50%  {opacity: 0;}
100% {opacity: 1;}}

@-webkit-keyframes 'blackout' {from {background-color: #fff;} to {background-color: #000;}}
@keyframes 'blackout' {from {background-color: #fff;} to {background-color: #000;}}

@-webkit-keyframes 'flash' {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes 'flash' {0% {opacity: 0;} 100% {opacity: 1;}}

@-webkit-keyframes 'fadein' {from {opacity: 0;} to {opacity: 1; visibility: visible;}}
@keyframes 'fadein' {from {opacity: 0;} to {opacity: 1; visibility: visible;}}

@-webkit-keyframes 'fadeout' {from {opacity: 1;} to {opacity: 0;}}
@keyframes 'fadeout' {from {opacity: 1;} to {opacity: 0;}}

@-webkit-keyframes 'power' {from {filter: drop-shadow(0 0 5px #000);} to {filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff);}}
@keyframes 'power' {from {filter: drop-shadow(0 0 5px #000);} to {filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff);}}

/*#cursor {position: absolute; z-index: 2;}	
#cursor:hover > #cfpatch {opacity: 0; visibility: hidden; z-index: 0;}

.transition {transition: all 0.2s linear;	
-webkit-transition: all 0.2s linear;}*/

.flex {display: -webkit-flex;  display: flex; 	
-webkit-flex-wrap: wrap;  flex-wrap: wrap;	
-webkit-justify-content: center; justify-content: center; 	
-webkit-align-items: center; align-items: center;}
	
.flex3 {display: -webkit-flex; display: flex;	
-webkit-flex-direction: column; flex-direction: column;	
-webkit-flex-wrap: nowrap; flex-wrap: nowrap;	
-webkit-justify-content: space-around; justify-content: space-around; 	
-webkit-align-content: center; align-content: center; 	
-webkit-align-items: center; align-items: center;}

.white {z-index: 400; position: absolute; margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; background-color: #fff; opacity: 0;
-webkit-animation: flickerface 1.5s linear 19s 2 forwards, blackout 0.5s linear 23.6s 1 forwards;}

#link {position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
z-index: 999;
-webkit-animation: fadein 0.5s 24.5s linear forwards; animation: fadein 0.5s 24.5s linear forwards;}

#text {font: 120px impact, sans-serif, veranda;
text-transform: uppercase;
text-align: center;
text-decoration: none;
opacity: 1;
color:rgba(0,255,0,1); text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px, #000 0 0 7px;}