body {
  background-image: url(./img/bg-img.jpeg);
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.div-card {
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.103);
  position: relative;
  backdrop-filter: blur(10px);
}

/* Profile For All Link Boxes */

@keyframes show-profile {
  0% {
    width: 0;
  }
}

.avatar-img {
  transition: 0.5s transform ease;
}

.avatar-img:hover {
  transform: scale(1.2);
}

.profile .photo,
.profile .content {
  box-sizing: border-box;
}

@keyframes rotate-photo {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.content {
  position: absolute;
  padding: 10px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
}

.profile .content .text {
  margin-left: 50px;
}

.profile .content .text h3 {
  font-weight: normal;
  margin: 10px 0;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Steam Profile */

.steam-profile {
  width: 300px;
  height: 80px;
  position: relative;
  border-radius: 5px;
  background: #171a21;
  background: -webkit-linear-gradient(to right, #171a21, #23262e);
  background: linear-gradient(135deg, #171a21, #1e1f26, #1e1f26, #23262e);
  animation: show-profile 0.5s forwards ease-in-out;
  margin-left: 20px;
  box-shadow: 0 0 0.5rem #babbbc;
  cursor: pointer;
}

.steam-profile .photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #171a21;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #171a21;
  box-shadow: 0 0 0.5rem #babbbc;
}

.steam-profile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(135deg, #3d3f44, #3b3b42, #1e1f26, #171a21);
  transition: opacity .9s ease;
}

.steam-profile:hover::before {
  opacity: 1;
}

/* Discord Profile */

.discord-profile {
  width: 300px;
  height: 80px;
  position: relative;
  border-radius: 5px;
  background: #171a21;
  background: -webkit-linear-gradient(to right, #7289DA, #5865F2);
  background: linear-gradient(135deg, #7289DA, #7289DA 30%, #5865F2);
  animation: show-profile 0.5s forwards ease-in-out;
  margin-left: 20px;
  box-shadow: 0 0 0.5rem #babbbc;
  cursor: pointer;
}

.discord-profile .photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #7289DA;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #7289DA;
  box-shadow: 0 0 0.5rem #babbbc;
}

.discord-profile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(135deg, #4352f1, #4251f3, #7289DA, #7289DA);
  transition: opacity .9s ease;
}

.discord-profile:hover::before {
  opacity: 1;
}

/* Youtube Profile */

.youtube-profile {
  width: 300px;
  height: 80px;
  position: relative;
  border-radius: 5px;
  background: #171a21;
  background: -webkit-linear-gradient(to right, #FF0000, #FF0000);
  background: linear-gradient(135deg, #FF0000, #FF0000 30%, #000000);
  animation: show-profile 0.5s forwards ease-in-out;
  margin-left: 20px;
  box-shadow: 0 0 0.5rem #babbbc;
  cursor: pointer;
}

.youtube-profile .photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #FF0000;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #FF0000;
  box-shadow: 0 0 0.5rem #babbbc;
}

.youtube-profile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(135deg, #000000, #4e0101 30%, #FF0000);
  transition: opacity .9s ease;
}

.youtube-profile:hover::before {
  opacity: 1;
}

/* Twitter Profile */

.twitter-profile {
  width: 300px;
  height: 80px;
  position: relative;
  border-radius: 5px;
  background: #171a21;
  background: -webkit-linear-gradient(to right, #000000, #1B1B1B);
  background: linear-gradient(135deg, #000000, #000000 30%, #1B1B1B);
  animation: show-profile 0.5s forwards ease-in-out;
  margin-left: 20px;
  box-shadow: 0 0 0.5rem #babbbc;
  cursor: pointer;
}

.twitter-profile .photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #000000;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #000000;
  box-shadow: 0 0 0.5rem #babbbc;
}

.twitter-profile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(135deg, #3d3f44, #3b3b42, #1e1f26, #171a21);
  transition: opacity .9s ease;
}

.twitter-profile:hover::before {
  opacity: 1;
}

/* Book Profile */

.book-profile {
  width: 300px;
  height: 80px;
  position: relative;
  border-radius: 5px;
  background: #DAA520;
  background: -webkit-linear-gradient(to right, #DAA520, #B8860B);
  background: linear-gradient(135deg, #DAA520, #DAA520 30%, #B8860B);
  animation: show-profile 0.5s forwards ease-in-out;
  margin-left: 20px;
  box-shadow: 0 0 0.5rem #babbbc;
  cursor: pointer;
}

.book-profile .photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #DAA520;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #DAA520;
  box-shadow: 0 0 0.5rem #babbbc;
}

.book-profile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(135deg, #8B6914, #8B6914 30%, #DAA520);
  transition: opacity .9s ease;
}

.book-profile:hover::before {
  opacity: 1;
}

.book-profile .content .text h3 {
  color: white;
}

/* Additional styles */

.text-white-description {
  color: white;
  font-size: 1.25rem; /* Adjust the size as needed */
}

.bold-cartoon-font {
  font-family: 'Fredoka One', cursive;
  font-weight: bold;
}

/* Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin-bottom: 20px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:480px) {
  .twitter-profile,
  .youtube-profile,
  .steam-profile,
  .book-profile,
  .discord-profile {
    width: 0px !important;
  }
  .twitter-profile .photo,
  .youtube-profile .photo,
  .steam-profile .photo,
  .book-profile .photo,
  .discord-profile .photo {
    margin-left: -50px !important;
  }

  .avatar-img {
    width: 40% !important;
  }
}