@import url("https://fonts.googleapis.com/css2?family=Exo+2&family=Montserrat:wght@500;700&display=swap");
:root {
  --normal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.13),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0934511),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0774939),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.065),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0525061),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0365489);
  --text-shadow: 0px 100px 145px rgba(0, 0, 0, 0.25),
    0px 41.7776px 60.5775px rgba(0, 0, 0, 0.179714),
    0px 22.3363px 32.3876px rgba(0, 0, 0, 0.149027),
    0px 12.5216px 18.1562px rgba(0, 0, 0, 0.125),
    0px 6.6501px 9.64265px rgba(0, 0, 0, 0.100973),
    0px 2.76726px 4.01252px rgba(0, 0, 0, 0.0702864);
}
html,
body {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
}

.profile-pic {
  width: 6em;
  height: 6em;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 2em;
  box-shadow: var(--normal-shadow);
}

.username {
  font-size: 3rem;
  text-decoration: none;
  margin: 0.5em 0em 1em 0em;
  color: white;
  text-shadow: var(--text-shadow);
  font-family: "Montserrat", sans-serif;
}

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

.link-items {
  background: coral;
  padding: 0.5em;
  font-size: 1.7rem;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  text-align: center;
  width: 20em;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  box-shadow: var(--normal-shadow);
  animation: gradient 5s ease infinite reverse;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
  font-family: "Exo 2", sans-serif;
  font-weight: bold;
}

.link-items:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 700px) {
  .link-items {
    width: 10em;
  }
  .links {
    gap: 2.5em;
  }
}

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