body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; 
  margin:0;
  padding:0;
  color:#333;
  z-index: -2;
  background: linear-gradient(117deg, #FF6D00 0%, #9D4EDD 100%);
  animation: gradientAnimation 15s ease infinite;
  background-size: 200% 200%;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes test {
  0% {
    transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

#main {
  width:50%;
  min-width: 820px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255,255,255,0.1);
  border-radius: 25px;
  padding:20px;
}

#desc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:2em;
  padding:30px;
}

#socials {
  display: flex;
  justify-content: center;
  align-items: center;
}

#name {
  font-size:6em;
  font-weight:100;
  letter-spacing: -0.05em;
  margin:10px;
}

svg {
  width: 100px;
  height: 100px;
  margin-left: 20px;
  margin-right: 20px;
  opacity: 0.3;
}

svg:hover {
  opacity: 1;
}

a {
  text-decoration: none;
}