/*NAVBAR*/

@font-face {
  font-family: "sourgummy";
  src: url("../fonts/Sour_Gummy/SourGummy-VariableFont_wdth\,wght.ttf") format("truetype");
}

.navbar-toggler-icon {
  background-image: url(../img/menu.svg) !important;
}

.navbar-toggler {
  border-color: var(--fancy-text-color) !important;
  border-width: 2px !important;
}

.nav-link.active {
  text-decoration: underline;
  font-weight: bolder;
}



button.navbar-toggler {
  margin: 30px;
}

.navbar-nav {
  justify-content: center;
}

a.navbar {
  color: black !important;
  text-decoration: none !important;
}

a.navbar:hover {
  color: black !important;
  text-decoration: none !important;
  font-weight: bold;
}

a.navbar:visited {
  color: black !important;
  text-decoration: none !important;
}

nav {
  display: flex !important;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.navbar-item {
  font-family: sourgummy !important;
  color: var(--fancy-text-color) !important;
  font-size: larger;

  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;

  border-right: 0.2px solid var(--navbar-border);
}

.navbar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.navbar-item-logo {
  display: flex;
  width: 160px;
  height: 80px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar-item:hover {
  /*background-color: var(--navbar-hover);*/
  font-weight: bolder;
}

.nav-icon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-icon-inner {

  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
}

/*XXS*/
@media (max-width: 320px) {

  .navbar-item text {
    font-size: 18px;
  }

  .navbar-item {
    padding: 8px 10px;
    font-size: 20px;
  }

  .nav-icon-inner {
    padding: 2px 8px;
  }

  .nav-icon-inner svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/*XS*/
@media (min-width: 321px) and (max-width: 576px) {
  .navbar-item text {
    font-size: 18px;
  }

  .navbar-item {
    padding: 8px 10px;

  }

  .nav-icon-inner {
    padding: 2px 8px;
  }

  .nav-icon-inner svg {
    width: 16px !important;
    height: 16px !important;
  }
}


/*S*/
@media (min-width: 577px) and (max-width: 768px) {
  .navbar-item text {
    font-size: 18px;
  }

  .navbar-item {
    padding: 8px 10px;
  }

  .nav-icon-inner {
    padding: 2px 8px;
  }

  .nav-icon-inner svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/*M*/
@media (min-width: 769px) and (max-width: 992px) {

  .navbar-item {
    padding: 10px 12px;
  }

  .nav-icon-inner {
    padding: 2px 10px;
  }

  .nav-icon-inner svg {
    width: 18px !important;
    height: 18px !important;
  }

}

/*L*/

@media (min-width: 993px) and (max-width: 1200px) {
  .navbar-item {
    padding: 12px 14px;
  }

  .nav-icon-inner {
    padding: 2px 12px;
  }

  .nav-icon-inner svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/*XL*/
@media (min-width: 1201px) and (max-width: 1400px) {

  .navbar-item {
    padding: 14px 16px;
  }

  .nav-icon-inner {
    padding: 2px 14px;
  }

  .nav-icon-inner svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* XXL*/
@media (min-width: 1401px) {

  .navbar-item {
    padding: 20px;
  }

  .nav-icon-inner {
    padding: 2px 15px;
  }

  .nav-icon-inner svg {
    width: 24px !important;
    height: 24px !important;
  }
}

.nav-cont:not(.show):not(.collapsing) {
  transform: translate(-90px);
}