/* Load Ubuntu font from Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

/* Here the magic starts */

body {
	color: white; 
	font-family: 'Ubuntu', sans-serif; font-size: 36px;
	background: radial-gradient(black,#301934); background-size: 128px 128px;
	animation: 8s infinite linear backMotion;
}

a {
	text-decoration: none;
	color: white; text-shadow: 0px 0px 10px white;
	transition: 0.5s ease;
}
a:hover {
	color: blue; text-shadow: 0px 0px 20px blue;transition: 0.5s ease;
}
a:active {
	color: red; text-shadow: 0px 0px 20px red;transition: 0.5s ease;	
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

hr {
	width: 60%;
	color: black;
	transition: 0.5s ease;
}
hr:hover {
	width: 80%;
	color: white;
	transition: 0.5s ease;
}

.title {
	font-size: 64px;
}

.subtitle {
	font-size: 28px;
}

.bigButton {
	background: black; color: white; font-size: 32px;
	border: 1px solid white; border-radius: 10px;
	box-shadow: 0px 0px 10px black; text-shadow: 0px 0px 10px white;
	padding: 16px 40px 16px 40px;
	transition: 0.5s ease;
}
.bigButton:hover {
	background: black; color: blue;
	border: 1px solid blue;
	box-shadow: 0px 0px 20px blue; text-shadow: 0px 0px 10px blue;
	padding: 16px 80px 16px 80px;
	transition: 0.5s ease;
}
.bigButton:active {
	background: black; color: red;
	border: 1px solid red;
	box-shadow: 0px 0px 20px red; text-shadow: 0px 0px 10px red;
	padding: 16px 80px 16px 80px;
	transition: 0.5s ease;
}

.content {
	background: white; background-size: 100%; color: black;
	font-size: 28px;
	padding: 32px;
	text-align: left;
}

.footer {
	font-size: 18px;
	filter: blur(50px);
	animation: unblur 4s ease 4s 1 normal forwards;
}

/* Some templates with default values from which we'll start animating our elements :) */

.ghost {
	opacity: 0%;
}

.soap {
	filter: blur(40px);
}

/* Animations */

@keyframes backMotion {
	0% {
			background-position: 0px 0px;
	}
	
	50% {

	}
	
	100% {
			background-position: 1024px 1024px;
	}
}

@keyframes unblur {
	to {
			filter: blur(0px);
	}
}

@keyframes fadein {
	to {
			opacity: 100%;
	}
}