/*
 *
 * Author: Nadeem Elahi
 * Email: nad@3deem.com
 * Socials: nadeem.elahi@gmail.com
 * 	linkedin.com/in/nadeemelahi
 * 	github.com/nadeemelahi
 * 	youtube.com/@nadeemelahi593
 */

/* fonts */
h1 , h2 , h3 { 
	font-family :  Arial , Helvetica , sans-serif ; 
	text-align : center ;  
}
p , a { font-family : "Times New Roman" , Times , serif }
/* ENDS fonts */

/* #fs z-index : 10
 * #fs > headerShowHide z-index : 40
 * #fs > header z-index : 30 
 * #fs > article z-index : 20 - also fullscreen
 *  
 */
html { height : 100% ; }
body { 
	height : 100% ;
	margin : 0 ; 
	background-color : #dee; 
}
main#fs {
	height : 100% ;
	width : 100% ; 
	position : relative ;
	z-index: 10 ;
	top: 0 ; left : 0 ;
	background-color : #eed;
}
/* END #fs */

/* #headerShowHide */
section#headerShowHide ,
section#footerShowHide {
	position : absolute;
	left : 50% ;
	z-index : 40 ;
	transform : translate(-50%,0);
	-ms-transform : translate(-50%,0);
}
section#headerShowHide {
	top : 0 ;
}
section#footerShowHide {
	bottom : 0 ;
}

button#headerShow ,
button#headerHide ,
button#footerShow ,
button#footerHide {
	display : inline-block ;
	width : 50px ;
	height : 30px ; 
	/* matching top: 30px of main#fs > header below */
	font-size : 15px ;
}
button#headerShow ,
button#footerShow {
	display : none ;
}
/* ENDS #headerShowHide */

/* #header */
#header , #footer { 

	position : absolute ;
	left : 50% ;
	z-index : 30 ;

	transform : translate(-50%,0);
	-ms-transform : translate(-50%,0);

	background-color : #ff00ff ;
	background-color : rgba( 255 , 0 , 255 , 0.8 ) ;

	visibility : visible ;
	opacity : 1.0 ;
	transition : visibility 1s , opacity 1s ;
}


/* top matching hieght of button#headerShow/Hide above */
#header { 
	top : 30px ; 
}
#footer { 
	bottom : 30px ; 
	width : 100% ;
}

#header > h1 , 
#footer > h3 { 
	text-align : center ;
	padding : 15px ;
	background-color : #ff0000 ;
	background-color : rgba( 255 , 0 , 0 , 0.5 ) ;
}
#header > p , 
#footer > p { 
	text-align : center ;
	background-color : yellow ;
}
/* END #header */

/* #article -also fullscreen */

#article {
	position : absolute ;
	top : 0 ;
	left : 0 ;
	z-index : 20 ;

	width: 100% ;
	height: 100% ;

	background-color: #faf;
}
section#h2p {
	position : relative ;
	top : 30px ;
	/* matching top: 30px of main#fs > header below */
	/* first child's (ie h1's) margin over flows above */
	z-index : 10 ;

	background-color: #aaf;
}