/*credit to Erin : https://codepen.io/eritbh/pen/vGVQXZ*/

@import "../../../../dl.dropboxusercontent.com/s/2dzavbcgp9t8i58/styles.css_%3b%20filename_%3dUTF-8%27%27styles.css";
 *, *::before, *::after {
	 box-sizing: border-box;
}
html {
  height: 100%;
}
 body {
	 margin: 0;
	 font-family: 'FE';
	 line-height: 1;
	 height: 100%;
	 /*display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;*/
	 background-color: black;
	 color: #440800;
	 
	 /*background: url(febg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}
/*body > *:not(:first-child) {
	 margin-top: 30px;
}*/
 .dialog-wrap {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 z-index: 10;
	 padding: 30px;
}
 .dialog-wrap.out {
	 pointer-events: none;
}
 .dialog {
	 background: #ffe77b;
	 border: 1px solid #8c4211;
	 position: relative;
	 margin: 2px;
	 padding: 20px 35px;
	 max-width: 400px;
	 box-shadow: 0 0 0 1px #bb7a38, 0 0 0 2px #8c4211, 1px 1px 1px 2px rgba(124, 12, 0, 0.3);
	 transition: transform 200ms;
	 transform: scale(0);
	 pointer-events: initial;
}
 .out .dialog {
	 transform: scale(0) translateY(-50vh);
}
 .dialog::before {
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 10px;
	 height: 10px;
	 background: #975c24;
	 box-shadow: 10px 10px #975c24, 20px 0 #975c24, 0 20px #975c24;
}
 .dialog::after {
	 content: "";
	 position: absolute;
	 top: 0;
	 right: 0;
	 width: 10px;
	 height: 10px;
	 background: #975c24;
	 box-shadow: -10px 10px #975c24, -20px 0 #975c24, 0 20px #975c24;
}
 .dialog .decor {
	 margin-top: 0;
}
 .dialog .decor::before {
	 content: "";
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 10px;
	 height: 10px;
	 background: #975c24;
	 box-shadow: 10px -10px #975c24, 20px 0 #975c24, 0 -20px #975c24;
}
 .dialog .decor::after {
	 content: "";
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 width: 10px;
	 height: 10px;
	 background: #975c24;
	 box-shadow: -10px -10px #975c24, -20px 0 #975c24, 0 -20px #975c24;
}
 .dialog .shadow {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 1;
	 margin-top: 0;
	 pointer-events: none;
	 box-shadow: inset 0 0 15px rgba(227, 110, 34, 0.8);
}
 .dialog-prompt {
	 /*text-align: center;*/
	 /*margin-bottom: 20px;*/
	 margin: 8px;
}
 .dialog-prompt * {
	 margin: 0;
	 padding: 0;
	 font: inherit;
	 line-height: 1.25;
}
 .dialog-buttons {
	 margin: 0 auto;
	 max-width: 200px;
	 text-align: center;
	 display: flex;
}
 .dialog-buttons.vertical {
	 flex-direction: column;
}
 .dialog-button {
	 padding: 4px;
	 line-height: 1;
	 background: #ffffbe;
	 border: 1px solid #91702b;
	 border-radius: 2px;
	 box-shadow: inset 0 0 7px #f8c768, 1px 1px 1px #9d6834;
	 color: #440800;
	 user-select: none;
	 cursor: pointer;
	 text-decoration: none;
}
 .dialog-button:hover, .dialog-button:focus {
	 background: #f8563f;
	 border-color: #7f0c05;
	 box-shadow: inset 0 0 6px 1px #ca3018, 1px 1px 1px #9d6834;
	 color: #feedb9;
}
 .horizontal .dialog-button {
	 width: 95px;
}
 .horizontal .dialog-button + .dialog-button {
	 margin-left: 10px;
}
 .vertical .dialog-button + .dialog-button {
	 margin-top: 5px;
}
 .action-list {
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: inline-flex;
	 flex-direction: column;
	 border-radius: 2px;
	 box-shadow: 1px 1px 1px rgba(124, 12, 0, 0.3);
}
 .action-list a {
	 display: block;
	 background: linear-gradient(#ffffbe, #fad999);
	 padding: 2px 5px;
	 border: 1px solid #91702b;
	 border-bottom-width: 0;
	 color: #000;
	 text-decoration: none;
}
 .action-list a.special {
	 color: green;
}
 .action-list a:focus, .action-list a:hover, .action-list a:active {
	 background: linear-gradient(#f8563f, #ca3018);
	 border-color: #7f0c05;
	 border-bottom-width: 1px;
	 color: #feedb9;
}
 .action-list a:focus + a, .action-list a:hover + a, .action-list a:active + a {
	 border-top: 0;
}
 .action-list :first-of-type {
	 border-top-left-radius: 2px;
	 border-top-right-radius: 2px;
}
 .action-list :last-of-type {
	 border-bottom-left-radius: 2px;
	 border-bottom-right-radius: 2px;
	 border-bottom-width: 1px;
}

.video-frame {
  width:100%;
  height:100%;
  border:none;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}
 /*.viewport {
	 width: 400px;
	 height: 240px;
	 background: rgba(0, 0, 0, 0.1);
	 position: relative;
}*/
/*#next-page {
  position: absolute;  
}*/
.dialog-appear {
  animation: dialog-appear 0.1s forwards;
}
.dialog-disappear {
  animation: dialog-disappear 0.1s forwards;
}
@keyframes dialog-appear {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
@keyframes dialog-disappear {
    from {transform: scale(1)} 
    to {transform: scale(0);}
}
.shadowbg {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.shadowbg-fadeout {
  animation: shadowbg-fadeout 1s forwards;
}
@keyframes shadowbg-fadeout {
    from { background-color: rgba(0,0,0,1) } 
    to { background-color: rgba(0,0,0,0); display:none;}
}
/*#bg-video {
  z-index: -1;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}*/
.bg-video {
  z-index: -1;
  position: fixed;
  min-width: 100%; 
  min-height: 100%;
}
#video-intro {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#video-title {
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
#mute-window {
  max-width: 500px; 
}
#logo {
  filter: drop-shadow( 0px 2px 8px rgba(0, 0, 0, 0.9));
  max-width: 70%;
}
#press {
  max-width: 40%;
  animation: pressIdle 2s ease-in-out infinite;
}
#fadein{
  opacity: 0;
  animation: 2s ease-in logofadein forwards;
  animation-play-state: paused;
  display: flex;
	flex-direction: column;
	align-items: center;
	/*justify-content: center;*/
	justify-content: space-between;
	padding-top: 96px;
	padding-bottom: 96px;
	/*gap: 280px;*/
	height: 100%;
	/*height: 90%;
	margin-top: 10%;*/
}

.spinner {
  width: 1.5em;
  height: 1.5em;
  background: url(spinner_final.png);
  background-repeat: no-repeat;
  background-size: cover;
  
  animation-name: spinner-spin;
  animation-iteration-count: infinite;
  animation-duration: 0.5s;
  animation-timing-function: steps(8, end);
  position: absolute;
  right: 12px;
  bottom: 12px;
}

@keyframes spinner-spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@keyframes logofadein {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes pressIdle {
  0%   { opacity:1; }
  50%  { opacity:0.3; }
  100% { opacity:1; }
}
#audio-button {
  position:absolute;
  top:16px;
  right:16px;
  opacity: 0.6;
  /*width: 64px;*/
  height: 50px;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
}
#skip-button {
  position:absolute;
  top:16px;
  left:16px;
  opacity: 0.6;
  /*width: 64px;*/
  height: 50px;
  transform: scale(0.9);
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
}