.logo-img {
    height: 100%;
}


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: white;
  }


  #toppreloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: white;
  }


.white-button{
    border: none;
    background-color: white;
    border-radius: 15px;
    
}


.skill-name {
  font-family: poppins; color: rgb(78, 78, 78); ;font-weight: 400;font-size: 1rem; width: 4rem; margin: auto; margin: 0; text-align: center;
}

.skill-percent {
  font-family: poppins; color: rgb(78, 78, 78); ;font-weight: 400;font-size: .7rem; margin: auto; margin-left: 1rem; text-align: center;
}

.skill-bar {
  width: 10rem; background-color:rgba(143, 143, 143, 0.178); height: .7rem; border-radius: 20px; margin-left: 1rem;
}

.skill-progress {
  background-color: #FF0066; height: .7rem; border-radius: 15px;
}

.pink-button {
  transition-duration: .4s;
  border-radius: 10px;
  background-color: #FF0066;
  font-family: poppins;
  border: none;
  color: white;
}

.pink-button:hover {
  transition-duration: .4s;
  background-color: #eb005e;
}

.woosher-woosh {
  transition-duration: .5s;
}

.pink-button.woosher:hover .woosher-woosh {
  transition-duration: .5s;
  transform: translateY(.1rem) rotate(360deg);
}



.input-pink {
  border: solid 5px #FF0066;
  border-radius: 15px;
  padding: .5rem;
  overflow-y: auto;
}


::placeholder { 
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #00000031;
  opacity: 1; /* Firefox */
}