@charset "UTF-8";

img {
		max-width: 100%;
		height: auto;
	}

#main {
    max-width: 100%;
	margin: 0 auto;
    padding: 50px 0 0;
}

#main h1 {
	margin: 0 3% 50px;
	color: inherit;
}

.block {
	margin: 0 3% 60px;
	font-size: 14px;
	text-align: center;
	min-height: 2000px;
}


.block h2 {
	margin: 0 0 10px;
	font-size: 120%;
	font-weight: bold;
}

.list {
	display: flex;
	flex-direction: column;
	gap: 100px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scroll-up {
	animation: scroll-up linear;
	animation-timeline: view();
	animation-range: entry 0% cover 30%;
}

.scroll-left {
	animation: scroll-left linear;
	animation-timeline: view();
	animation-range: entry 0% cover 30%;
}

.scroll-right {
	animation: scroll-right linear;
	animation-timeline: view();
	animation-range: entry 0% cover 30%;
}

@keyframes scroll-up {
	from {
		transform: translateY(100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes scroll-left {
	from {
		transform: translateX(-100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes scroll-right {
	from {
		transform: translateX(100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}