@import url("https://fonts.googleapis.com/css2?family=Exo+2&family=Montserrat:wght@500;700&display=swap");
html {
  min-height: 100vh;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #95ac18 50%, #d63652 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

.content {

  box-sizing: border-box;
  left: 50%;
  padding: 2em 4em;
  position: fixed;
  text-align: center;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
}

h1 {
  font-family: 'Open Sans', sans-serif;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.profile-pic {
  width: 6em;
  height: 6em;
  object-fit: cover;
  border-radius: 50%;

}

.username {
  font-size: 1rem;
  text-decoration: none;
  margin: 0.5em 0em 1em 0em;
  color: white;
  text-shadow: 0px 9px 152px rgba(0, 0, 0, 0.39),
    0px 4.16097px 70.2742px rgba(0, 0, 0, 0.289253),
    0px 2.38081px 40.2093px rgba(0, 0, 0, 0.244445),
    0px 1.44514px 24.4068px rgba(0, 0, 0, 0.21058),
    0px 0.870759px 14.7061px rgba(0, 0, 0, 0.17942),
    0px 0.484895px 8.18933px rgba(0, 0, 0, 0.145555),
    0px 0.20855px 3.52218px rgba(0, 0, 0, 0.100747);
  font-family: 'Open Sans', sans-serif;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  
   
  
}

.link-items {
  background: coral;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  text-align: center;
 width: 20em;
  
  display: flex;
  justify-content: center;
  align-items: center;
  /*gap: 0.2em;*/
  background-color: rgba(66, 110, 255, 0.2);
  padding: 13px;
  font-weight: 300;
  transition: all .25s cubic-bezier(.08, .59, .29, .99);

  
  
}

.link-items:hover {
  /*transform: scale(1.1);*/
  
  background-color: rgba(255, 255, 255, 0.3);
    color: #000000;
    border: none;
}

@media screen and (max-width: 700px) {
  .username {
    font-size: 1rem;
  }
  .link-items {
    width: 10em;
  }
  .links {
    gap: 1.5em;
  }
  .content {
    margin: 1em 0em;
    padding: 1em;
  }
}