* {
   margin: 0;
   padding: 0
}

*,
*::after,
*::before {
   box-sizing: border-box
}

html {
   background: #0c0c0c;
   color: #fff;
   font-size: calc(100vw / 1920 * 10);
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   user-select: none;
   width: 100%
}

body {
   font-family: 'halyard-display', sans-serif;
   font-size: 15px;
   margin: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   overscroll-behavior-y: none
}

body:after {
   animation: grain 6s steps(10) infinite;
   background-image: url(images/texture.png);
   background-repeat: repeat;
   content: '';
   height: 300%;
   left: -100%;
   opacity: 0;
   pointer-events: none;
   position: fixed;
   top: -100%;
   transition: opacity 0.4s ease;
   width: 300%;
   will-change: transform;
   z-index: 3
}

.loaded body:after {
   opacity: 0.06
}

body #cdawrap {
   --cda-bottom: 3rem;
   --cda-left: 3rem;
   --cda-width: 400px;
   --cda-footer-fontsize: initial;
   --cda-footer-color: rgba(255, 255, 255, 0.5)
}

body #cdawrap a:hover {
   text-decoration: none;
   opacity: 0.7
}

img {
   display: block
}

canvas {
   height: 100%;
   left: 0;
   opacity: 0;
   position: fixed;
   top: 0;
   transition: opacity 1s ease;
   width: 100%
}

.loaded canvas {
   opacity: 1
}

a {
   color: #fff;
   outline: none;
   text-decoration: none
}

a:hover,
a:focus {
   outline: none
}

@keyframes grain {
   0% {
      transform: translate(20%, -15%)
   }

   10% {
      transform: translate(-20%, -15%)
   }

   20% {
      transform: translate(20%, -5%)
   }

   30% {
      transform: translate(-20%, -5%)
   }

   40% {
      transform: translate(20%, 5%)
   }

   50% {
      transform: translate(-20%, 5%)
   }

   60% {
      transform: translate(20%, 15%)
   }

   70% {
      transform: translate(-20%, 15%)
   }

   80% {
      transform: translate(20%, 5%)
   }

   90% {
      transform: translate(-20%, 5%)
   }

   100% {
      transform: translate(20%, -5%)
   }
}

.frame {
   font-size: 15px;
   padding: 3rem;
   text-align: center;
   position: relative;
   z-index: 1000
}

.frame__title {
   font-size: 15px;
   margin: 0 0 15px;
   font-weight: normal
}

.frame__links {
   margin-top: 15px
}

.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
   margin-right: 15px
}

.frame__demos {
   margin: 15px 0
}

@media screen and (min-width: 53em) {
   .frame {
      position: fixed;
      text-align: left;
      z-index: 100;
      top: 0;
      left: 0;
      display: grid;
      align-content: space-between;
      width: 100%;
      max-width: none;
      height: 100vh;
      padding: 3rem;
      pointer-events: none;
      grid-template-columns: 75% 25%;
      grid-template-rows: auto auto auto;
      grid-template-areas: 'title links'
         '... ...'
         'credits demos'
   }

   .frame__title-wrap {
      grid-area: title;
      display: flex
   }

   .frame__title {
      margin: 0
   }

   .frame__tagline {
      position: relative;
      margin: 0 0 0 1rem;
      padding: 0 0 0 1rem;
      opacity: 0.5
   }

   .frame__demos {
      margin: 0;
      grid-area: demos;
      justify-self: end
   }

   .frame__links {
      grid-area: links;
      padding: 0;
      margin: 0;
      justify-self: end;
      white-space: nowrap
   }

   .frame a {
      pointer-events: auto
   }

   .frame__credits {
      grid-area: credits
   }
}

