/* FONTS */

@font-face {
	font-family: Montriva;
	src: url('Montriva.ttf');
}

@font-face {
	font-family: Porcile;
	src: url('Porcile.ttf');
}

@font-face {
	font-family: HelveticaNeue;
	src: url('HelveticaNeue.ttf');
}

@font-face {
	font-family: HelveticaNeueBold;
	src: url('HelveticaNeueBold.ttf');
}

@font-face {
	font-family: HelveticaNeueItalic;
	src: url('HelveticaNeueItalic.ttf');
}






strong {
	font-family: HelveticaNeueBold;
}

em {
	font-family: HelveticaNeueItalic;
}

p {
	font-family: HelveticaNeue;
}

h1 {
	font-size: 1.5rem;
	font-family: Montriva;
	font-color: #333;
	padding: 0px;
}

h2 {
	font-size: 1.3rem;
	font-family: Montriva;
	font-color: #333;
	padding: 5px;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	font-color: #333;
	text-decoration: underline;
}





/* WHA SHRINE */

body {
	background-image: url('img/wha_bg.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.page {	
    	width: 800px;
	margin: 50px auto;
	height: 100%;
	background: white;
	border: 4px solid #333;
}

.horizontal-line {
	width: 800px;
	border-bottom: 4px solid #333;
	margin: 5px 0;
	
}

.home-button {
	position: fixed;
        top: 40px;       /* Spacing from the top edge */
        left: 40px;      /* Spacing from the left edge */
        width: 150px;    /* Set your desired width */
        height: 75px;   /* Set your desired height */
        z-index: 9999;
	display: block;
}

.home-button img {
	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s ease; /* Makes the swap smooth */
}

.home-button .hover-img {
	opacity: 0;
}

.home-button:hover .default-img {
        opacity: 0;
}	

.home-button:hover .hover-img {
        opacity: 1;
}

.home-grid {
	display: grid;
	grid-template-columns: 397.5px 397.5px;
	
	text-align: center;
	width: auto;
	height: auto;
	gap: 5px;
	justify-items: flex-start;
	grid-template-areas:
		"header header"
		"nav nav"
		"cover intro"
		"progress progress"
}

.header {
	grid-area: header;
	width: 100%;
	box-sizing: border-box;
}

.outline {
	border-bottom: 4px solid #333;
	box-sizing: border-box;
}

.nav {
	grid-area: nav;
}

.nav ul {
	display: flex;
	flex-direction: row:
	flex-wrap: wrap;
	text-align: center;
	text-decoration: none;
	list-style: none;
	font-family: Montriva;
	font-size: 1.3rem;
	font-color: #333;
}

.nav li {
	background-color: #d3e2f4;
	border-radius: 5px;
	padding: 5px;
	margin: 5px;
}

.intro {
	grid-area: intro;
	padding: 0px 20px;
	text-align: left;
}

.cover {
	grid-area: cover;
	margin: auto;
}