/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-colorku: hsl(225, 95%, 56%);
  --black-colorku: hsl(225, 12%, 12%);
  --white-colorku: hsl(0, 0%, 100%);
  --text-colorku: hsl(225, 8%, 65%);
  --body-colorku: hsl(225, 100%, 99%);

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 1000000;
}

/*=============== navkuBAR ===============*/
.navku {
  position: fixed;
  bottom: 0rem;
  left: 0;
  right: 0;
  background-color: #2196f3;
  width: 100%;
  margin-inline: auto;
  box-shadow: 0 2px 16px hsla(228, 95%, 4%, .1);
  padding: 0.75rem 2rem env(safe-area-inset-bottom, 32px);
  min-height: 64px;
  border-top-left-radius: 0rem;
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
  border-bottom-left-radius: 0rem;
  z-index: var(--z-fixed);
}

.navku__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navku__link {
  color: var(--text-colorku);
  font-size: 1.25rem;
  transition: color .4s;
}

.navku__link:hover {
  color: var(--white-colorku);
}

/* Active link */
.active-link {
  border-bottom: 1px solid #28ff01;
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 1008px) {
  .navku {
    /*width: 768px;*/
    visibility: hidden;
  }
}