@charset "utf-8";
/* CSS Document */

body {
	background-color:#500;
	color:gold;
	margin: 0;
}

div {
	padding-left: 50px;
}
			
			.bg {
				/* The image used */
				background-image: url("assets/images/printCoverRHSghost.png");
				
				/* Full height */
				height: 100%; 
				
				/* Center and scale the image nicely */
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			
			.header {
				background-color: #400;
				color:yellow;
				font-size:55px;
				grid-area: header;
				padding:50px;
				height: 100px;
				width: 100%;
			}
			.main {
				background-color: #500;
				height: 100%;
				padding:80px;
				width:50%;
			}
			.footer {
				background-color: #400;
				color:gold;
				font-size:14px;
				grid-area: footer;
				padding:20px;
				padding-bottom: 80px;
				text-align: center;
				height: 100px;
				width: 100%;
			}
			
			a.one:link {color:gold;}
			a.one:visited {color:yellow;}
			a.one:hover {color:orange;}
			
			#myBtn {
				display: none;
				position: fixed;
				bottom: 20px;
				right: 30px;
				z-index: 99;
				font-size: 18px;
				border: none;
				outline: none;
				background-color: #600;
				color: gold;
				cursor: pointer;
				padding: 15px;
				border-radius: 4px;
			}
			
			#myBtn:hover {
				background-color: #700;
			}
			
			.grid-container {
				display: grid;
				grid-template-areas:
					'header'
					'menu'
					'main'
					'facts'
					'footer';
				background-color: #500;
				gap: 10px;  
			}
			
			.menu {
				grid-area: menu;
			}
			
			.menu ul {
				list-style-type: none;
				
				margin: 0;
				padding: 0;
			}
			
			.menu li {
				padding: 8px;
				margin-bottom: 7px;
				background-color: #700;
				color: gold;
			}
			
			.menu li:hover {
				background-color: #800;
			}
			
			.content {
				grid-area: main;
			}
			
			.content > h1 {
				font-size: 30px;
				margin-bottom: 7px;
			}
			
			.content > p {
				margin-bottom: 7px;
			}
			
			.facts {
				grid-area: facts;
				border: 1px solid #400;
				background-color: beige;
				padding: 10px;
			}
			
			.facts > h2 {
				font-size: 20px;
			}
			
			.facts li {
				margin-bottom: 5px;
			}
			
			@media (min-width: 600px) {
				.header {grid-area: 1 / span 6;}
				.menu {grid-area: 2 / span 1;}
				.content {grid-area: 2 / span 4;}
				.facts {grid-area: 2 / span 1;}
				.footer {grid-area: 3 / span 6;}
			}