@keyframes slide-in {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

body {
	background-color:#000505;
	margin: 0;
    padding: 0;
	color: #FEFCFD;
	font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}

html {
	font-weight: normal;
	margin: 0;
    padding: 0;
}

#title {
	text-align: center;
	padding: 0;
	display:flex;
	align-self: center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 1em;
	animation:3.5s ease-out fade-in, 3s ease-out slide-in;
}

#links {
	text-align: center;
	padding: 1;
	display:flex;
	align-self: center;
	margin-left:auto;
	margin-right:auto;
	animation:4.5s ease-out fade-in, 4s ease-out slide-in;
}

#infobox {
	padding-top: 40px;
	flex-direction: column;
	animation: 1.5s ease-out slide-in;
	display: flex;
    align-items: center;
	justify-content: flex-start;
	max-width: fit-content; 
	height: 500px;
	aspect-ratio: 1;
	border-radius: 30px;
	background: #EC9DED;
	box-shadow: 5px 5px 5px black;
}

#infobg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	z-index: -1;
}

#info {
	display: flex;
	justify-content: center;
    align-items: center;
	height: 100vh;
	width: 100vw;
}

.links:hover {
	transform: scale(1.2);
}
.links { 
	padding: 1em;
	transition: transform .2s ease-in-out;
	animation: 3.5s ease-out fade-in, 2s ease-out slide-in;
}

.linkcontainer {
	transition: transform .2s ease-in-out;
	display: flex;
	animation: 3.5s ease-out fade-in, 2s ease-out slide-in;
}