/**********
 * This is the CSS that is called for page parts that can be found on every pages. In it, we find
 * the rules used in all website. It contains footer and header css rules.  
 ****************************************************************************/

:root{/* GLOBAL VARIABLES DEFINITION */
--page-top-space:10vh;
 --banner-height:20vh;
 --banner-img-height:498;
 --banner-img-width:1728;
	--header-height:9vh;
	--footer-height:10vh;
	--background-tone:254;
	--background-fade:245;
	--tone: 120;
	--fade:70;
	--dark-level:70;
}

.red {
	--global-color: rgb(var(--tone),var(--fade),var(--fade));
	--global-darker:rgb(calc(var(--tone) - var(--dark-level)), calc(var(--fade) - var(--dark-level)),calc(var(--fade) - var(--dark-level)));
}

.back-red{
	--global-background:rgb(var(--background-tone),var(--background-fade),var(--background-fade));
}

.green{
	--global-color: rgb(var(--fade),var(--tone),var(--fade));
	--global-darker:rgb(calc(var(--fade) - var(--dark-level)), calc(var(--tone) - var(--dark-level)), calc(var(--fade) - var(--dark-level)));
}

.green-menu{
	--global-darker:rgb(calc(var(--fade) - var(--dark-level)), calc(var(--tone) - var(--dark-level)), calc(var(--fade) - var(--dark-level)));
}

.green-blue-head-foot{
	--global-color: rgb(var(--fade),var(--tone),calc(var(--fade) + 60));
}

.green-blue-menu-darker{
	--global-darker:rgb(calc(var(--fade) - var(--dark-level)), calc(var(--tone) - var(--dark-level)), calc(var(--fade) - var(--dark-level) + 60));
}

.back-green{
	--global-background:rgb(var(--background-fade),var(--background-tone),var(--background-fade));
}

.back-yellow{
	--global-background:rgb(var(--background-tone),var(--background-tone),var(--background-fade));
}

/*
.blue {
	--global-color: rgb(var(--tone),var(--fade),var(--fade));
	--global-darker:rgb(calc(var(--tone) - var(--dark-level)), calc(var(--fade) - var(--dark-level)),calc(var(--fade) - var(--dark-level)));
}

.back-blue{
	--global-background:rgb(var(--background-tone),var(--background-fade),var(--background-fade));
}*/



/* THE FOLLOWING IS FOR ANIMATION WHILE PAGE IS LOADING */
#loadingAnimation {
	    z-index:5;
	    position: absolute;
	    top:0px;
	    left:0px;
	    width: 100vw;
	    height: 100vh;
	    background: var(--global-color) url('../images/loading.gif') no-repeat fixed center;
}
/******************************************************************/

#browser-tag{ /* for testing only */
  position: fixed;
  top:0px;
  right:0px;
  padding:5px;
  height:120px;
  width:250px;
  font-size:15px;
  z-index:6;
}

#nav-name{
  font-size:20px;
}

body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

.page-top{
	position:fixed;
	top:0px;
	width:100%;
	height:var(--header-height);
	z-index:3;
}

#the-title{
	background-color: var(--global-color); /* COLORS INVERTED */
	color: var(--global-background);
	font-size:6vh;
	padding:10px;
	padding-left:30px;
	width:100%;
}

#actual-section{
	padding:0px;
	padding-left:30px;
	color: rgb(100,100,100);
	background-color: var(--global-background);
	width:100%;
}

#the-title{
  font-family: "Pinyon Script", cursive;
   font-weight: 400;
   font-style: normal;
}

.footer{
    /*z-index:3;*/
	text-align:justify;
	font-size:0.7em;
	background-color: var(--global-color); /* color inverted */
	color:var(--global-background);
	padding:0.3em;
	padding-left:30px;
	/*bottom:0px;
	left:0px;*/
	width:100%;
	position:relative;
	/*top:calc(100vh - var(--footer-height));*/
	height:var(--footer-height);
}

.footer p {
	color:var(--global-background);
}

#mail {
  color:var(--global-background);
}



/*THE FOLLOWING IS CONSIDERED WHEN DOING RESPONSIVE DESIGN*/
@media screen and (min-device-width: 1570px) {

	.footer{
		font-size:1em;
	}
}

/*
@media screen and (max-device-width: 800px) {

	.page{
		display: grid;
		grid-template-columns:1fr;
		grid-template-rows: 4.5em 5em 9.5em 10em 50em;
		grid-gap: 0;
		min-width:100%;
		margin:0px;
		padding:0px;
	}

	.left-side{
		position:fixed;
		top:9.5em;
		left:0px;
		padding:5px;
	}

		.menu-button-container{
		width:30px;
		height:30px;
		display:block;
	}

	.menu-item{
		font-size:0.8em;
		padding:1px;
		display:none;
	}

	.side-separator {
		display:none;
	}

	.mainContent{
		grid-row: 5;
		margin-left:5%;
		margin-right:5%;
		font-size:1.2em;
	}
}*/