style.css

@charset "utf-8";

/*-------------------------------------
--------- PROPRIETES GENERALES --------
--------------------------------------*/

/* ----- Correction bug ---- */

*
{
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after
{
	box-sizing: border-box;
}


.clearfix:before,
.clearfix:after
{
	content: "";
	display: table;
}

.clearfix:after
{
	clear: both;
}

html
{
	font-size: 62.5%;
}

body
{
  position: relative;
  max-width: 1440px;
  width: 100%;
  margin: auto;
  font-size: 1.8rem;
  color: black;
  font-family: 'Open Sans', sans-serif;
				
}


ul
{
  list-style-type: none;
}


/*-------------------------------------
-------------- PROGRESS ---------------
--------------------------------------*/

header
{
	width: auto;
}

.progress
{

	height: 80px;
	max-width: 1440px;
  	width: 100%;
  	margin: auto;
  	position: absolute;
  	padding: 0 40px;
  	background: #1a1a1a;
  	color: white;
  	z-index: 1;
}

.progress .container
{
	float: left;
	width: 85%;
}

.progress img
{
	float: left;
	display: block;
	
}

.lemming-progress
{
	float: left;
	width: 0%;
	border-bottom: #e0d079 solid 3px;
}


.progress .lemming
{
	width: 30px; 
	height: 30px; 
	margin-top: 47px;
	float: right;
	margin-right: -20px;
}

.progress .door
{
	max-width: 100%; 
	width: auto; 
	margin-top: 40px;
	float: right;
}


/*-------------------------------------
----------------- INTRO ---------------
--------------------------------------*/

section.intro
{
  	width: 95%;
  	margin: auto;
  	padding-top: 140px;
}

h1
{
	font-size: 5.5rem;
	font-weight: 400;
	width: 50%;
	float: left;
}

h1 .light
{
	color: #5CE262;
}

h1 .bold-effect
{
	font-weight: 700;
}

h1 .bigger
{
	font-weight: 700;
	font-size: 8rem;
}

.youpi
{
	font-family: 'Kavoon', cursive;
	font-size: 2.5rem;
	text-transform: uppercase;
	float: left;
	width: 20%;
	padding-top: 260px;
}

.youpi p:first-child
{
	margin-left: 40%;
}

.youpi p:last-child
{
	color: #5CE262;
	margin-top: 50px;
	transform: rotate(-10deg);
}

.lemming-stop
{
	float: right;
	max-width: 20%;
	width: auto;
	margin-top: 250px;
}

/*-------------------------------------
--------------- HISTORY ---------------
--------------------------------------*/

section.history
{
	color: white;
	width: auto;
	text-align: center;
	background: #1a1a1a;
	padding: 130px 0;
	margin-top: -50px; 
	font-weight: 300;
}

.history p
{
	font-size: 5rem;
	font-weight: bold;
}
.history ul
{
	margin-top: 50px;
}

.history ul li
{
	margin-top: 10px;
}

/*-------------------------------------
----------------- GOAL ----------------
--------------------------------------*/

.goal
{
	width: 95%;
  	margin: auto;
  	padding: 100px 0;
}

.goal img
{
	float: left;
	max-width: 30%;
	display: block;
}

.goal-description
{
	float: right;
	width: 50%;
}

.goal-description h2
{
	margin-bottom: 40px;
	text-transform: uppercase;
	font-weight: 400;
	display: inline-block;
}

.goal-description p
{
	text-align: justify;
}

.goal-description span
{
	font-weight: 700; 
}

.goal-description span:last-child
{
	display: block;
	margin-top: 20px;
	font-weight: initial;
}

/*-------------------------------------
----------------- GOAL ----------------
--------------------------------------*/

.gameplay
{
	background: #F7F6F6;
	padding:100px 0;
}

.video
{
	margin: auto;
	width: 44%;
}

/*-------------------------------------
--------------- FOOTER ----------------
--------------------------------------*/

footer
{
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 300;
	text-align: center;
	padding-bottom: 20px;
	background: #F7F6F6;
}


/*-------------------------------------
------------ MEDIAQUERIES -------------
--------------------------------------*/

@media screen and (max-width: 1180px) {
	
	.progress .start, .progress .door {
		display: none;
	}

	.progress .container {

		float: none;
		width: 100%;
	}
}

@media screen and (max-width: 860px) {

	h1 {
	
		font-size: 4rem;
	}

	h1 .bigger {

		font-size: 5rem;
	}

	.youpi {

		font-size: 2rem;
	}

	.youpi p:first-child {
	
		margin-left: 30%;
	}

	.history p {
	
	font-size: 4rem;
	
	}

	.video {
		margin-left: 10%;
	}
}

@media screen and (max-width: 750px) {

	h1 {
	
		float: none;
		width: 100%;

	}

	.youpi {
	
		display: none;
	}



	.lemming-stop {

		margin-top: 30px;
	}

	.goal img, .goal-description {
		
		float: none;
		margin: auto;

	}

	.goal-description {
		
		width: 100%;
	}

	.goal-description h2 {
		
		display: block;
		text-align: center;
	}

	.video {
		margin-left: 0%;
	}

}