@import "fonts/stylesheet.css";

:root{
	--rose : rgb(255, 59, 151);
	--lightgreen: rgb(94, 199, 100);
	--green: rgb(43, 60, 50);
}

*{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
	margin:0;
	font-size: 30px;
	background: var(--rose);
	font-family: "directrice", sans-serif;
	overflow: hidden;
	height: auto;
}

img{
	width: 100%;
}

h1, h2, h3{
  font-weight: normal;
}

a{
  color: #FFF; 
  text-decoration: none;
}

a:hover{
  color: var(--lightgreen);
}

p a{
	text-decoration: underline;
}

.smoke{
	width: 300px;
	position: absolute;
	left: 5%;
	bottom: -10px;
	mix-blend-mode: screen;
	opacity: 0.5;
}

.smoke img{
	height: 600px;
}

.smoke-right{
	width: 300px;
	position: absolute;
	right: 5%;
	bottom: -10px;
	mix-blend-mode: screen;
	opacity: 0.5;
}

.smoke-right img{
	height: 600px;
}

.smoke-pred{
	width: 300px;
	position: absolute;
	left: 40%;
	bottom: -10px;
	mix-blend-mode: screen;
	opacity: 0.5;
}

.hide{
	display: none;
}

.prediction-wrapper{
	position: absolute;
	z-index: 1000;
	top:0;
	width: 100%;
}

.prediction-inner{
	position: relative;
	width: 100%;
	height: 100vh;
	margin: auto;
}

.presentation{
	margin-top: 15px;
	text-align: center;
	font-size: 1em;
	color: #FFF;
	transition: all 0.5s linear;
}

.presentation.fadeOut{
	opacity: 0;
}

.refresh{
	width: 50px;
	height: 50px;
	position: absolute;
	right: 10px;
	top: 10px;
	fill: var(--lightgreen);
	cursor: pointer;
	z-index: 100;
}

.refresh .info{
	position: absolute;
	background: var(--lightgreen);
	padding: 5px; 
	top: 45px;
	right: 10px;
	display: none;
}

.refresh .info p{
	font-size: 14px;
	color: var(--green);
	margin:0;
}

.debut{
	margin-top: 20px;
	text-align: center;
	color: var(--lightgreen);
}

.prediction{
	font-size: 18vh;
	text-align: center;
	color: var(--lightgreen);
	width: 90%;
	position: absolute; 
	top: 50vh;
	left: 50%;
	transform: translate(-50%, -70%);
}

.prediction p{
	margin:0;
	text-shadow: 0 0 10px var(--lightgreen), 0 0 20px var(--lightgreen), 0 0 30px var(--green), 0 0 40px var(--green), 0 0 50px var(--green), 0 0 60px var(--green), 0 0 70px var(--green);
}

.prediction p.smaller{
	font-size: 15vh;
}

.oracle{
	width: 40%;
	margin: auto;
	cursor: pointer; 
	position: relative;
}

.oracle figure{
	margin:0;
	width: 100%;
	mix-blend-mode: screen;
}

.oracle figure:hover{
	mix-blend-mode: multiply;
}

.oracle.active{
	pointer-events: none;
}

.clickleft{
	position: absolute;
	top: 29%;
	left: 29%;
	color: var(--lightgreen);
	font-size: 14px;
	animation: blinker 1.5s ease infinite;
	transform: rotate(-5deg);
}

.clickright{
	position: absolute;
	top: 27.8%;
	left: 54.7%;
	color: var(--lightgreen);
	font-size: 14px;
	animation: blinker 1.5s ease infinite;
	transform: rotate(-5deg);
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.laserleft{
	background: var(--lightgreen);
	width: 20px; 
	height:20px; 
	border-radius: 50%;
	box-shadow:0 0 6px 3px var(--lightgreen);
	position: absolute;
	top: 25.5%;
	left: 29.5%;
	transition: all 5s ease-in-out;
	transform-origin: 50% 50%;
}

.laserright{
	background: var(--lightgreen);
	width: 20px; 
	height:20px; 
	border-radius: 50%;
	box-shadow:0 0 6px 3px var(--lightgreen);
	position: absolute;
	top: 24%;
	left: 54.7%;
	transition: all 5s ease-in-out;
	transform-origin: 50% 50%;
}

.laserleft.active, 
.laserright.active{
	transform: scale(100);
	background: var(--green);
}

.encart{
	font-size: 0.7em;
	position: absolute; 
	bottom: 40px;
	right: 20px;
	z-index: 1000;
	color: var(--lightgreen);
	text-align: right;
	max-width: 70%;
}

.encart a:hover{
	color:  var(--rose);
}

.encart a{
	text-decoration: underline;
	color: var(--lightgreen);
}

@media (min-width: 320px) and (max-width: 800px) {
  main{
  	padding: 15px;
  	overflow: hidden;
  }

  .prediction-wrapper{
  	width: 96%;
  }

  .debut{
  	font-size: 0.8em;
  	transform: translateX(-15px);
  }

  .presentation{
  	font-size: 0.8em;
  	line-height: 1.1;	
  }

  .oracle{
  	width:100%;
  }

  .smoke{
  	transform: translateX(-40%);
  }

  .smoke-right{
  	transform: translateX(40%);
  }

  .prediction{
  	font-size: 12vw;
  	width: calc(100% - 18px);
  	left:0;
  	top:40vh;
  	transform: translateY(-60%); 
  }

  .prediction p.smaller{
  	font-size: 9vw;
  }

  .encart{
  	max-width: 100%;
  	font-size: 0.5em;
  	line-height: 1;
  }

  .refresh{
		right: 10px;
		top: 10px;
	}

}