/* =========================================================
   ASIDE
   ========================================================= */

.asideSocial {
  width: 100px;
  height: 800px;
  background-color: firebrick;

  display: flex;
  align-items: center;

  position: absolute;
  z-index: 1;
  margin-left: 88vw;
}

/* =========================================================
   SOCIAL CONTAINER
   ========================================================= */

.asideSocial {
  width: 50px;
  height: 250px;

  margin-top: 500px;
  padding: 10px;

  background-color: rgb(242, 241, 241);

  border-radius: 0 5px 5px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 12px;

  transition:
    width 0.5s ease,
    height 0.5s ease,
    border-radius 0.6s ease,
    padding 0.5s ease,
    transform 0.5s ease;
  /* display: none; */
}

/* =========================================================
   SOCIAL LINKS
   ========================================================= */

.asideSocial > a {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  border-radius: 50%;

  transition:
    transform 0.45s ease,
    background-color 0.3s ease;
}

/* =========================================================
   ICON
   ========================================================= */

.asideSocial > a > span {
  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.asideSocial > a > span > img {
  width: 25px;
  height: 25px;

  display: block;

  object-fit: contain;

  transition:
    transform 0.45s ease,
    opacity 0.3s ease;
}



/* =========================================================
   ICON HOVER
   ========================================================= */

.asideSocial > a:hover {
  background-color: white;

  transform: scale(2) !important;
}

@media (min-width : 1200px){

  .asideSocial {
  align-items: top;
  margin-left: 96vw;
  top: 0px;

}
}