/* VARIABLES
======================================================================================================== */

:root{
	--bg : url("../images/bgs/background_index_day.jpg");
}

/* ALL
======================================================================================================== */

html{
	scroll-behavior: smooth;
}

body {
	background: var(--bg) fixed no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

/* NAV
======================================================================================================== */

nav {
	position: fixed;
	right : 1%;
	
	width : 50%;
	height: 100%;

	display : flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-end;
}

#nav_up, #nav_down{
	margin-right: 1%;

	display: flex;
	align-items: center;
}

#nav_middle{
	display: flex;
	align-items: center;
	justify-content: space-between;

	height : 65%;
	width: 87%;
}

	#nav_middle #horloge{
		display: flex;
		flex-direction: column;
		align-items: center;	
	}
	#nav_middle #horloge h1{
		font-size: 70px;
		letter-spacing: 5px;
	}
	#nav_middle #horloge h2{
		font-size: 35px;
	}

	nav #buttons{
		width: 50%;
		height: 90%;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	nav #buttons button{
		width: 100%;
		padding : 20px;

		font-size: 20px;
		font-weight: bold;
		color : var(--text-color);
		
		background-color: var(--main-color-2);
		border : solid var(--secondary-color-1) 3px;
		border-radius: 1em;

		
	}
	nav #buttons button:hover{
		background-color: var(--main-color-1);
	}


/* MAIN
============================================================================================================ */

#all {
	width: 55%;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
	#all section{
		height: 99vh;

		display: flex;
		justify-content: center;
		align-items: center;

		
	}

	#all section article{
		width: 90%;
		padding : 2% 0% 4% 0%;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;

		border-radius: 2.5em;
		background-color: rgba(255, 255, 255, 0.5);
	}

	#all section article *{
		margin : 3% 0 0 0;
	}

	#all section article img{
		width: 60%;
		border: solid var(--secondary-color-1) 3px;
	}

	#all section article p{
		width : 50%;
		text-align: center;
	}

	#all section article button{
		width: 25%;
		padding: 15px;

		color : var(--text-color);
		font-weight: bold;
		font-size: 0.9em;
		text-align: center;
		background-color: var(--secondary-color-1);

		border: none;
		border-radius: 2.5em;
	}

	#all section article button:hover{
	}

footer{
	position: fixed;
	bottom: 2%;
	width: 100%;

	display: flex;
	justify-content: center;
}

	footer #goUp{
		display: none;
		padding : 20px;
		border-radius: 50%;

		background-color: var(--secondary-color-1);
	}

	footer #goUp #goUp_img{
		
		border-radius: 50%;

		vertical-align: middle;
	}


/* RESPONSIVE 
============================================================================================================ */

@media all and (orientation: portrait){

	nav{
		position: relative;
		
		right: 0;
		height : 90vh;
		width: 100%;

		flex-direction: row;
		align-items: flex-start;
	}

	#nav_up,#nav_down{
		margin: 2% 0 0 0;
	}

	#nav_middle{
		margin-top : 8%;
		height: 90%;
		width: 60%;

		flex-direction: column;
	}

	#nav_middle #buttons{
		width: 90%;		
	}

	#all{
		width: 100%;
	}
	
	#all section{
		height : 85vh;
	}

	#all section article{
		width: 95%;
		padding: 3% 0;
	}

	#all section article *{
		margin : 3% 0;
	}

	#all section article img, #all section article p{
		width: 80%;
	}

	#all section article button{
		width: 50%;
	}

	footer #goUp{
		display: initial;
	}

}