:root{
	/*  Custom fonts needs to be declared here and automatically main page typography change  */
	--ff-body: "";
	--ff-main: "";
	--ff-code: "";
}

.centered{
	display: flex;
	justify-content: center;
	background: transparent;
	width: 100vw;
	margin-top: 15%;
	animation: bounce 3.8s infinite;
	animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
}

@keyframes bounce {
	0% {
		box-shadow: 0 10px 30px -28px rgba(0,0,0,0.4);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 32px 50px -9px rgba(0,0,0,0.2);
		transform: translatey(-10px);
	}
	100% {
		box-shadow: 0 10px 30px -28px rgba(0,0,0,0.4);
		transform: translatey(0px);
	}
}

.copyright-div{
	text-align: center;
}

.link:hover, .link:focus{
	color: rgba(255,180,0,1);
}
.documentation:hover, .documentation:focus{
	color: rgba(255,100,0,1);
}

.ul-div{
	font-weight: bold;
	position: absolute;
	top: 0;
}

ul{
	list-style: none;
} 

.iam{
	font-weight: 600;
	color: rgba(255,100,0,1);
	transition: color, text-decoration;
	transition-timing-function: ease;
	transition-duration: 1600ms;
}

.iam:hover, .iam:focus{
	cursor: pointer;
	color: #000;
	text-decoration: underline;
}

@media (max-width: 700px){
	.ul-div{
		margin: 3rem 1rem;
	}
	.centered{
		margin: 5rem 0;
	}
	.semanticss-img{
		width: 100%;
		min-width: 300px;
		height: auto; 
		margin-top: 3rem;
	}
	.copyright-div{
		text-align: center;
		margin: 0 1rem;
	}
}