/* Base reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-width: 320px;
	color: #1f2937;
	background: #ffffff;
}

#content {
  	width: 200px;
  	height: 200px;
  	background-color: skyblue;
}

#welcome {
  	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
 	position: fixed;
	z-index: 999;
  	top: 0;
  	left: 0;
  	width: 100svw;
  	height: 100svh;
  	background-color: #fff;
}

#logo {
	height: 20svh;
	animation: logo 0.8s cubic-bezier(0.2, 2, 0.6, 1) 1 forwards;
	z-index: 999;
}

#logo.fall {
	animation: 1.4s fall_logo 0.7s ease-in-out 1 forwards;
}

.bar {
	position: fixed;
	top: 0;
	height: 100svh;
	width: 20vw;
	animation: 0.8s bar ease-out 1 forwards;
	transition-duration: 0.8s;
	transform: translateY(-100svh);
}

.bar.fall {
	height: 100svh;
	animation: 0.8s fall ease-out 1 forwards;
	transform: translateY(0);
}

#bar1 {
	left: 0;
	background-color: #D7D7D7;
}

#bar2 {
	left: 20%;
	background-color: #F9F9F9;
	animation-delay: 0.15s;
}

#bar3 {
	left: 40%;
	background-color: #F2F2F2;
	animation-delay: 0.3s;
}

#bar4 {
	left: 60%;
	background-color: #DEDEDE;
	animation-delay: 0.45s;
}

#bar5 {
	left: 80%;
	background-color: #D8D8D8;
	animation-delay: 0.6s;
}

@keyframes logo {
	0% {
		/*transform: translateY(100svh);*/
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		/*transform: translateY(0);*/
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes bar {
	0% {
		transform: translateY(-100svh);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes fall {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100svh);
	}
}

@keyframes fall_logo {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100svh) rotate(24deg);
	}
}