/*
Le Murmure by Jérémy Landes

http://velvetyne.fr/fonts/le-murmure/
*/

@font-face {
	font-family: murmure;
	src: url(../fonts/Le_Murmure-Regular_web.woff);
}

/*
Happy Time at the IKOB by Lucas Le Bihan

http://velvetyne.fr/fonts/happy-times/
*/

@font-face {
	font-family: ikob;
	src: url(../fonts/happy-times-at-the-ikob-webfont.woff);
	font-style: normal;
}

@font-face {
	font-family: ikob;
	src: url(../fonts/happy-times-at-the-ikob_italic-webfont.woff);
	font-style: italic;
}

/* 
Savate by Wech

http://velvetyne.fr/fonts/savate/
*/

@font-face {
	font-family: savate;
	src: url(../fonts/savate-italique-webfont.woff);
	font-style: italic;
}

@font-face {
	font-family: savate;
	src: url(../fonts/savate-regular-webfont.woff);
	font-style: normal;
}

@keyframes bg-shift {
	0% {background-color: rgb(255,0,0);}
	17% {background-color: rgb(255,255,0);}
	34% {background-color: rgb(0,255,0);}
	51% {background-color: rgb(0,255,255);}
	68% {background-color: rgb(0,0,255);}
	85% {background-color: rgb(255,0,255);}
	100% {background-color: rgb(255,0,0);}
}

@keyframes flash {
	0% {opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}

@keyframes bounce {
	0% {left: 0vw}
	50% {left: calc(100vw - 620px)}
	100% {left: 0vw}
}

body {
	background-color: red;

	padding: 2em;

	font-size: 12pt;

	animation-name: bg-shift;
	animation-duration: 50s;
	animation-iteration-count: infinite;

	cursor: crosshair;
}

h1 {
	position: relative;
	top: -160px;
	margin-bottom: -0.6em;

	font-family: murmure;
	font-size: 16em;
	line-height: 0.9em;
	letter-spacing: -0.03em;

	color: white;
	mix-blend-mode: multiply;

	user-select: none;
	z-index: -100;
}

.involved {
	animation-name: bounce;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

.engaged {
	animation-name: bounce;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

.aware {
	animation-name: bounce;
	animation-duration: 7s;
	animation-iteration-count: infinite;
}

h2 {
	position: relative;

	font-family: savate;
	font-size: 3em;
}

p {
	position: relative;

	font-family: ikob;
	font-size: 1em;
	line-height: 1.5em;
}

a {
	color: black;
}

a:hover {
	animation-name: bg-shift;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.italic {
	font-style: italic;
}

.big-words {
	position: fixed;
	top: 0px;
}

.smaller-words {
	position: absolute;
	left: 20vw;
	right: 20vw;
	margin-bottom: 2em;
	width: calc(60vw - 2em);
}

.caption {
	position: relative;
	width: 100%;
	top: -0.5em;

	text-align: right;
}

.img-container {
	background-color: white;
}

img {
	position: relative;
	width: calc(60vw - 2em);
}

img:hover {
	animation-name: flash;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
}