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);
  /* height: 50vh; */
  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 .btn {
  background-color: #03298941;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 25px;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  transition-duration: 0.3s;
  animation: pop-btn 0.3s both ease-in-out 0.5s;
}

.profile .content .text {
  /* margin-top: 20px; */
  margin-left: 50px;
}

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

@keyframes pop-btn {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.profile .content .btn:hover {
  box-shadow: 0 0 0 5px rgba(170, 187, 204, 0.5);
}

.profile .btn span{
  margin-top: 9px;
}







/* 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, #1BFFFF, #2E3192);
  background: linear-gradient(135deg, #1BFFFF, #1BFFFF 10%, #2E3192);
  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 #1BFFFF;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #1BFFFF;
  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, #18688d, #18688d 10%, #1BFFFF);
  transition: opacity .9s ease;
}

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


/* Book Profile */

.book-profile {
  width: 300px;
  height: 80px;
  position: relative;
  border-radius: 5px;
  background: #171a21;
  background: -webkit-linear-gradient(to right, #1BFFFF, #2E3192);
  background: linear-gradient(135deg, #9b15e9, #9b15e9 10%, #d30bc2);
  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 #9b15e9;
  margin-left: -30px;
  animation: rotate-photo 0.5s forwards ease-in-out;
  background-color: #9b15e9;
  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, #e688de, #d30bc2 50%, #9b15e9);
  transition: opacity .9s ease;
}

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



@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;
  }
}