@keyframes wave {
	0%, 100%  { transform: translateY(0em) }
	50%       { transform: translateY(0.1em) }
}

.main {
	display: flex;
	flex-direction: column;
	right: 0%; left: 0; top: 0; bottom: 20%;
	margin: auto;
	width: 850px;
	max-width: 99%;
	background: rgba(0, 0, 0, 0.4);
}

#note {
	position: absolute;
	right: 8px;
	width: 15%;
	font-size: 1rem;
}

h1 {
	display: flex;
	justify-content: center;
	gap: -0.15em;
	text-align: center;

	span {
		display: inline-block;
		animation: wave 3s ease-in-out infinite;
		animation-delay: calc(0.1s * var(--i));
	}

	br {
		display: none; /* disables the line break */
	}
}

hr {
	width: 40%;
	color: white;
}
.entry {
	margin-left: 1em;
	margin-right: 1em;

	b {
		text-decoration: underline;
	}

	img {
		width: 100%;
	}
}

@media screen and (max-width: 800px)
{
	/* h1 span:nth-child(8)::after { */
	/* 	content: "\a "; */
	/* } */
	h1 {
		text-align: left;
		left: -50px;
		right: auto;
		font-size: 4rem;
		flex-wrap: wrap;
	}

	#note {
		display: none;
	}
}