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

body {
	overflow: visible;
	background: black;
	font-family: 'Ubuntu', sans-serif;
}

#background {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}



.title {
	display: flex;
	justify-content: center;
	color: white;
	font-size: 70px;
	padding: 100px;
	transition: 1s all;
	-webkit-animation: glow 5s ease-in-out infinite alternate;
  	-moz-animation: glow 5s ease-in-out infinite alternate;
  	animation: glow 5s ease-in-out infinite alternate;
	letter-spacing: 10px;
}

@keyframes rot {
	0% {
		transform: translateY(-90px) rotate(10deg);
	}
	50% {
		transform: translateY(-90px) rotate(-10deg);
	}
	100% {
		transform:  translateY(-90px) rotate(10deg);
	}
}

@keyframes ls {
	0% {
		letter-spacing: 0px;
	}
	100% {
		letter-spacing: 10px;
	}
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px gray, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 -0px #fff;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px gray, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff;
  }
}

.logo {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 10%;
  	border-radius: 100px;
  	animation: rot 4s infinite both;
  	transition: 1s all;
  	transform: translateY(90px);
}

.title:hover {
	font-weight: bold;
	letter-spacing: 20px;
}


.socials {
	display: flex;
	align-items: center;
	justify-content: space-around;

}

.social{
	width: 60px;
}

.social:hover{
	cursor: pointer;
}