/* Global */
body {
font-family:'system-ui', 'sans-serif';

}
/*HEADER */
header h1{
text-align: center;
}
/*Background Image Container for HEADER. To manipulate the opacity of the background image. */
.background-image-container {
position: relative;
overflow: hidden;
}

.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../images/Rainier1200PX.jpg');
background-size: cover;
background-position: center;
z-index: -1; /* Behind the content */
}
.intro {
text-align: left;
}
.content {
position: relative;
z-index: 1; /* Ensure the content is above the background */
}

/* Navigation */
#topnav{
display:grid;
grid-column: 1;
grid-row: 5;
text-align: left;}

#topnav a {
text-decoration: none;
width: 100px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;}

#topnav a:hover {
background-color: rgb(91, 235, 24);
text-shadow: 3em;
filter: drop-shadow(3em 3em 3em rgb(0,0,0) );
width: 300px;}


#bottomnav {flex: auto;}
ul {list-style-type: none;}


/* PAGE CONTENT */
iframe {border-style: none;}

section h2 {
background-image: url('../images/Forest504PX.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-color: rgb(0, 0, 0);
height: auto;
width: 50%;
padding: 10px 0px 10px 0px;
margin: 15px 0px 15px 0px;
color: rgb(255, 255, 255);}

#images, #videos, #contacts {
margin-top: 1rem;
padding-top: 2rem;}
#contacts {
text-align: center;
}

/* FOR PAGE LINKS*/
ul.pagelinks {
padding-left: 0;
list-style: none;
display: block;}
ul.pagelinks p {
text-align: left;
font-size: 2em;
font-weight: 700;}

.pagelinks a {
font-size: 1.5em;
display: block;
text-align: center;
text-decoration: none;

background-image: url('../images/Forest504PX.jpg');
background-repeat: no-repeat;
background-size: 100%;
background-color: rgb(0, 0, 0);
height: auto;
width: 35%;
padding: 10px 0px 10px 0px;
margin: 15px 0px 15px 0px;
color: rgb(255, 255, 255);}

@keyframes jump {
0% {transform: translate(0,0);}
50% {transform: translate(0,-1em);}
100% {transform: translate(0,0);}}

.pagelinks a:link {
transition: background-color .5s, filter 1s;}

.pagelinks a:hover {
font-size: 2em;
font-weight: 600;
background-color: rgb(231, 186, 83);
filter: drop-shadow(15px 15px 15px #000000);
animation: jump .5s cubic-bezie(.49,1.63,.98,.03);
text-shadow: 4em;}

/* Contact section */

/* Footer */
footer {
text-align: center;
color: rgb(0,0,0);
font-weight: 900;
padding-top: 2.5rem;
margin-top: 5rem;
}