.SocialMedia
{
  height: 4vh;
  width: 4vh;
  position: relative;
  background: none;
}

.SocialMedia > *
{
  transition: opacity 0.2s ease;
}

#TopBar
{
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* pushes Left and Right apart */
  align-items: center;            /* vertically centers items */
  height: auto;                   /* grows to fit content */
  padding: 0 2vh;                 /* optional spacing from edges */
}

#TopBar_Left
{
  display: flex;
  align-items: center;
  justify-content: flex-start;    /* aligns its content to the left */
  height: auto;
}

#TopBar_Right
{
  display: flex;
  align-items: center;
  justify-content: flex-end;      /* aligns its content to the right */
  gap: 1vh;                       /* space between icons */
  height: auto;
}

#Language
{
  height: 4vh;
  width: auto;
  font-size: 3vh;
  line-height: 1;
  font-weight: bold;
  color: rgb(252,245,235);
}

#Facebook_Normal
{
  background-image: url("../assets/logos/facebook.png");
}

#Instagram_Normal
{
  background-image: url("../assets/logos/instagram.png");
}

#Youtube_Normal
{
  background-image: url("../assets/logos/youtube.png");
}

#Tiktok_Normal
{
  background-image: url("../assets/logos/tiktok.png");
}

#Facebook_Highlight
{
  background-image: url("../assets/logos/facebook_highlight.png");
}

#Instagram_Highlight
{
  background-image: url("../assets/logos/instagram_highlight.png");
}

#Youtube_Highlight
{
  background-image: url("../assets/logos/youtube_highlight.png");
}

#Tiktok_Highlight
{
  background-image: url("../assets/logos/tiktok_highlight.png");
}


@media (hover: hover) and (pointer: fine)
{
  #Language:hover
  {
    color: rgb(155, 150, 144);
    cursor: pointer;
  }

  .SocialMedia:hover .Highlighted
  {
    opacity: 1;
  }
}