body, html { margin: 0; }
main { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; flex-direction: column;  }
.main_matter { display: flex; width: 40%; align-items: center; animation: 1s ease-out 0s 1 onload_hello; }
.hi { width: 1em; word-wrap: break-word; text-transform: uppercase; font-size: 4em; margin: 0.5rem; }
p > a { font-weight: bold; }
footer { text-align: center; font-size: 0.8rem; }
footer em > span { font-style: normal; }

.social { display: flex; flex-direction: column; justify-content: center; margin-right: 1em; }
.social img { transition: 0.5s; }
.social img:hover { opacity: 0.5; }

@keyframes onload_hello {
	0% {
		opacity: 0;
		margin-top: -100px;
	}

	100% {
		opacity: 1;
		margin-top: 0;
	}
}