header {
      position: fixed;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      transition: all 1s ease-out;
}

header.animated {
      transform: translateX(-50%) translateY(4rem);
      opacity: 0;
}

header.move {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
}

nav ul {
      list-style: none;
      display: flex;
      gap: 0.25rem;
      padding: .35rem;
      border-radius: 8rem;
      background: rgba(153, 165, 179, 0.5);
      backdrop-filter: blur(3px);
}

footer {
      margin-top: 7rem;
      padding-bottom: 5rem;
}

.footer-links {
      display: flex;
      gap: 1rem;
}

.footer-link {
      text-decoration: underline;
}

@media (min-width: 720px) {
      footer {
            width: 100%;
            display: flex;
            justify-content: space-between;
      }
}

@media (min-width: 1048px) {

      footer {
            padding-bottom: 1rem;
            margin-top: 12rem;
      }
}

.navpoint,
.contrast {
      position: relative;
      overflow: hidden;
      display: block;
      background: var(--c-white);
      color: var(--c-black);
      border-radius: 5rem;
      transition: 0.5s;
      cursor: pointer;
      height: 2rem;
      width: max-content;
}

.contrast {
      width: 2rem;
}

.navpoint .mask-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
}

.navpoint .mask {
      width: 101%;
      height: 2rem;
      background: var(--c-black);
      -webkit-mask: url("/assets/icons/natureSmaller.png");
      mask: url("/assets/icons/natureSmaller.png");
      -webkit-mask-size: 5250px 32px;
      mask-size: 5250px 32px;
      -webkit-mask-position: -5175px 0;
      mask-position: -5175px 0;
      -webkit-animation: ani3 .7s steps(70) forwards;
      animation: ani3 .7s steps(70) forwards;
      transform: scale(1);
}

.navpoint:hover .mask,
.navpoint:focus-visible .mask {
      -webkit-animation: ani4 0.7s steps(70) forwards;
      animation: ani4 0.7s steps(70) forwards;
}

.navpoint:hover {
      color: var(--c-white);
}

.masnav {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .5rem .5rem;
      height: 2rem;
      z-index: 1;
}

.masnav svg circle {
      stroke: var(--c-black);
      transition: all .7s ease-out;
}

.masnav svg path {
      fill: var(--c-black);
      transition: all .7s ease-out;
}

.navpoint:hover .masnav svg circle,
.navpoint:focus-visible .masnav svg circle {
      stroke: var(--c-white);
}

.navpoint:hover .masnav svg path,
.navpoint:focus-visible .masnav svg path {
      fill: var(--c-white);
}

@-webkit-keyframes ani3 {
      from {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
      }

      to {
            -webkit-mask-position: -5175px 0;
            mask-position: -5175px 0;
      }
}

@keyframes ani3 {
      from {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
      }

      to {
            -webkit-mask-position: -5175px 0;
            mask-position: -5175px 0;
      }
}

@-webkit-keyframes ani4 {
      from {
            -webkit-mask-position: -5175px 0;
            mask-position: -5175px 0;
      }

      to {
            -webkit-mask-position: 0px 0;
            mask-position: 0px 0;
      }
}

@keyframes ani4 {
      from {
            -webkit-mask-position: -5175px 0;
            mask-position: -5175px 0;
      }

      to {
            -webkit-mask-position: 0px 0;
            mask-position: 0px 0;
      }
}