/*
  This work is licensed under the Creative Commons Attribution 4.0
  International License. To view a copy of this license,
  visit http://creativecommons.org/licenses/by/4.0/ or send a letter to
  Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Comforter&family=DM+Sans&family=Lato&display=swap');

:root {
  --glam-background-color: rgb(35, 35, 35);
  --glam-color: rgb(235, 235, 235);
  --glam-color-muted: rgb(205, 205, 205);

  --glam-links-color: rgb(135, 235, 235);
  --glam-docs-color: var(--glam-links-color);

  --glam-footer-bg-color: rgba(35, 35, 35, .5);
  --glam-footer-border-color: rgba(235, 235, 235, .2);
  --glam-footer-p-box-shadow: 0 5px 8px rgba(0, 0, 0, .3);

  --glam-label-bottom: 0;
  --glam-label-top: 0;
  --glam-label-bg-bottom: 45%;
  --glam-label-bg-top: 45%;

  --glam-style-0: blur(0) brightness(1.35) contrast(1.235) grayscale(1);
  --glam-style-1: blur(0) brightness(1) contrast(1) grayscale(0);

  --glam-transition-normal: all .5s ease-in-out;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: var(--glam-background-color);
  color: var(--glam-color);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  line-height: 3ch;
  transition: all .5s ease-in-out;
}

button {
  color: var(--glam-color);
}

.glam-style0 {
  --glam-style-0: blur(0) brightness(1.35) contrast(1.235) grayscale(1);
  --glam-style-1: blur(0) brightness(1) contrast(1) grayscale(0);
}

.glam-style1 {
  --glam-style-0: blur(0) brightness(1) contrast(1) grayscale(0);
  --glam-style-1: blur(0) brightness(1.35) contrast(1.235) grayscale(1);
}

.glam-dark {
  --glam-background-color: rgb(5, 5, 5);
  --glam-footer-bg-color: rgba(5, 5, 5, .5);
}

.glam-light {
  --glam-background-color: rgb(235, 235, 235);
  --glam-color: rgb(35, 35, 35);
  --glam-color-muted: rgb(85, 85, 85);
  --glam-footer-bg-color: rgba(235, 235, 235, .5);
  --glam-footer-border-color: rgba(35, 35, 35, .2);
  --glam-footer-p-box-shadow: 0 5px 8px rgba(0, 0, 0, .1);
  --glam-links-color: rgb(35, 135, 135);
  --glam-docs-color: rgb(35, 135, 135);
}

.glam-mid {
  --glam-background-color: rgb(85, 85, 85);
  --glam-color: rgb(215, 215, 215);
  --glam-footer-bg-color: rgba(85, 85, 85, .5);
}

.glam-footer,
.glam-nav,
.glam-title {
  align-items: center;
  display: flex;
  position: fixed;
  bottom: calc(100% - 50px);
  top: 0;
}

.glam-footer,
.glam-footer p,
.glam-footer::after {
  transition: var(--glam-transition-normal);
}

.glam-footer {
  bottom: 0;
  background-color: var(--glam-footer-bg-color);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--glam-footer-border-color);
  box-shadow: 0 0 9px rgba(0, 0, 0, .4);
  justify-content: space-between;
  left: 0;
  padding: 0 35px;
  right: 0;
  top: calc(100% - 50px);
}

.glam-footer::after {
  background-color: var(--glam-background-color);
  bottom: 0;
  content: '';
  filter: blur(7px);
  left: 0;
  opacity: .5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.glam-footer p {
  background-color: var(--glam-footer-bg-color);
  border: 1px solid var(--glam-footer-border-color);
  border-radius: 2px;
  box-shadow: var(--glam-footer-p-box-shadow);
  margin: 0 15px;
  padding: 5px 15px;
  text-align: center;
  width: clamp(23.735%, 25vw, 50%);
}

.glam-footer p::after,
.glam-footer p::before {
  content: '•';
  margin: 0 15px;
}

.glam-title {
  backdrop-filter: blur(18px);
  font-family: 'Lato', sans-serif;
  font-size: .735rem;
  justify-content: flex-end;
  left: 0;
  letter-spacing: .365em;
  padding: 3px 15px;
  right: 90%;
  text-transform: uppercase;
  z-index: 3;
}

.glam-ose {
  background-color: var(--glam-color);
  border-radius: 1.365em;
  color: var(--glam-background-color);
  font-size: .935em;
  font-weight: 800;
  inset: auto 0 auto 105% !important;
  letter-spacing: .2em;
  padding: 5px 15px 6px 18px;
  position: absolute;
  transition: 1s;
  white-space: nowrap;
  width: fit-content;
}

.glam-ose::before {
  aspect-ratio: 1/1;
  background-color: var(--glam-color);
  border-radius: 50%;
  content: '';
  left: 103.65%;
  top: 10px;
  position: absolute;
  width: 15px;
}

.glam-ose::after {
  aspect-ratio: 1/1;
  background-color: var(--glam-color);
  border-radius: 50%;
  content: '';
  left: 117.65%;
  top: 10px;
  position: absolute;
  width: 8px;
}

.glam-nav {
  backdrop-filter: blur(18px);
  justify-content: flex-end;
  left: 10%;
  right: 0;
  z-index: 2;
}

.glam-nav-shadow {
  background-color: rgba(0, 0, 0, .8);
  filter: blur(1px);
  inset: -5px 0 calc(100% - 48px) 0;
  position: fixed;
}

.glam-nav-shadow::after {
  background-color: var(--glam-background-color);
  content: '';
  filter: blur(2px);
  inset: 0;
  opacity: .95;
  position: absolute;
}

.glam-menu {
  color: var(--glam-color);
  display: flex;
  justify-content: flex-end;
  letter-spacing: .935ch;
  font-size: 1.365ch;
  text-transform: uppercase;
  list-style: none;
  padding: 0 15px 0 0;
}

.glam-menu li {
  align-items: center;
  align-self: center;
  display: flex;
  justify-content: center;
  height: 50px;
}

.glam-menu a {
  align-items: center;
  color: var(--glam-color);
  display: flex;
  font-weight: 600;
  height: 50px;
  letter-spacing: 1.35ch;
  padding: 0 15px 0 25px;
  position: relative;
  text-decoration: none;
  transition: all .735s ease-in-out;
}

.glam-menu a:hover {
  background-color: var(--glam-color);
  color: var(--glam-background-color);
  opacity: 1;
}

.selected {
  position: relative;
  margin: 0 25px;
}

.selected::before,
.selected::after {
  background-color: var(--glam-color);
  border-radius: 100%;
  content: '';
  height: 5px;
  opacity: .5;
  position: absolute;
  transition: all .5s ease-in-out;
  width: 5px;
}

.selected::before {
  left: -3px;
}

.selected::after {
  right: -3px;
}

.selected:hover:before {
  left: -8px;
}

.selected:hover:after {
  right: -8px;
}

.selected a,
.selected a:hover {
  font-weight: 200;
  opacity: .7;
  padding: 8px 15px 8px 23px;
}

.selected a:hover {
  background-color: var(--glam-background-color);
  color: var(--glam-color);
}

.selected a::after,
.glam-menu a::after {
  bottom: 9%;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 90%;
  transition: all .735s ease-in-out;
}

.glam-menu a::after {
  background-color: transparent;
}

.selected a::after {
  background-color: var(--glam-color);
}

.glam-menu a:hover:after {
  background-color: var(--glam-background-color);
  left: 21.735%;
  opacity: .5;
  right: 21.735%;
  z-index: 1;
}

.selected a:hover:after {
  background-color: var(--glam-color);
  left: 0;
  opacity: .1;
  right: 0;
}

.glam-main {
  margin-top: 50px;
}

.glam-section {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  font-size: 2.5ch;
  justify-content: flex-start;
  margin: 0 3px 0 3px;
}

.glam-text-section {
  color: var(--glam-color-muted);
  font-size: 2.635ch;
  letter-spacing: .1ch;
  line-height: 4ch;
  margin: .5vh 3.325vw;
  padding: 5ch;
}

.glam-text-section a {
  color: var(--glam-links-color);
  position: relative;
  text-decoration: none;
}

.glam-text-section a::after {
  background-color: var(--glam-links-color);
  bottom: -21.35%;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scale(0);
  transform-origin: right;
  transition: all 1.35s ease-in-out;
}

.glam-text-section a:hover:after {
  transform-origin: center;
  transform: scale(1);
  transition: all .5s ease-in-out;
}

.glam-text-section a::before {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--glam-links-color);
  bottom: -39.35%;
  content: '';
  height: 0;
  position: absolute;
  right: 17.5%;
  transform: scale(0);
  transform-origin: right;
  transition: all 1.35s ease-in-out;
  width: 0;
}

.glam-text-section a:hover::before {
  right: 0;
  transform-origin: center;
  transform: scale(1);
  transition: all .5s ease-in-out;
}

.glam-text-section a:active:after {
  left: 15%;
  right: -15%;
  transform-origin: center;
  transform: scale(1);
  transition: all .5s ease-in-out;
}

.glam-text-section a:active::before {
  right: -15%;
  transform-origin: center;
  transform: scale(1);
  transition: all .5s ease-in-out;
}

.glam-text-section h2,
.glam-text-section h3 {
  color: var(--glam-color-muted);
  font-family: 'Bebas Neue', cursive;
  font-size: 3ch;
  letter-spacing: .5ch;
  line-height: 4ch;
  margin: 1.765vh 0 .5ch 0;
}

.glam-text-section h3 {
  font-size: 2.35ch;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

.glam-text-section h3:after {
  background-color: var(--glam-color-muted);
  content: '';
  height: 3px;
  left: 7.375%;
  opacity: .3;
  position: absolute;
  right: 7.35%;
  top: 105%;
}

.glam-text-section h3:before {
  background-color: var(--glam-color-muted);
  border-radius: 50%;
  content: '';
  height: 10px;
  left: 0;
  opacity: .3;
  position: absolute;
  top: 96.35%;
  width: 10px;
}

.glam-text-section p {
  margin: 15px 0 0 0;
}

.glam-text-list {
  margin: 2.35% 0 0 5%;
  list-style: none;
}

.glam-text-list li {
  display: block;
  line-height: 3ch;
  margin: 2ch 0;
  padding: 0 0 0 35px;
  position: relative;
}

.glam-text-list li::before {
  background: var(--glam-docs-color);
  border-radius: 100%;
  bottom: calc(50% - 5px);
  content: '';
  height: 8px;
  left: 0;
  position: absolute;
  top: calc(50% - 5px);
  width: 8px;
}

.glam-figure {
  align-items: center;
  aspect-ratio: 1/2;
  border: 1px solid rgba(235, 235, 235, .1);
  display: flex;
  flex-grow: 1;
  justify-content: center;
  max-width: 25%;
  position: relative;
  overflow: hidden;
}

.glam-figure img {
  filter: var(--glam-style-0);
  height: 100%;
  transition: all .725s ease-in-out;
  width: 100%;
}

.glam-figure:hover img {
  filter: var(--glam-style-1);
}

.labels-to-top {
  --glam-label-bottom: calc(100% - 50px);
  --glam-label-top: 0;
  --glam-label-bg-bottom: 0;
  --glam-label-bg-top: 0;
}

.labels-to-bottom {
  --glam-label-bottom: 0;
  --glam-label-top: calc(100% - 50px);
  --glam-label-bg-bottom: 0;
  --glam-label-bg-top: calc(100% - 50px);
}

.glam-figure figcaption {
  align-items: center;
  bottom: var(--glam-label-bottom);
  display: flex;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15ch;
  justify-content: center;
  left: 0;
  letter-spacing: .735ch;
  opacity: 0;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: var(--glam-label-top);
  transform-origin: center;
  transform: scale(.765);
  transition: all .935s ease-in-out;
}

.glam-figure:hover figcaption {
  opacity: 1;
  transform: scale(1);
}

.glam-figure figcaption::after {
  background-color: var(--glam-background-color);
  bottom: var(--glam-label-bg-bottom);
  content: '';
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: var(--glam-label-bg-top);
  transform: scaleY(15) scaleX(2);
  transform-origin: center;
  transition: all .735s ease-in-out;
  z-index: -1;
}

.glam-figure:hover figcaption::after {
  transform: scaleY(1) scaleX(2);
  opacity: 1;
}

.glam-nav-menu-button,
.glam-theme-button {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--glam-color);
  display: flex;
  font-size: .8rem;
  font-weight: 400;
  height: 48px;
  justify-content: center;
  margin: 0 10px 0 0;
  position: relative;
  transition: all .5s ease-in-out;
  width: 48px;
}

.glam-nav-menu-button {
  display: none;
  transform: rotate(90deg);
}

.glam-nav-menu-button:after,
.glam-theme-button::after {
  border: 1px solid var(--glam-footer-border-color);
  content: '';
  inset: 8%;
  position: absolute;
}

.glam-nav-menu-button:after {
  border: 1px solid var(--glam-footer-border-color);
  content: '';
  inset: 8% 8% 3% 8%;
  position: absolute;
}

.glam-nav-menu-button:hover,
.glam-theme-button:hover {
  background-color: var(--glam-color);
  border: 18px solid transparent;
  border-radius: 5px;
  color: var(--glam-background-color);
  transform: scale(.8);
}

.glam-theme-menu {
  display: none;
  flex-flow: column;
  list-style: none;
  position: absolute;
  top: 100%;
  width: 150px;
}

.open {
  display: flex;
}

.overflow {
  display: none;
}

.glam-theme-menu li {
  height: 50px;
}

.glam-theme-menu button,
.glam-theme-menu a {
  align-items: center;
  color: var(--glam-color);
  background-color: var(--glam-background-color);
  border: none;
  border-right: 15px solid transparent;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content:flex-end;
  width: 100%;
  transition: all .35s ease-in-out;
}

.glam-theme-menu a {
  color: var(--glam-docs-color);
  text-decoration: none;
}

.glam-theme-menu button:hover,
.glam-theme-menu a:hover {
  align-items: center;
  background-color: var(--glam-color);
  color: var(--glam-background-color);
}

.glam-theme-menu .active {
  border-left: 15px solid;
  position: relative;
  pointer-events: none;
  transition: all .35s ease-in-out;
}

.glam-theme-menu .active:hover {
  border-color: var(--glam-background-color);
}

.glam-theme-menu .active:after {
  color: var(--glam-background-color);
  content: 'active';
  font-size: 10px;
  left: -28px;
  letter-spacing: .195ch;
  position: absolute;
  text-transform: uppercase;
  transform: rotate(-90deg);
  top: 13px;
  transition: all .35s ease-in-out;
}

.glam-theme-menu .active:hover:after {
  color: var(--glam-color);
}

.glam-theme-menu {
  border: 1px solid var(--glam-footer-border-color);
  border-top: none;
}

.divider {
  background-color: var(--glam-color);
  height: 1px;
}

.greyed {
  filter: grayscale(1);
}

@media only screen and (max-width: 1024px) {
  .glam-header .glam-icon {
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%;
  }

  .glam-nav-menu-button:hover:after,
  .glam-theme-button:hover:after {
    border: 1px solid var(--glam-footer-border-color);
    display: none;
  }

  .glam-title {
    border: 1px solid var(--glam-footer-border-color);
    border-right: none;
    justify-content: center;
    right: 76.65%;
    z-index: 3;
  }

  .glam-nav {
    border: 1px solid var(--glam-footer-border-color);
    left: 9.35%;
  }

  .glam-ose {
    padding: 5px 18px 3px 18px;
    position: fixed;
    scale: .85;
  }

  .glam-menu-closer {
    display: none;
  }

  .glam-menu {
    margin: -2px;
    border: 1px solid var(--glam-footer-border-color);
    border-radius: 0 0 0 18px;
    border-right: none;
    border-top: none;
    display: none;
    overflow: hidden;
  }

  .glam-menu.open {
    display: flex !important;
  }

  .glam-nav-menu-button {
    display: flex;
  }

  .selected:hover:before,
  .selected::before {
    left: 10%;
  }

  .selected:hover:after,
  .selected::after {
    right: 10%;
  }

  .glam-menu {
    background-color: var(--glam-background-color);
    bottom: auto;
    flex-flow: column;
    justify-content: flex-start;
    padding: 0;
    position: fixed;
    right: 0;
    top: 50px;
  }

  .glam-menu .selected *::after {
    left: 15%;
    opacity: .135;
    right: 15%;
  }

  .glam-menu li,
  .glam-menu li * {
    justify-content: center;
    width: 100%;
  }

  .glam-menu li {
    height: 76px;
  }

  .glam-menu li * {
    height: 100%;
  }

  .glam-figure {
    max-width: 50%;
  }

  .glam-footer p:first-of-type {
    display: none;
  }

  .glam-footer p {
    flex: 1;
  }

  .glam-contact-form {
    flex-flow: column;
  }
}

@media only screen and (max-width: 768px) {
  .glam-figure {
    flex-flow: column;
    max-width: 100%;
  }

  .glam-figure img {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .glam-title {
    right: 50%;
  }

  .glam-title::after {
    content: 'open source';
    position: absolute;
    inset: 60% auto 0 auto;
    font-size: .505rem;
    letter-spacing: .135rem;
  }

  .glam-ose {
    display: none;
  }

  .glam-footer {
    display: none;
  }
}

@media only screen and (max-width: 300px) {
  .glam-title {
    font-size: .535rem;
    letter-spacing: .105rem;
    right: 55%;
  }

  .glam-title::after {
    content: 'open source';
    position: absolute;
    inset: 55% auto 0 auto;
    font-size: .405rem;
    letter-spacing: .035rem;
  }

  .glam-ose {
    display: none;
  }

  .glam-footer {
    display: none;
  }
}

@media only screen and (max-width: 200px) {
  .glam-title::after {
    content: 'open source';
    position: absolute;
    inset: 55% auto 0 auto;
    font-size: .405rem;
    letter-spacing: .015rem;
  }
}

@media only screen and (max-width: 150px) {
  .glam-title::after {
    display: none;
  }
}