* {
       position: relative;
       box-sizing: border-box;
   }

   html,
   body {
       height: 100%;
   }

   html {
       background-color: #000;
   }

   body {
       overflow: hidden;
       color: rgba(255, 255, 255, 0.5);
       font-family: "Russo One", arial, sans-serif;
       line-height: 1.25;
       letter-spacing: 0.06em;
   }

   .hide {
       opacity: 0;
       visibility: hidden;
   }

   .remove {
       display: none;
   }

   .blur {
       filter: blur(12px);
   }

   .container {
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   #loading-init {
       width: 100%;
       align-self: center;
       text-align: center;
       font-size: 2em;
   }

   #stage-container {
       overflow: hidden;
       box-sizing: initial;
       border: 1px solid #222;
       margin: -1px;
   }

   #canvas-container {
       width: 100%;
       height: 100%;
       transition: filter 0.3s;
   }

   #canvas-container canvas {
       position: absolute;
       mix-blend-mode: lighten;
   }

   #controls {
       position: absolute;
       top: 0;
       width: 100%;
       padding-bottom: 50px;
       display: flex;
       justify-content: space-between;
       transition: opacity 0.3s, visibility 0.3s;
       display: none;
   }

   @media (min-width: 800px) {
       #controls {
           visibility: visible;
       }

       #controls.hide:hover {
           opacity: 1;
       }
   }

   #menu {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: absolute;
       top: 0;
       bottom: 0;
       width: 100%;
       background-color: rgba(0, 0, 0, 0.42);
       transition: opacity 0.3s, visibility 0.3s;
   }

   #menu__header {
       padding: 20px 0 44px;
       font-size: 2em;
       text-transform: uppercase;
   }

   #menu form {
       width: 240px;
       padding: 0 20px;
       overflow: auto;
   }

   #menu .form-option {
       margin: 20px 0;
   }

   #menu .form-option label {
       text-transform: uppercase;
   }

   #menu .form-option--select label {
       display: block;
       margin-bottom: 6px;
   }

   #menu .form-option--select select {
       display: block;
       width: 100%;
       height: 30px;
       font-size: 1rem;
       font-family: "Russo One", arial, sans-serif;
       color: rgba(255, 255, 255, 0.5);
       letter-spacing: 0.06em;
       background-color: transparent;
       border: 1px solid rgba(255, 255, 255, 0.5);
   }

   #menu .form-option--select select option {
       background-color: black;
   }

   #menu .form-option--checkbox label {
       display: flex;
       align-items: center;
       transition: opacity 0.3s;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
   }

   #menu .form-option--checkbox input {
       display: block;
       width: 20px;
       height: 20px;
       margin-right: 8px;
       opacity: 0.5;
   }

   @media (max-width: 800px) {

       #menu .form-option select,
       #menu .form-option input {
           outline: none;
       }
   }

   #close-menu-btn {
       position: absolute;
       top: 0;
       right: 0;
   }

   .btn {
       opacity: 0.16;
       width: 44px;
       height: 44px;
       display: flex;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       cursor: default;
       transition: opacity 0.3s;
   }

   .btn--bright {
       opacity: 0.5;
   }

   @media (min-width: 800px) {
       .btn:hover {
           opacity: 0.32;
       }

       .btn--bright:hover {
           opacity: 0.75;
       }
   }

   .btn svg {
       display: block;
       margin: auto;
   }