:root {
  --shadow: rgba(0, 0, 0, 0.5);
  --boncy-func: linear(0.00, -0.0501, 0.0378, 0.214, 0.426, 0.632, 0.813, 0.956, 1.05, 1.11, 1.14, 1.14, 1.12, 1.09, 1.07, 1.04, 1.02, 1.00, 0.990, 0.984, 0.982, 0.982, 0.985, 0.988, 0.992, 0.996, 0.998, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00)
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  inset: 0;
  background: var(--background);
  background: var(--gray-100);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;

  font-size: 2rem;
  font-weight: 700;

  transition: 200ms;
  z-index: 999;
}

.navbar-item {
  display: inline-flex;
  align-items: center;
  min-width: 20rem;
  margin-left: 3rem;
}

.navbar-icon {
  fill: var(--text);
  fill: var(--blue);
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}

.navbar-icon-selected {
  fill: var(--purple);
}


#navbar-toggle::before {
  content: "";
  position: absolute;
  top:    -2rem;
  bottom: -1.5rem;
  left:   -1.5rem;
  right:  -2rem;
  border-radius: 50%;
}
#navbar-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  corner-shape: round;
  border-radius: 50%;
  background-color: var(--green);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
  box-shadow: 0 0 0.5rem -0rem var(--shadow);
  cursor: pointer;
  transition: scale 300ms var(--boncy-func);
  z-index: 1000;
  /* COPIED FROM https://pqina.nl/blog/css-spring-animation-with-linear-easing-function/ */
}
#navbar-toggle:hover {
  scale: 125%;
  box-shadow: 0 0 0.75rem -0.2rem var(--shadow);
}
#navbar-toggle:active {
  scale: 100%;
}
#navbar-toggle.selected {
  background-color: var(--red);
}

#navbar-toggle-bars {
  scale: 0.9;
}

.navbar-toggle-icon {
  position: absolute;
  fill: white;
  width:  66%;
  height: 66%;
  transition: all 300ms, transform 700ms var(--boncy-func);
}
.navbar-toggle-icon.rotated {
  transform: rotate(-135deg);
}

.valign {
  display: inline-flex;
  align-items: center;
}

.navbar-language-selector {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.navbar-language {
  display: inline-flex;
  align-items: center;
  font-size: 100;
  text-decoration: none;
}
.lang-flag {
  width: 1.33rem;
  height: 1rem;
}
.lang-flag-big {
  border: 1px solid var(--secondary);
}

.navbar-item {
  user-select: none;
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
}


.a-nodecor {
  text-decoration: none;
}

@media (min-width: 780px) {
  .nodesktop {
    display: none;
  }
}

@media (max-width: 779px) {
  .nomobile {
    display: none;
  }

  .navbar-item {
    margin-left: 0;
  }

  #navbar-toggle {
    height: 2.5rem;
    width: 2.5rem;
  }
}