/*
 * CSS for socials styles
 */
.socials {
  display: flex;
  flex-direction: column; /* Arrange items in a vertical column */
  align-items: center; /* Align items horizontally */
}

.icon-container .fa-solid {
  display: none;
}

.icon-container:hover .fa-regular {
  display: none;
}

.icon-container:active .fa-regular {
  display: none;
}

.icon-container:hover .fa-solid {
  display: inline-block;
}

.icon-container:active .fa-solid {
  display: inline-block;
}

@media (max-width: 768px) {
  .socials {
    position: relative;
    top: -20px;
    left: 8rem;
    transform: scale(1.1);
  }
}

@media (min-width: 950px) {
  .socials {
    position: relative;
    top: 4rem;
    left: 1rem;
  }
}

@media (max-width: 425px) {
  .socials {
    position: relative;
    top: -65px;
    left: 8rem;
    transform: scale(1.1);
  }

  .special-top {
    margin-bottom: 0;
  }
}