body {
  font-family: "Roboto", sans-serif;
}

button {
  outline: none;
}

.container {
  margin: 20;
}

#avatar {
  border-radius: 50%;
  height: 100px;
}

#social-buttons-container {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 15;
}

#social-buttons-container a {
  border-radius: 50%;
  font-size: 20;
  padding: 1;
  border: none;
  background-color: #efefef;
}

#social-buttons-container a img {
  height: 45;
}

@media (prefers-color-scheme: dark) {
  .light {
    display: none;
  }

  body {
    background-color: #141414;
    color: white;
  }

  #social-buttons-container a {
    background-color: #242424;
  }
}

#general-buttons-container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
}

#general-buttons-container a {
  border: none;
  padding: 15;
  font-size: 20;
  border-radius: 35px;
  margin-bottom: 10;
}

.icon {
  padding-right: 15;
}

:root {
  --gradient: linear-gradient(90deg, #ee6352, purple, #ee6352);
}

.instagram,
.twitter,
.spotify,
.soundcloud,
.applemusic,
.discord,
.youtube,
.snapchat,
.whatsapp,
.facebook,
.default,
.twitch,
.linkedin {
  background: #d6249f;
  background-size: 200%;
  animation: bg-animation 25s infinite;
  background-image: var(--gradient);
  color: white;
}

.instagram {
  background-image: radial-gradient(
    circle at 20% 200%,
    #fd5949 10%,
    #d6249f 60%,
    #285aeb 90%
  );
  color: white;
}

.twitter {
  background-image: linear-gradient(45deg, #66757f, #00acee, #36d8ff, #f5f8fa);
  color: black;
}

.tiktok {
  background: black;
  color: white;
}

.threads {
  background: black;
  color: white;
}

.snapchat {
  background-image: linear-gradient(120deg, #fffc00, #ffffff);
  color: black;
}

.default {
  background: #7b32b7;
  background: -webkit-linear-gradient(top left, #7b32b7, #1139a6);
  background: -moz-linear-gradient(top left, #7b32b7, #1139a6);
  background: linear-gradient(to bottom right, #7b32b7, #1139a6);
}

@keyframes bg-animation {
  0% {
    background-position: left;
  }

  50% {
    background-position: right;
  }

  100% {
    background-position: left;
  }
}

@keyframes colorChange {
  to {
    background-position: top left;
  }
}

.tiktok-text {
  color: #fff;
  font-family: sans-serif;
  animation: animate 0.5s ease-in-out infinite;
  padding: 5px;
}

@keyframes animate {
  0%,
  100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }

  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }

  50% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }

  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
}

.instagram-text {
  color: #f35626;
  background-image: -webkit-linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 10s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

a {
  text-decoration: none;
}