/* ------------------------------ */
/* ------------------------------ */
/* FOOTER */
#Footer {
   position: fixed;
   display: flex;
   flex-direction: row;
   background-color: var(--background-a);
   z-index: 60;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: calc((90px + 1px + 5px + 1px) * var(--scale));
   border-top: calc(1px * var(--scale)) solid var(--border-color);
   border-bottom: calc(5px * var(--scale)) solid var(--border-color);
}

#Footer #FooterButton {
   display: none;
}

#Footer .logo {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--background-a);
   top: 0px;
   right: 0px;
   width: calc((90px + 1px) * var(--scale));
   height: calc((90px + 1px) * var(--scale));
   border-left: calc(1px * var(--scale)) solid var(--border-color);
}

#Footer .logo.x,
#Footer .logo:hover {
   cursor: pointer;
   background-color: var(--background-c);
}

#Footer #FooterMenu {
   display: flex;
   overflow: visible;
   gap: calc(15px * var(--scale));
   width: calc((100% - (90px + 2px) * var(--scale)));
   height: calc((90px + 1px) * var(--scale));
   padding: calc(15px * var(--scale));
}

#Footer #FooterMenu .link {
   position: relative;
   display: block;
   background-color: var(--background-a);
   color: var(--text-color-a);
   text-transform: uppercase;
   width: 100%;
   height: calc(60px * var(--scale));
   padding: calc(20px * var(--scale));
   border-top: calc(5px * var(--scale)) solid var(--border-color);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-4);
   line-height: calc((20px - 5px) * var(--scale));
}

#Footer #FooterMenu .link:is(.x,:hover),
#Footer .link:is(.x,:hover) {
   cursor: pointer;
   color: var(--primary-color);
   border-top: calc(5px * var(--scale)) solid var(--primary-color);
}

#Footer .link.arrow::after {
   content: var(--entity-link);
   position: absolute;
   top: calc((20px - 1px) * var(--scale));
   right: calc(20px * var(--scale));
}

#Footer #FooterMenu .link:is(.hl) {
   background-color: var(--primary-color);
   color: var(--text-color-b);
   border: calc(1px * var(--scale)) solid var(--primary-color);
   border-radius: 5px;
}

/* ------------------------------ */
/* TABLET */
@media only screen and (min-width: 500px) and (max-width: 1000px) {

   #Footer {
      justify-content: end;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: calc((90px + 1px + 5px + 1px) * var(--scale));
      border-top: calc(1px * var(--scale)) solid var(--border-color);
      border-bottom: calc(5px * var(--scale)) solid var(--border-color);
   }
   
   #Footer #FooterButton {
      display: flex;
      padding: calc(10px * var(--scale));
   }
   
   #Footer .logo {
      top: 0px;
      right: 0px;
      width: calc((90px + 1px) * var(--scale));
      height: calc((90px + 1px) * var(--scale));
      border-left: calc(1px * var(--scale)) solid var(--border-color);
      border-right: calc(1px * var(--scale)) solid var(--border-color);
   }
   
   #Footer #FooterMenu {
      position: fixed;
      display: flex;
      flex-direction: column;
      top: 0px;
      right: -300px;
      gap: calc(15px * var(--scale));
      width: 300px;
      height: 100vh;
      padding: calc(15px * var(--scale));
      background-color: var(--background-a);
      border-right: calc(5px * var(--scale)) solid var(--border-color);
      border-left: calc(1px * var(--scale)) solid var(--border-color);
      transition: all 250ms;
      z-index: 70;
   }
   
   #Footer #FooterMenu .link {
      width: 100%;
      height: calc(60px * var(--scale));
      padding: calc(20px * var(--scale));
      border-top: calc(5px * var(--scale)) solid var(--border-color);
      font-size: calc(var(--font-size-3) * var(--scale));
      font-weight: var(--font-weight-3);
      line-height: calc((20px - 5px) * var(--scale));
   }
   
   #Footer #FooterMenu .link:is(.x,:hover),
   #Footer .link:is(.x,:hover) {
      border-top: calc(5px * var(--scale)) solid var(--primary-color);
   }
   
   #Footer .link.arrow::after {
      top: calc((20px - 1px) * var(--scale));
      right: calc(20px * var(--scale));
   }
   
   #Footer #FooterMenu .link:is(.hl) {
      border: calc(1px * var(--scale)) solid var(--primary-color);
      border-radius: 5px;
   }

}

/* ------------------------------ */
/* MOBILE */
@media only screen and (max-width: 500px) {

   #Footer {
      justify-content: end;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: calc((90px + 1px + 5px + 1px) * var(--scale));
      border-top: calc(1px * var(--scale)) solid var(--border-color);
      border-bottom: calc(5px * var(--scale)) solid var(--border-color);
   }
   
   #Footer #FooterButton {
      display: flex;
      padding: calc(10px * var(--scale));
   }
   
   #Footer .logo {
      top: 0px;
      right: 0px;
      width: calc((90px + 1px) * var(--scale));
      height: calc((90px + 1px) * var(--scale));
      border-left: calc(1px * var(--scale)) solid var(--border-color);
      border-right: calc(1px * var(--scale)) solid var(--border-color);
   }
   
   #Footer #FooterMenu {
      position: fixed;
      display: flex;
      flex-direction: column;
      top: 0px;
      right: -300px;
      gap: calc(15px * var(--scale));
      width: 300px;
      height: 100vh;
      padding: calc(15px * var(--scale));
      background-color: var(--background-a);
      border-right: calc(5px * var(--scale)) solid var(--border-color);
      border-left: calc(1px * var(--scale)) solid var(--border-color);
      transition: all 250ms;
      z-index: 70;
   }
   
   #Footer #FooterMenu .link {
      width: 100%;
      height: calc(60px * var(--scale));
      padding: calc(20px * var(--scale));
      border-top: calc(5px * var(--scale)) solid var(--border-color);
      font-size: calc(var(--font-size-3) * var(--scale));
      font-weight: var(--font-weight-3);
      line-height: calc((20px - 5px) * var(--scale));
   }
   
   #Footer #FooterMenu .link:is(.x,:hover),
   #Footer .link:is(.x,:hover) {
      border-top: calc(5px * var(--scale)) solid var(--primary-color);
   }
   
   #Footer .link.arrow::after {
      top: calc((20px - 1px) * var(--scale));
      right: calc(20px * var(--scale));
   }
   
   #Footer #FooterMenu .link:is(.hl) {
      border: calc(1px * var(--scale)) solid var(--primary-color);
      border-radius: 5px;
   }

}