html {
	scroll-behavior: smooth;
}
body{
  background-image:url("img/mizutama.svg");
  font-family: 'Zen Maru Gothic', sans-serif;
  margin: 0 auto;
	transition:1s;
	animation-name: opacity-fadein;
	animation-duration: 0.5s;
	color:#2C0D0A;
}
p{
	font-weight: 400;

}
header{
	top: 0; 
	left: 0; 
	width: 100vw; 
	height: 54px; 
	padding:10px;
	position:fixed;
	display: flex;
  align-items: center;
	background-color: #36110e;
	z-index: 9;
	animation-name: header-fadein;
  animation-duration: 0.9s;
}
header ul {
	overflow:hidden;
	list-style:none;
	margin:0 20px 0 auto;
	z-index: 20;
}
ul li {
	display: inline-block;
	padding: 26px 10px 20px 10px;
}
#container{
	width: 100vw;
	height: 100vh;
	display:flex; 
	flex-wrap: wrap;
	margin:auto;
}
#left{
	width:50vw;
	text-align: center;
  z-index: 9;
}
#right{
	width:50vw;
	height: 1080px;
	overflow:hidden;
}
.top-image{
	position:relative;
	width:80em;
	object-fit: fill;
	animation-name: fadein;
  animation-duration: 1.6s;
	pointer-events: none;
	overflow:hidden;
  mix-blend-mode: darken;
  z-index: 8;
}
#name{
  position:relative;
	text-align: center;
	margin:12em auto 10px auto;
	z-index: 0;
}
#name h2{
  font-size: 3em;
  margin-bottom: 2px;
	animation-name: fadein;
  animation-duration: 0.8s;
	letter-spacing: 12px;
	font-weight: 500;
	color:#2C0D0A;
}
#name h1{
  font-size: 7em;
  margin-top: 2px;
	animation-name: fadein;
  animation-duration: 1.2s;
	font-weight: 700;
	color:#2C0D0A;
}
.links{
	display:flex;
	margin:2.5em auto 0 auto;
	justify-content: space-around;
	font-size: 3em;
	width:768px;
}
@media screen and (max-width: 600px){
	#left{
		position:absolute;
	}
	.top-image{
		position:absolute;
		left: -50%;
		right: 0;
		margin: auto;
		overflow: hidden;
		z-index: -1;
	}
	#name h2{
		font-size:2em;
	}
	#name h1{
		font-size: 3em;
	}
	#left{
		width:100vw;
	}
	#right{
		width:100vw;
	}
	.links{
		width: 100vw;

	}
}

@keyframes fadein {
	from {
			opacity: 0;
			transform: translateY(-20px);
	}
	to {
			opacity: 1;
			transform: translateY(0);
	}
}
@keyframes opacity-fadein {
	from {
			opacity: 0;
	}
	to {
			opacity: 1;
	}
}
@keyframes header-fadein {
	from {
			opacity: 1;
			transform: translateY(-64px);
	}

	to {
			opacity: 1;
			transform: translateY(0);
	}
}