/*html::after {
   content: '';
   position: fixed;
   z-index: 1000;
   top: 50%;
   left: 50%;
   width: 60px;
   height: 60px;
   margin: -30px 0 0 -30px;
   border-radius: 50%;
   opacity: 0.4;
   background: #fff;
   animation: loaderAnim 0.7s linear infinite alternate forwards;
   transition: opacity 0.4s ease
}

html.loaded::after {
   animation-play-state: paused;
   opacity: 0 !important
}*/

@keyframes loaderAnim {
   to {
      opacity: 1;
      transform: scale3d(0.5, 0.5, 1)
   }
}

.frame__demo--current,
.frame__demo--current:hover,
a {
   display: inline-block;
   overflow: hidden;
   position: relative;
   vertical-align: top
}

.frame__demo--current:after,
.frame__demo--current:hover:after,
a:after {
   background: currentColor;
   bottom: 0;
   content: '';
   height: 1px;
   left: 0;
   position: absolute;
   transition: transform 0.4s ease;
   width: 100%
}

.frame__demo--current:after,
.frame__demo--current:hover:after,
a:hover:after {
   transform: scaleX(1);
   transform-origin: left center
}

.frame__demo--current:hover:after,
a:after {
   transform: scaleX(0);
   transform-origin: right center
}

.frame__demo--current,
.frame__demo--current:hover {
   display: inline-block
}

a {
   display: inline-block
}

.demo-1 {
   height: 100%;
   left: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1
}

.demo-1__header {
   align-items: center;
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: center;
   left: 0;
   opacity: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 2
}

.loaded .demo-1__header {
   opacity: 1;
   transition: opacity 0.4s ease
}

.demo-1__title {
   font: 800 20rem/1 'moret', serif
}

.demo-1__description {
   font-size: 2rem;
   margin-top: -1rem;
   opacity: 0.75
}

.demo-1__gallery {
   height: 295rem;
   position: relative;
   visibility: hidden
}

@media (max-width: 1200px) {
   .demo-1__gallery {
      height: 650rem
   }
}

.demo-1__gallery__figure {
   position: absolute
}

.demo-1__gallery__figure:nth-child(1) {
   height: 40rem;
   width: 70rem
}

.demo-1__gallery__figure:nth-child(2) {
   height: 50rem;
   left: 85rem;
   top: 30rem;
   width: 40rem
}

.demo-1__gallery__figure:nth-child(3) {
   height: 50rem;
   left: 15rem;
   top: 60rem;
   width: 60rem
}

.demo-1__gallery__figure:nth-child(4) {
   height: 30rem;
   right: 0;
   top: 10rem;
   width: 50rem
}

.demo-1__gallery__figure:nth-child(5) {
   height: 60rem;
   right: 15rem;
   top: 55rem;
   width: 40rem
}

.demo-1__gallery__figure:nth-child(6) {
   height: 75rem;
   left: 5rem;
   top: 120rem;
   width: 57.5rem
}

.demo-1__gallery__figure:nth-child(7) {
   height: 70rem;
   right: 0;
   top: 130rem;
   width: 50rem
}

.demo-1__gallery__figure:nth-child(8) {
   height: 50rem;
   left: 85rem;
   top: 95rem;
   width: 40rem
}

.demo-1__gallery__figure:nth-child(9) {
   height: 65rem;
   left: 75rem;
   top: 155rem;
   width: 50rem
}

.demo-1__gallery__figure:nth-child(10) {
   height: 43rem;
   right: 0;
   top: 215rem;
   width: 30rem
}

.demo-1__gallery__figure:nth-child(11) {
   height: 50rem;
   left: 70rem;
   top: 235rem;
   width: 80rem
}

.demo-1__gallery__figure:nth-child(12) {
   left: 0;
   top: 210rem;
   height: 70rem;
   width: 50rem
}

