@charset "UTF-8";

html, body, .scene {
    height: 100%;
}
a,a:active,a:focus,a:visited,a:hover{color:#A0E9F8;font-weight: normal;} 
.mask {
    overflow: hidden;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height : 100%;
}
.mask img {
    position: absolute;
    width:100vw;
    height:100vh;
}
.mask .bar {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
}
.mask#rainbow-1 .bar { background-color: #FF6262; }
.mask#rainbow-2 .bar { background-color: #FFB757; }
.mask#rainbow-3 .bar { background-color: #FFEC69; }
.mask#rainbow-4 .bar { background-color: #65FF99; }
.mask#rainbow-5 .bar { background-color: #6187FD; }
.mask#rainbow-6 .bar { background-color: #D290FF; }
.mask .line {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    opacity: 0.8;
    top: 0;
}
.mask:first-child .line {
    display: none;
}
.text{
	position:relative;
	top:66vh;
	padding:25px;
	width:30vw;
	font-size:18px;
	font-weight:bold;
	background-color:rgba(0,0,0,0.3);
	color:white;
    line-height: 28px;
}
#text_m,#text_m p{display:none;}

@media(max-width: 767px){
.text{display:none;}
 #text_m{display:block;}
 #text_m p{
    display:block; 
    position: absolute; 
    bottom:6.5vh;
    width:320px;
    margin-left:-160px;
    left:50%;
    padding:5px;
    line-height: 28px;
    background-color: rgba(0,0,0,0.2);
    color:white;
    pointer-events: none;
}
a,a:active,a:focus,a:visited,a:hover{color:#A0E9F8; pointer-events:auto;}    
}