/**
The purpose of this file is to provide you with options which you can enable on
the fly, or bake into your designs from scratch.

Everything is based on classes, so you don't need to worry too much about
cascades.
**/

.top-nav {
  align-items: center;
  background-color: rgb(35, 35, 35);
  background-color: rgba(235, 235, 235, 0.2);
  bottom: auto;
  flex-flow: row nowrap;
  height: clamp(55px, 7.45vh, 65px);
  justify-content: space-around;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.top-nav a {
  border: 1px solid transparent;
  border-radius: 1px;
  color: white;
  padding: 0 5vw 0 6vw;
}

.top-nav a:hover {
  background-color: rgb(45, 45, 45);
  background-color: rgba(35, 35, 35, 0.5);
  border: 1px solid rgb(135, 135, 135);
  border: 1px solid rgba(235, 235, 235, 0.3);
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  color: white;
  letter-spacing: var(--nav-anchor-letter-spacing);
}

.top-nav .active,
.top-nav .active:hover {
  background-color: rgb(35, 35, 35);
  background-color: rgba(35, 35, 35, 0.3);
  border: 1px solid rgb(135, 135, 135);
  border: 1px solid rgba(235, 235, 235, 0.3);
  border-radius: 1px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  color: white;
  letter-spacing: var(--nav-anchor-letter-spacing);
}

.top-nav a:after,
.top-nav a:before {
  display: none;
}

.middleground {
  left: 7.35vw;
  right: 7.35vw;
  top: clamp(55px, 7.45vh, 65px);;
}

/* Second variant */
.alt-nav {
  bottom: 35vh;
  color: var(--nav-color);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  left: 65%;
  position: absolute;
  right: 5%;
  top: 43.5vh;
}


.alt-nav:before {
  left: -1px;
  position: absolute;
  right: 100%;
  top: 0;
  transition-duration: var(--standard-transition-medium);
}

.alt-nav:after {
  left: -1px;
  position: absolute;
  right: 100%;
  top: 0;
  transition-duration: var(--standard-transition-medium);
}

.alt-nav a:before,
.alt-nav .active:before {
  left: 0;
  right: 100%;
}

.alt-nav a:hover:before,
.alt-nav a:focus:before,
.alt-nav .active:before {
  right: 0;
}

.alt-nav a:after {
  border-bottom: 0 solid transparent;
  border-left: 0 solid black;
  border-right: 0 solid transparent;
  border-top: 0 solid transparent;
  left: 0;
}

.alt-nav .active:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid black;
  border-right: 0 solid transparent;
  border-top: 15px solid transparent;
  left: 0;
}

.alt-align {
  left: 0;
  right: 35%;
  transform: scaleX(-1);
}

.alt-align .unfold {
  transform-origin: 50% 0;
  animation-name: unfold-flip;
}

.alt-layout .close-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 45%;
  left: 0;
  right: auto;
  z-index: 1000;
}


.top-nav .menu-items {
  display: flex;
  flex-flow: row nowrap;
}

@media only screen and (max-width: 768px) {
  .top-nav .menu {
    display: flex;
  }

  .top-nav .menu-items {
    background-color: rgb(35, 35, 35);
    background-color: rgba(35, 35, 35, 0.5);
    box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-flow: column nowrap;
    height: auto;
    left: auto;
    min-width: 35vw;
    position: absolute;
    right: 0;
    top: 50px;
    z-index: 1;
  }

  .top-nav .menu-state {
    display: none;
  }

  .top-nav > a {
    display: none;
  }

  .top-nav {
    position: fixed;
    align-items: center;
    background-color: transparent;
    bottom: auto;
    flex-flow: row nowrap;
    height: 50px;
    justify-content: space-around;
    left: 0;
    padding: 0;
    right: 0;
    top: 0;
    z-index: 100;
  }

  .top-nav::after {
    display: none;
  }

  .top-nav::before {
    display: none;
  }

  .top-nav a {
    height: 75px;
    flex: auto;
    margin: 0;
    width: auto;
  }

  .top-nav a:hover {
    height: 75px;
    letter-spacing: var(--nav-anchor-letter-spacing);
    margin: 0;
  }

  .top-nav a::before {
    left: 0;
    right: 0;
  }

  .top-nav a:hover:before {
    opacity: 0.9;
  }

  .viewable {
    left: 0;
    right: 0;
  }

  .alt-nav .menu {
    display: flex;
  }

  .alt-nav .menu-items {
    background-color: rgb(35, 35, 35);
    background-color: rgba(35, 35, 35, 0.5);
    box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-flow: column nowrap;
    height: auto;
    left: auto;
    min-width: 35vw;
    position: absolute;
    right: 0;
    top: 50px;
  }

  .alt-nav .menu-state {
    display: none;
  }

  .alt-nav > a {
    display: none;
  }

  .alt-nav {
    position: fixed;
    align-items: center;
    background-color: transparent;
    bottom: auto;
    flex-flow: row nowrap;
    height: 50px;
    justify-content: space-around;
    left: 0;
    padding: 0;
    right: 0;
    top: 0;
    z-index: 100;
  }

  .alt-nav::after {
    display: none;
  }

  .alt-nav::before {
    display: none;
  }

  .alt-nav a {
    height: 75px;
    flex: auto;
    margin: 0;
    width: auto;
  }

  .alt-nav a:hover {
    height: 75px;
    letter-spacing: var(--nav-anchor-letter-spacing);
    margin: 0;
  }

  .alt-nav a::before {
    left: 0;
    right: 0;
  }

  .alt-nav a:hover:before {
    opacity: 0.9;
  }

  .viewable {
    left: 0;
    right: 0;
  }
}