@media (max-width: 1200px) {
   .demo-1__gallery__figure:nth-child(1) {
      height: 60rem;
      width: 100rem
   }

   .demo-1__gallery__figure:nth-child(2) {
      height: 110rem;
      left: auto;
      right: 0;
      top: 25rem;
      width: 70rem
   }

   .demo-1__gallery__figure:nth-child(3) {
      height: 80rem;
      left: 12rem;
      top: 80rem;
      width: 89rem
   }

   .demo-1__gallery__figure:nth-child(4) {
      height: 60rem;
      right: 0;
      top: 153rem;
      width: 60rem
   }

   .demo-1__gallery__figure:nth-child(5) {
      height: 110rem;
      left: 0;
      right: auto;
      top: 180rem;
      width: 70rem
   }

   .demo-1__gallery__figure:nth-child(6) {
      height: 135rem;
      left: 95rem;
      top: 230rem;
      width: 87.5rem
   }

   .demo-1__gallery__figure:nth-child(7) {
      height: 110rem;
      left: 0;
      right: auto;
      top: 310rem;
      width: 80rem
   }

   .demo-1__gallery__figure:nth-child(8) {
      height: 50rem;
      left: auto;
      right: 0;
      top: 385rem;
      width: 80rem
   }

   .demo-1__gallery__figure:nth-child(9) {
      height: 100rem;
      left: 110rem;
      top: 450rem;
      width: 70rem
   }

   .demo-1__gallery__figure:nth-child(10) {
      height: 50rem;
      left: 20rem;
      right: auto;
      top: 440rem;
      width: 55rem
   }

   .demo-1__gallery__figure:nth-child(11) {
      height: 70rem;
      left: auto;
      right: 0;
      top: 570rem;
      width: 70rem
   }

   .demo-1__gallery__figure:nth-child(12) {
      left: 0;
      top: 515rem;
      height: 100rem;
      width: 90rem
   }
}

.demo-1__gallery__image {
   height: 100%;
   left: 0;
   object-fit: cover;
   position: absolute;
   top: 0;
   width: 100%
}

.demo-2 {
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1
}

.demo-2__header {
   align-items: center;
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: center;
   left: 0;
   opacity: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 2
}

.loaded .demo-2__header {
   opacity: 1;
   transition: opacity 0.4s ease
}

.demo-2__title {
   font: 800 20rem/1 'moret', serif
}

.demo-2__description {
   font-size: 2rem;
   margin-top: -1rem;
   opacity: 0.75
}

.demo-2__gallery {
   height: 100%;
   position: relative;
   width: 520rem;
   visibility: hidden
}

.demo-2__gallery__figure {
   position: absolute
}

.demo-2__gallery__figure:nth-child(1) {
   height: 80rem;
   left: 0;
   top: 0;
   width: 53rem
}

.demo-2__gallery__figure:nth-child(2) {
   height: 70rem;
   left: 73rem;
   bottom: 0;
   width: 47rem
}

.demo-2__gallery__figure:nth-child(3) {
   height: 90rem;
   left: 140rem;
   top: 10rem;
   width: 60rem
}

.demo-2__gallery__figure:nth-child(4) {
   height: 75rem;
   left: 220rem;
   top: 0;
   width: 50rem
}

.demo-2__gallery__figure:nth-child(5) {
   bottom: 0;
   height: 75rem;
   left: 290rem;
   width: 50rem
}

.demo-2__gallery__figure:nth-child(6) {
   height: 75rem;
   left: 360rem;
   top: 20rem;
   width: 50rem
}

.demo-2__gallery__figure:nth-child(7) {
   height: 75rem;
   left: 430rem;
   top: 30rem;
   width: 70rem
}

.demo-2__gallery__image {
   height: 100%;
   left: 0;
   object-fit: cover;
   position: absolute;
   top: 0;
   width: 100%
}

@media (max-width: 575.98px) {
   .frame__title-wrap img {
      width: 150px;
      margin-left: 15px;
   }

   .frame__demos {
      position: absolute;
      left: auto;
      top: auto;
      bottom: 10px;
      right: 10px;
   }
}