/*============================
AWKWARD SITEWIDE GLOBAL RESET 
==============================
Rules for Page Container, 
Site Header, Rounded Image, 
Captions,and Footer Nav
===========================*/

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/*============
PAGE CONTAINER
==============*/

.page-container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}

body {
background-image: var(--bg-image);
background-size: var(--bg-size);
background-repeat: repeat;
overflow-x: hidden;
margin: 0;
padding: 0;
}

/*=========
SITE HEADER
==========*/

.site-header {
max-width: 1000px;
width: 100%;
margin: 0 auto;
justify-content: center;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
position: relative;
}

.site-header img {
width: 100%;
height: 100%;
display: block;
transition: filter 0.4s ease;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.site-header .img-hover {
position: relative;
top: 0;
left: 0;
display: none;
}

.site-header:hover .img-default {
display: none;
}

.site-header:hover .img-hover {
display: block;
}

/*======================
Six-Button MAIN NAV BAR
========================*/

.main-nav {
max-width: 1000px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-bottom: 7px;
}

.nav-row-top,
.nav-row-bottom {
display: flex;
justify-content: center;
align-items: center;
}

.main-nav a img {
width: 99%;
height: auto;
display: block;
}

.main-nav a:hover img {
transform: scale(1.05);
}

.main-nav a img,
.footer-nav a img {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
transition: filter 0.2s ease;
}

.main-nav a:hover img,
.footer-nav a:hover img {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1));
}

/*============
PAGE ELEMENTS
==============*/

.rounded-image {
display: block;
max-width: 100%;
height: auto;
border: 3.25px solid var(--rounded-border-color, #000);
border-radius: 20px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/*==============================================
SAMPLES WITH CAPTIONS (side-by-side image pairs)
================================================*/

.two-images {
display: flex;
justify-content: center;
gap: 3px;
margin-bottom: 2px;
flex-wrap: nowrap;
}

.image-block {
max-width: 540px;
margin: 4px;
}

.image-block img {
width: 100%;
height: auto;
display: block;
}

.still-link img {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
}

.still-link:hover img {
transform: scale(1.02);
}

/*===========
CAPTION PNGS
===========*/

.caption {
margin-top: 4px;
width: 100%;
}

.caption img {
margin-top: 4px;
width: 100%;
max-width: 540px;
height: auto;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) 
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); transition: transform 0.25s ease, opacity 0.25s ease;
}

.caption-link img:hover {
transform: scale(1.05);
}

.large-image {
max-width: 1000px;
width: 100%;
margin: 0 auto;
margin-top: 8px;
margin-bottom: 8px;
}

.large-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}

/*===================
TEXT BOX (PNG FORMAT)
====================*/

.text-box {
max-width: 1000px;
width: 100%;
height: auto;
margin: 0 auto;    
margin-top: 5px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.text-box img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0 auto;    
}

/*===================
FOOTER NAVIGATION BAR
=====================*/

.footer-nav {
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
padding-bottom: 20px;
}

.footer-container {
display: flex;
width: 1000px;
max-width: 100%;
gap: 5px;
height: calc(1000px * (109 / 1085));
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.footer-container a {
position: relative;
display: block;
}

.footer-container a:nth-child(1) { width: calc(1000px * (441 / 1085)); }
.footer-container a:nth-child(2) { width: calc(1000px * (172 / 1085)); }
.footer-container a:nth-child(3) { width: calc(1000px * (472 / 1085)); }

.footer-container img {
width: 100%;
height: 100%;
display: block;
}

.footer-container a .img-hover {
position: absolute;
top: 0;
left: 0;
display: none;
}

.footer-container a:hover .img-default {
display: none;
}

.footer-container a:hover .img-hover {
display: block;
}

.footer-container a:hover img {
transform: scale(1.02);
}
/*==============
COPYRIGHT FOOTER
===============*/

.site-footer {
width: 100%;
text-align: center;
margin-top: 5px;
padding-bottom: 20px;
}

.site-footer img {
width: 100%;
max-width: 1000px;
height: auto;
border: 3px solid #828281;
border-radius: 20px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
display: block;
}

/*===============
MOBILE RESPONSIVE
=================*/

@media (max-width: 700px) {

.page-container {
width: 100%;
padding-left: 2px; 
padding-right: 2px; 
margin: 0 auto;
box-sizing: border-box;
}

.site-header {
width: 99%;
margin-top: 3px;
padding: 1px 0;
}

.main-nav {
flex-direction: column;
flex-wrap: nowrap;
}

.nav-row-top,
.nav-row-bottom {
width: 100%;
justify-content: center;
}

.large-image {
max-width: 1000px;
width: 98.5%;
margin: 0 auto;
margin-top: 3px !important;
margin-bottom: 3px;
}

.rounded-image {
border-width: 2.25px;
border-radius: 10px;
}

.two-images {
flex-direction: column;
align-items: center;
}

.image-block {
max-width: 98%;
}

.footer-nav {
max-width: 99%;
height: auto;
justify-content: center;
align-items: center;
}

.footer-container {
width: 99%;
height: auto;
margin: 0 auto;
gap: 2px;
}

.footer-container a {
flex: 1 1 auto;
}

.footer-container img {
width: 100%;
height: auto;
display: block;
}

.site-footer {
margin: 0 auto;
max-width: 99%;
display: block;
padding-bottom: 7px;
}

.site-footer img {
width: 98%;
max-width: 100%;
height: auto;
display: block;
border-width: 1.5px;  
}
}