css.css

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/alegreya-v16-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/alegreya-v16-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/alegreya-v16-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/alegreya-v16-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/alegreya-v16-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/alegreya-v16-latin-500.svg#Alegreya') format('svg'); /* Legacy iOS */
}

/* alegreya-500italic - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/alegreya-v16-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/alegreya-v16-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/alegreya-v16-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/alegreya-v16-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/alegreya-v16-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/alegreya-v16-latin-500italic.svg#Alegreya') format('svg'); /* Legacy iOS */
}

  /* alegreya-700italic - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/alegreya-v16-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/alegreya-v16-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/alegreya-v16-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/alegreya-v16-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/alegreya-v16-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/alegreya-v16-latin-700italic.svg#Alegreya') format('svg'); /* Legacy iOS */
}

  /* alegreya-700 - latin */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/alegreya-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/alegreya-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/alegreya-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/alegreya-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/alegreya-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/alegreya-v16-latin-700.svg#Alegreya') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-regular - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/anonymous-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/anonymous-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v14-latin-regular.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-italic - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/anonymous-pro-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/anonymous-pro-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v14-latin-italic.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-700 - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/anonymous-pro-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/anonymous-pro-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v14-latin-700.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}

/* anonymous-pro-700italic - latin */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/anonymous-pro-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/anonymous-pro-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/anonymous-pro-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/anonymous-pro-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/anonymous-pro-v14-latin-700italic.svg#AnonymousPro') format('svg'); /* Legacy iOS */
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Anonymous Pro', monospace;
  color: #fff;
}

.desktop-message {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  font-family: 'Anonymous Pro', monospace;
  font-size: 1.7vw;
  z-index: 999999999;
  display: none;
  justify-content: center;
  align-items: center;
}

.waiting {
  position: fixed;
  background-color: rgba(0,0,0,.5);
  border: 1px solid #ffffff;
  top: 50vw;
  width: 95vw;
  left: 2.5vw;
  padding: 1vw;
  text-align: center;
  font-family: 'Ariel', sans-serif;
  font-size: 3.7vw;
  text-transform: uppercase;
  text-shadow: 2px 2px 8px #ff1DCE;
  z-index: 20;
}
.countdown {
  position: fixed;
  top: 50vw;
  width: 100vw;
  padding: 4vw;
  text-align: center;
  font-family: 'Anonymous Pro', monospace;
  font-size: 10vw;
  text-shadow: 2px 2px 8px #ff1DCE;
  z-index: 20;
}

.letter {
  position: fixed;
  top: 0;
  /* filter: blur(4px); */
}

.letter > div {
  padding: 5vw;
  font-size: 5.6vw;
  text-align: justify;
  line-height: 6vw;
  /* margin-bottom: 15vh; */
}


.fade-bar {
  position: fixed;
  width: 100vw;
  height: 37vh;
  z-index: 2;
}

.fb-top {
  top: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
}

.fb-bottom {
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
}

img.q {
  position: fixed;
  width: 12vw;
  z-index: 10;
  cursor: pointer;
  display: none;
}

img[alt="question one"] {
  top: 5vw;
  right: 5vw;
}

img[alt="question two"] {
  top: calc(50vh - 6vw);
  left: 5vw;
}

img[alt="question three"] {
  bottom: 5vw;
  left: calc(50vw - 6vw);
}

.modal {
  width: 80vw;
  height: calc(100vh - 50vw);
  position: fixed;
  top: 12.5vw;
  left: 10vw;
  z-index: 20;
  background: black;
  border: 1px solid #fff;
  padding: 5.5vw;
  font-size: 7vw;
  color: #fff;
  font-family: 'Arial', sans-serif;
  display: none;
}

.submit {
  position: fixed;
  top: 12vw;
  right: 12vw;
  z-index: 30;
  font-size: 9vw;
  display: none;
  cursor: pointer;
}

/* BACKGROUND DIVS */
.bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.falling1 {
  background-image: url(images/falling.gif);
  z-index: -2;
}

.falling2 {
  background-image: url(images/fallingNEW.gif);
  opacity: 0.75;
  z-index: -1;
}