@import url('https://fonts.googleapis.com/css?family=Audiowide:400,700');
*{font-family: 'Audiowide', sans-serif;}
/********
UI
********/
._fill{ position:absolute;top:0;left:0;width:100%;height:100%; }
._center{ display:flex;	align-items:center;justify-content:center;}
@keyframes ani_down{
0%{ opacity:0; transform:translateY(-80px);  }
100%{ opacity:1; transform:translateY(0px);  }
}

@keyframes ani_up{
0%{ opacity:0; transform:translateY(80px);  }
100%{ opacity:1; transform:translateY(0px);  }
}

@keyframes ani_left{
0%{ opacity:0; transform:translateX(-80px);  }
100%{ opacity:1; transform:translateX(0px);  }
}

@keyframes ani_right{
0%{ opacity:0; transform:translateX(80px);  }
100%{ opacity:1; transform:translateX(0px);  }
}

@keyframes ani_zoomin{
0%{ opacity:0; transform:scale(2);  }
100%{ opacity:1; transform:scale(1);  }
}

._up{animation:ani_up 0.5s ease;}
._up1s{animation:ani_up 1s ease;} 
._down{animation:ani_down 0.5s ease;}
._down1s{animation:ani_down 1s ease;}
._left{animation:ani_left 0.5s ease;}
._left1s{animation:ani_left 1s ease;}
._right{animation:ani_right 0.5s ease;}
._right1s{animation:ani_right 1s ease;}
._zoomin{animation:ani_zoomin 0.5s ease;}
._zoomin1s{animation:ani_zoomin 1s ease;}

/**********
page menu
************/
.title {	
	margin:2em 0 0.4em 0;
	width:100%;	 
	font-size:1.2cm;
	color:#fff;
}
.menu-container{ flex-direction:column;}
.menu{	 
	font-size:0.6cm;	
	margin:0.2em 20px 0.2em 20px; 	
	cursor:pointer;
	padding:5px 15px;
	color:#fff;
}
.menu:hover{ text-shadow: #fc0 1px 0 10px;}
/************
page resize
************/
@media (min-width:500px){
	.title { margin-top:6%;}
	.menu-container{ flex-direction:row; }	
}
/***********
page choice 
***********/
.choice-container{
	width:100%;height:40%;	
	background-size:cover;
   background-position:center;
}
/******************
circle animation
******************/
.circles{   
    background: linear-gradient(135deg,rgb(206,46,46), rgb(252,185,0));  
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: circle_animate 25s linear infinite;
    bottom: -150px;    
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes circle_animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
 /*******
 logo
 *******/
#loading{
	position:absolute;
	left:calc(50vw - 80px);
	top:calc(50vh - 100px);
	width:160px;
	height:160px;	 
	flex-direction:column;	
	display:flex;	align-items:center;justify-content:center;
 }
#loading span{  
	color:#fff;
	font-family: Arial, Helvetica, sans-serif;
	font: small-caps bold 16px sans-serif;
	letter-spacing:1px;
	text-align:center;	
 }
#loading span:nth-child(3){ animation:ani_opacity 2s ease;animation-iteration-count: infinite; }  
#loading ytd{ 
	width:100px;
	height:100px;	
	transform:rotate(45deg);	
	display:flex;	align-items:center;justify-content:center;
}
#loading ytd div{
	position:relative;
	width:12%;height:60%;
	margin:0 6px;
}
#loading ytd div:before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	border-radius:6px;
	background:#fff;
	pointer-events:none;	
}
@keyframes ani_opacity{ 0%{opacity:0}40%{opacity:0.8;}100%{opacity:0;}}
@keyframes ani_height{ 0%{opacity:0;height:2px;}60%{opacity:1; height:100%;}100%{opacity:1; height:100%;}}
ytd div:nth-child(1):before
{ left:0;top:0;animation:ani_height 2s ease ;animation-iteration-count: infinite; }
ytd div:nth-child(2):before
{ left:0;bottom:0;animation:ani_height 2s ease;animation-iteration-count: infinite; }
ytd div:nth-child(3):before
{ left:0;top:0;animation:ani_height 2s ease;animation-iteration-count: infinite; }