@import url('https://fonts.googleapis.com/css2?family=Lovers+Quarrel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

header {
	/*border:  3px solid red;*/
	font-family: 'Indie Flower', cursive;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top:  0;
	/*overflow: hidden;*/
}

h1 {
	line-height: 1em;
}

.subtitle {
	/*font-family: 'Tangerine', cursive;*/
	font-family: 'Italianno', cursive;
	font-size: 3rem!important;
	opacity: initial;
	letter-spacing: initial;
	opacity: .65;
	/*line-height: 1.5em;*/
	display: none;
	/*color: red;*/
}

/*.logo-parallax img {
	max-width: 100%;
	max-height: 100vh;
}*/

#logo {

	width: 100vw;
	text-align: center;
	font-family: 'Lovers Quarrel', cursive;
	font-size: 17em;
	font-weight: 400;
	position: absolute;
	left: -17px;
	top: 30vh;
	color: black;
	letter-spacing: 16px;
	line-height: 2.7rem;
	opacity: .5;
	-webkit-transition: all 750ms ease-out;
       -moz-transition: all 750ms ease-out;
         -o-transition: all 750ms ease-out;
            transition: all 750ms ease-out;
}
.mini {
	font-size: 12em!important;
	margin-top: 6rem;
}

@media screen and (max-width: 1280px) {
	.mini {
		font-size: 8em!important;
		margin-top: 3rem;
	}
}
@media screen and (max-width: 1368px) {
	.mini {
		font-size: 8em!important;
		margin-top: 3rem;
	}
}
#FoL, #FoL-container {
	-webkit-transition: all 950ms ease-out;
       -moz-transition: all 950ms ease-out;
         -o-transition: all 950ms ease-out;
            transition: all 950ms ease-out;
}

#FoL-container {
	/*border: 1px solid green;*/
	width: 100%;
	text-align: center;
	-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
#FoL {
	max-width: 90vw;
	margin-top: 10px;
	/*border: 1px solid green;*/
	opacity: .2;
	animation: rotation 180s infinite linear;
}
.FoL-docked {
	width: 90%;
}
.FoL-docked > #FoL {
	max-height: 65vh;
	margin-top: 20px;
}
#FoL {
	max-height: 90vh;
}

/* Menu
________________________________________*/

#menu {
	display: none;
	
}

#menu a {
	font-family: 'Indie Flower', cursive;
	color:  rgba(0, 0, 0, 0.8);
	text-decoration: none;
	font-size: 1.5rem;
	margin-right: 1rem;
	text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 4px 5px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 4px 3px 1px #EEEEEE;
}
#menu ul { margin :0; padding: 0;}
#menu ul li {
	display: inline;
}


/* Animations
________________________________________*/
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/* SMOKY TEXT */

#smoky {
	margin: 0;
	padding: 0;
	display: inline-flex;
}
.smoke-invisible {
	opacity: 0;
}
#smoky ul, #smoky li {
	list-style-type: none;

}

.animate li {
	/*animation: animate 9s cubic-bezier(0.34, 1.56, 0.64, 1) 1;*/
	animation: animate 4s linear 1!important;
}

@keyframes animate {
	0% {
		transform: rotate(45deg) translateY(-300px);	
		opacity: 0;
		filter: blur(50px);
	}
	100% {
		transform: rotate(0deg) translateY(0px);
		opacity: 1;
		filter: blur(1px);
	}
}
.breathing {
	-webkit-animation: beat 6s infinite alternate;
	-moz-animation: beat 6s infinite alternate;
	-ms-animation: beat 6s infinite alternate;
	-o-animation: beat 6s infinite alternate;
	animation: beat 6s infinite alternate;
}
@keyframes beat{
	to { transform: scale(0.95); }
}

@keyframes "beat" {
 to {
    -webkit-transform: scale(0.95);
   	-moz-transform: scale(0.95);
   	-o-transform: scale(0.95);
   	-ms-transform: scale(0.95);
   	transform: scale(0.95);
 }

}

@-moz-keyframes beat {
 to {
   -moz-transform: scale(0.95);
   transform: scale(0.95);
 }

}

@-webkit-keyframes "beat" {
 to {
   -webkit-transform: scale(0.95);
   transform: scale(0.95);
 }

}

@-ms-keyframes "beat" {
 to {
   -ms-transform: scale(0.95);
   transform: scale(0.95);
 }

}

@-o-keyframes "beat" {
 to {
   -o-transform: scale(0.95);
   transform: scale(0.95);
 }

} 

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}