@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
body {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

@font-face {
  font-family: 'lavanderia_light';
  src: url("../assets/fonts/lavanderia_light-webfont.woff2") format("woff2"), url("../assets/fonts/lavanderia_light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'lavanderia_regular';
  src: url("../assets/fonts/lavanderia_regular-webfont.woff2") format("woff2"), url("../assets/fonts/lavanderia_regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'lavanderia_bold';
  src: url("../assets/fonts/lavanderia_bold-webfont.woff2") format("woff2"), url("../assets/fonts/lavanderia_bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

body {
  background-color: #1E314F;
  color: #fff;
  box-shadow: inset 0 0px 15em 15em #0e0000; }

#download {
  position: absolute;
  z-index: 99;
  font-size: 14px;
  font-family: 'Open Sans Condensed', sans-serif;
  color: #fbf8f8;
  background: #6d020a;
  padding: 8px 8px;
  letter-spacing: 1px;
  bottom: 20px;
  left: 20px;
  border-radius: 1px;
  text-decoration: none;
  box-shadow: 1.5px 1.5px 1px 0px rgba(247, 224, 219, 0.98);
  cursor: pointer;
  transition: all 0.4s ease; }
  #download:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -13px;
    background-image: url("../assets/hat.svg");
    height: 40px;
    width: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-14deg); }
  #download:hover {
    transition: all 0.4s ease;
    box-shadow: 0px 0px 0px 0px rgba(199, 9, 9, 0.98);
    transform: translate(2px, 2px); }

.twitter {
  position: fixed;
  bottom: 20px;
  right: 15px;
  cursor: pointer;
  background: url("../assets/twitter.webp");
  background-size: 24px;
  background-position: right;
  background-repeat: no-repeat;
  transition: all 0.4s ease;
  width: 24px; }
  .twitter:hover {
    transition: all 0.4s ease;
    opacity: 0.8; }

.twitter iframe {
  opacity: 0; }

#loader {
  background-color: #282E3F;
  background-size: cover;
  position: fixed;
  z-index: 999;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  color: black;
  background-image: url("../assets/background.webp");
  background-position: center center; }
  #loader:after {
    content: '';
    height: 200vh;
    width: 200vw;
    background-image: url("../assets/background2.png");
    background-size: cover;
    position: fixed;
    top: 0%;
    left: -50%;
    background-position: center center; }

@keyframes power {
  100% {
    transform: rotate(20deg); } }
  #loader .percent {
    font-family: 'lavanderia_light';
    font-size: 160vh;
    padding-top: 10vh;
    margin: 0;
    color: rgba(253, 253, 253, 0.08);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  #loader h2 {
    font-family: 'lavanderia_light';
    z-index: 1000;
    font-size: 20vh;
    padding-top: 10vh;
    margin: 0;
    color: #fdfdfd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  #loader h3 {
    font-family: 'lavanderia_light';
    font-size: 40px;
    padding-top: 5vh;
    margin: 0;
    color: #fdfdfd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    opacity: 0; }
  #loader #loop {
    z-index: 999;
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -110%); }
  #loader .mobile {
    display: none; }
  #loader .desktop {
    display: block; }

.toggleWrapper {
  position: absolute;
  top: 20px;
  left: 20px;
  overflow: hidden;
  transform: scale(0.8);
  display: none; }
  .toggleWrapper input {
    position: absolute;
    left: -99em; }

.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 84px;
  transition: background-color 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background: radial-gradient(ellipse at center, #ffe5b5 23%, #eaba7e 100%);
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg); }
  .toggle__handler .crater {
    position: absolute;
    background-color: #D6B9AC;
    opacity: 0;
    transition: opacity 400ms ease-in-out;
    border-radius: 100%; }
  .toggle__handler .crater--1 {
    top: 18px;
    left: 10px;
    width: 4px;
    height: 4px; }
  .toggle__handler .crater--2 {
    top: 28px;
    left: 22px;
    width: 6px;
    height: 6px; }
  .toggle__handler .crater--3 {
    top: 10px;
    left: 25px;
    width: 8px;
    height: 8px; }

input:checked + .toggle {
  background-color: rgba(116, 157, 214, 0.54); }
  input:checked + .toggle:before {
    color: #749ED7; }
  input:checked + .toggle:after {
    color: #ffffff; }
  input:checked + .toggle .toggle__handler {
    background: radial-gradient(ellipse at center, #ffe5b5 23%, #ffe5b5 100%);
    transform: translate3d(40px, 0, 0) rotate(0); }
    input:checked + .toggle .toggle__handler .crater {
      opacity: 1; }

.phone h2 {
  font-size: 15vh !important; }

.phone #loop {
  display: none !important; }

.phone .mobile {
  display: block !important; }

.phone .desktop {
  display: none !important; }