/*#header,#mainNav{left:0;width:100%;z-index:2;top:0}#mainNav .page-label p,.nav-link{color:var(--color-light)}.scroll-down #header{transform:translate(0,calc(-100 * 100vw / var(--page-width)))}#header{padding:calc(22 * 100vw / var(--page-width)) 0;position:fixed;transition:transform .5s}#mainNav{align-items:center;background-color:var(--color-main-bg);flex-direction:column;gap:calc(80 * 100vw / var(--page-width));height:100vh;position:absolute;display:none}.site-navigation-toggle{background-color:transparent;cursor:pointer;height:calc(22 * 100vw / var(--page-width));padding:0;position:absolute;right:calc(20 * 100vw / var(--page-width));top:calc(20 * 100vw / var(--page-width));width:calc(22 * 100vw / var(--page-width));z-index:1}#mainNav .page-label{border-bottom:2px solid var(--color-alt-bg);box-sizing:border-box;height:calc(58 * 100vw / var(--page-width));padding-top:calc(20 * 100vw / var(--page-width));position:relative;top:0}.nav-link{position:relative}.nav-link::after{background-color:var(--color-accent-sun);border-radius:50%;content:'';height:calc(8 * 100vw / var(--page-width));left:50%;position:absolute;top:calc(-24 * 100vw / var(--page-width));transition:transform .15s ease-in,filter .15s ease-in;width:calc(8 * 100vw / var(--page-width))}.nav-link:hover::after{filter:blur(0px);transform:translate(0,calc(30 * 100vw / var(--page-lg-width)))}.nav-link-2::after{background-color:var(--color-accent-grass)}.nav-link-3::after{background-color:var(--color-accent-sky)}.nav-link-4::after{background-color:var(--color-accent-mud)}.page-label{display:flex;justify-content:center;width:100%}.page-label p{color:var(--color-accent-mud);display:flex;gap:calc(14 * 100vw / var(--page-width));margin:0}.page-label span:nth-child(2n),.page-label-inverted span:nth-child(odd){margin-top:calc(10 * 100vw / var(--page-width))}.page-label-inverted span:nth-child(2n){margin-top:0!important}@media only screen and (min-width:768px){.scroll-down #header{transform:translate(0,calc(-100 * 100vw / var(--page-lg-width)))}#header{padding-bottom:calc(33 * 100vw / var(--page-lg-width));padding-top:calc(33 * 100vw / var(--page-lg-width))}#mainNav{background-color:transparent;display:flex;flex-direction:row;gap:calc(68 * 100vw / var(--page-lg-width));height:auto;margin:0 auto;position:relative;width:calc(1400 * 100vw / var(--page-lg-width))}#mainNav div{flex-grow:1;text-align:right}#mainNav .page-label,.site-navigation-toggle{display:none}.nav-link::after{filter:blur(3px);height:calc(10 * 100vw / var(--page-lg-width));left:50%;position:absolute;top:calc(-50 * 100vw / var(--page-lg-width));transition:transform .15s ease-in,filter .15s ease-in;width:calc(10 * 100vw / var(--page-lg-width))}.page-label{position:absolute;left:0;right:0;top:calc(33 * 100vw / var(--page-lg-width))}.page-label p{gap:calc(28 * 100vw / var(--page-lg-width))}.page-label span:nth-child(2n),.page-label-inverted span:nth-child(odd){margin-top:calc(16 * 100vw / var(--page-lg-width))}}*/

/*
  TODO
  - hook events (toggle)
  - add some transition on toggle (optional)
  - apply styles desktop vs touch
 */

.scroll-down #header {
  transform: translate(0, calc(-100 * 100vw / var(--page-width)));
}

@media only screen and (min-width: 768px) {
  .scroll-down #header {
    transform: translate(0, calc(-100 * 100vw / var(--page-lg-width)));
  }
}

#header {
  left: 0;
  padding: calc(22 * 100vw / var(--page-width)) 0;
  position: fixed;
  top: 0;
  transition: transform 0.5s ease;
  width: 100%;
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  #header {
    padding-bottom: calc(33 * 100vw / var(--page-lg-width));
    padding-top: calc(33 * 100vw / var(--page-lg-width));
  }
}

