#footer{
    font-size: 14px;
}

#footer *{
    text-decoration: none;
}

#footer .mod-menu{
   list-style: none;
}

#footer{
    height: var(--size-mb);
    display: flex;
  justify-content: space-between;
  align-items: center;
    padding:0 var(--size-lr);
  z-index: 999;
}

.menu-open #footer{
    position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

#official-links{
    display: none;
}

#footer-menu .footer-menu__links,  .mod-menu{
    display: flex;
  justify-content: space-between;
  gap: 24px;
}

#footer-menu-button{
    display: none;
}
#social{
    user-select: none;
     position: fixed;
    left: 0;
  bottom: var(--size-mb);
     width: var(--size-lr);
    display: flex;
  flex-direction: column;
     align-items: center;
  gap: 25px;
}
  #social a{
        
  }
      #social a img{
            width: 15px;
            height: 15px;
      }
#footer-menu-button .arrow-tooltip{
  	display: none;
  	position: absolute;
    bottom: 180%;
    transform: translateX(-50%);
    left: 50%;
}
#footer-menu-button.show-arrows .arrow-tooltip{
  	display: block;
}
@media screen and (max-width: 1799px){
  #footer{
    font-size: 12px;
}
  #social{
      gap: 18px;
  }
    #social a img{
        width: 14px;
         height: 14px;
  }
}
@media screen and (max-width: 1599px){
    #footer-menu .footer-menu__links,  .mod-menu{
      gap: 12px;
    }
}
@media screen and (max-width: 1299px){
  	#footer{
    font-size: 10px;
}
  @media screen and (max-width: 1149px){
  	#footer{
    font-size: 9px;
}
  }
     @media screen and (min-width: 1000px and max-width: 1149px){
    #footer-menu .footer-menu__links, .mod-menu {
    gap: 4px;
}
}
@media screen and (max-width: 999px){
    #footer-menu{
      display: none;
      line-height: 140%;
    }
    .menu-open #footer-menu{
      display: block;
      position: fixed;
      bottom: calc(var(--size-mb) + 50px);
      right: var(--size-lr);
        overflow-y: hidden;
        height: 0px;
        width: 200px;
        transition: height 200ms;
    }
    .footer-menu-open.menu-open #footer-menu{
      height: 200px;
    }

    .menu-open .mod-menu{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
        position: absolute;
        top: 0;
        right: 0;
    }
    #social{
        display: flex;
      flex-direction: row;
      position: initial;
      width: auto;
  }
    #footer{
      font-size: 12px;
      flex-wrap: wrap;
      align-content: center;
        column-gap: 15px;
      row-gap: 5px;
    }
    .menu-open #footer-menu-button{
        display: block;
  }
    #footer-menu-button{
        width: 30px;
        height: 30px;
        position: fixed;
        bottom: var(--size-mb);
        right: var(--size-lr);
        cursor: pointer;
  }
        #footer-menu-button::before, #footer-menu-button::after{
          content: ' ';
            display: block;
            width: 15px;
            height: 2px;
            background-color: var(--color);
            position: absolute;
            bottom: 50%;
            transition: transform 200ms;
        }
        #footer-menu-button::before{
            right: 46%;
            transform: rotateZ(30deg);
        }
        #footer-menu-button::after{
          left: 46%;
            transform: rotateZ(-30deg);
        }
        .footer-menu-open #footer-menu-button::before{
          transform: rotateZ(-30deg);
        }
        .footer-menu-open #footer-menu-button::after{
            transform: rotateZ(30deg);
        }
}
@media screen and (max-width: 599px){
  #footer-menu-button{
      bottom: calc(var(--size-mb) / 2);
        transform: translateY(50%);
  }
    .menu-open #footer-menu {
      bottom: var(--size-mb);
  }
}
@media screen and (max-width: 449px){
    #copyright {
      font-size: 2.4vw;
  }
}