html {	
	overflow-x: hidden;
	overflow-y: hidden;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: #442406;
	background-color: #99CCFF;
	background-image: url('images/background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	font-family: Arial, Helvetica, sans-serif;
}

body {	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#sun-area {
	position: absolute;
	/* width:  calc(95%); */
	aspect-ratio: 1 / 1; 
	height: calc(45vh);
	top: calc(-15%);;
	left: calc(5%);
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: transparent;
	background-image: url('images/sun.gif');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left bottom;
	opacity: 0.98;
}

#clouds-area {
	position: absolute;
	width:  calc(100%);
	height: calc(100vh);
	top: 0;
	left: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: transparent;
	background-image: url('images/clouds.png');
	background-repeat: no-repeat;
	background-size: cover;
	/* background-size: 100% auto; */
	background-position: right top;
	opacity: 0.98;
}

#buildings-area {
	position: absolute;
	width:  calc(100%);
	height: calc(50vh);
	bottom: calc(35vh);
	left: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: transparent;
	background-image: url('images/buildings.png');
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center top;
	animation: aniBuildings 60s linear infinite;
}


#trees-area {
	position: absolute;
	width:  calc(100%);
	height: calc(35vh);
	bottom: calc(35vh);
	left: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: transparent;
	background-image: url('images/trees.png');
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center top;
	animation: aniTrees 30s linear infinite;
}


#walk-area {
}

.character {
	position: absolute;
	aspect-ratio: 1 / 1; 
	height: calc(30vh);
	bottom: calc(35vh);
	left: calc(101%);
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: center bottom;
	background-size: contain;
	pointer-events: none;
}

#wall-area {
	position: absolute;
	width:  calc(100%);
	height: calc(20vh);
	bottom: calc(15vh);
	left: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	
	background-color: #CBCBCB;
	
	background-image: url('images/wall.png');
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center top;
	animation: aniWall 10s linear infinite;
}


#credits-area,
#credits-area .hidden-area {
	position: absolute;
	width:  calc(100%);
	height: calc(15vh);
	bottom: 0;
	left: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	
	background-color: #0F1A38;
	
	z-index: 999;
}

#credits-area .hidden-area {
	opacity: 0;
	transition: 0.2s;
}

#credits-area:hover .hidden-area {
	opacity: 1;
}

.credits-link {
	position: absolute;
	display: block;
	max-width:  calc(48%);
	bottom: 0;
	left: 0;
	margin: 1% 1% 1% 1%;
	padding: 0 0 0 0;
	color: #FFFF00;
	font-size: 12px;	
	text-decoration: none;
}

.credits-link:hover,
.credits-link:active {
	color: #FFFFFF;	
	text-decoration: underline;
}

#yt {
	position: absolute;
	bottom: 0;
	right: 0;
	/* aspect-ratio: 3 / 1; */
	width:  calc(50%);
	height: calc(15vh);
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#yt iframe {
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #0F1A38;
}

#yt iframe:hover {
	opacity: 1;
}

@media screen and (max-width:640px) {
	.credits-link {
		max-width:  calc(22%);
		font-size: 10px;
	}

	#yt {
		width:  calc(75%);
	}
}

@keyframes aniBuildings {
  0% {
    background-position: 0;
  }
  
  100% {
    background-position: calc(50vh * (11520/1152));
  }
}

@keyframes aniTrees {
  0% {
    background-position: 0;
  }
  
  100% {
    background-position: calc(35vh * (3840/324));
  }
}

@keyframes aniWall {
  0% {
    background-position: 0;
  }
  
  100% {
    background-position: calc(20vh * (1920/216));
  }
}




.character.atsushi {
	background-image: url('images/characters/bsd/atsushi.gif');
}

.character.atsushi.skipping {
	background-image: url('images/characters/bsd/atsushi-skipping.gif');
}

.character.ranpo {
	background-image: url('images/characters/bsd/ranpo.gif');
}

.character.kenji {
	background-image: url('images/characters/bsd/kenji.gif');
}

.character.kyoka {
	background-image: url('images/characters/bsd/kyoka.gif');
}

.character.akiko {
	background-image: url('images/characters/bsd/akiko.gif');
}

.character.akutagawa {
	background-image: url('images/characters/bsd/akutagawa.gif');
}



.character.bsdpram1 {
	background-image: url('images/characters/bsd/bsdpram1.gif');
	aspect-ratio: 2 / 1; 
}

.character.bsdpram2 {
	background-image: url('images/characters/bsd/bsdpram2.gif');
	aspect-ratio: 2 / 1; 
}


.character.dazai {
	background-image: none;
}

.character.dazai.river {
	height: calc(65vh);
	bottom: calc(15vh);
	background-image: url('images/characters/bsd/dazai-river-legs.png');
	z-index: 888;
	animation: aniDazaiRiver 2s linear infinite;

}


@keyframes aniDazaiRiver {
  0%, 100% {
    bottom: calc(15vh);
  }
  
  40%, 60% {
    bottom: calc(14vh);
  }
}


.character.log.river {
	height: calc(65vh);
	bottom: calc(15vh);
	background-image: url('images/characters/bsd/log.png');
	z-index: 887;
	animation: aniDazaiRiver 2s linear infinite;
}