#mainNav {
  align-items: center;
  background-color: var(--color-main-bg);
  display: flex;
  flex-direction: column;
  gap: calc(80 * 100vw / var(--page-width));
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  display: none;
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  #mainNav {
    background-color: transparent;
    display: flex;
    flex-direction: row;
    gap: calc(68 * 100vw / var(--page-lg-width));
    height: auto;
    margin: 0 auto;
    position: relative;
    width: calc(1400 * 100vw / var(--page-lg-width));
  }

  #mainNav div {
    flex-grow: 1;
    text-align: right;
  }
}

#mainNav .page-label p {
  color: var(--color-light);
}

.site-navigation-toggle {
  background-color: transparent;
  cursor: pointer;
  height: calc(22 * 100vw / var(--page-width));
  padding: 0;
  position: absolute;
  right: calc(20 * 100vw / var(--page-width));
  top: calc(20 * 100vw / var(--page-width));
  width: calc(22 * 100vw / var(--page-width));
  z-index: 1;
}

#mainNav .page-label p {
  color: var(--color-light);
}

@media only screen and (min-width: 768px) {
  .site-navigation-toggle {
    display: none;
  }
}

#mainNav .page-label {
  border-bottom: 2px solid var(--color-alt-bg);
  box-sizing: border-box;
  height: calc(58 * 100vw / var(--page-width));
  padding-top: calc(20 * 100vw / var(--page-width));
  position: relative;
  top: 0;
}

@media only screen and (min-width: 768px) {
  #mainNav .page-label {
    display: none;
  }
}

.nav-link {
  color: var(--color-light);
  position: relative;
}

.nav-link::after {
  background-color: var(--color-accent-sun);
  border-radius: 50%;
  content: '';
  height: calc(8 * 100vw / var(--page-width));
  left: 50%;
  position: absolute;
  top: calc(-24 * 100vw / var(--page-width));
  transition: transform 0.15s ease-in, filter 0.15s ease-in;
  width: calc(8 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .nav-link::after {
    filter: blur(3px);
    height: calc(10 * 100vw / var(--page-lg-width));
    left: 50%;
    position: absolute;
    top: calc(-50 * 100vw / var(--page-lg-width));
    transition: transform 0.15s ease-in, filter 0.15s ease-in;
    width: calc(10 * 100vw / var(--page-lg-width));
  }
}

.nav-link:hover::after {
  filter: blur(0px);
  transform: translate(0, calc(30 * 100vw / var(--page-lg-width)));
}

.nav-link-2::after {
  background-color: var(--color-accent-grass);
}

.nav-link-3::after {
  background-color: var(--color-accent-sky);
}

.nav-link-4::after {
  background-color: var(--color-accent-mud);
}

.page-label {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .page-label {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(33 * 100vw / var(--page-lg-width));
  }
}

.page-label p {
  color: var(--color-accent-mud);
  display: flex;
  gap: calc(14 * 100vw / var(--page-width));
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .page-label p {
    gap: calc(28 * 100vw / var(--page-lg-width));
  }
}

.page-label span:nth-child(even) {
  margin-top: calc(10 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .page-label span:nth-child(even) {
    margin-top: calc(16 * 100vw / var(--page-lg-width));
  }
}

.page-label-inverted span:nth-child(even) {
  margin-top: 0 !important;
}

.page-label-inverted span:nth-child(odd) {
  margin-top: calc(10 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .page-label-inverted span:nth-child(odd) {
    margin-top: calc(16 * 100vw / var(--page-lg-width));
  }
}

/* Themes */
[data-theme='c_light'] .site-navigation-toggle path {
  fill: var(--color-light);
}

[data-theme='c_light'] .page-label p {
  color: var(--color-light);
}

[data-theme='dark'] .site-navigation-toggle path {
  fill: var(--color-dark);
}

[data-theme='c_dark'] .page-label p {
  color: var(--color-dark);
}

@media only screen and (min-width: 768px) {
  [data-theme='c_light'] .nav-link {
    color: var(--color-light);
  }

  [data-theme='c_dark'] .nav-link {
    color: var(--color-dark);
  }
}