/* ====================
QUARTER GLOBAL RESET
==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
 
 body {
background-image: var(--bg-image);
background-size: var(--bg-size);
background-repeat: repeat;
overflow-x: hidden;
margin: 0;
padding: 0;
}

/* ====================
PAGE SETUP AND SITE HEADER
==================== */
.page-container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding-inline: 10px;
box-sizing: border-box;
}

body {
background-image: var(--bg-image);
background-size: var(--bg-size);
background-repeat: repeat;
overflow-x: hidden;
margin: 0;
padding: 0;
}
 
.site-header {
max-width: 1000px;
margin: 0 auto;
justify-content: center;
text-align: center;
padding-top: 20px;
}
 
.site-header img {
max-width: 99%;
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));
}
 
/* ====================
Five-Button Nav Bar
==================== */
.main-nav {
max-width: 1000px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}

.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));
}

.rounded-image {
display: block;
max-width: 100%;
height: auto;
border: 3.25px solid #000;
border-radius: 20px;
overflow: hidden;
}

 /* ====================
Three-Button FOOTER NAV BAR
==================== */
.footer-nav {
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
}

.footer-container {
display: flex;
width: 1000px;
max-width: 100%;
height: calc(1000px * (93 / 1086));
}

.footer-container a:nth-child(1) { width: calc(1000px * (438 / 1086)); }
.footer-container a:nth-child(2) { width: calc(1000px * (200 / 1086)); }
.footer-container a:nth-child(3) { width: calc(1000px * (448 / 1086)); }

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

.footer-container img:hover {
transform: scale(1.02);
}

/* ====================
COPYRIGHT FOOTER
==================== */
.site-footer {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 10px;
}
 
.site-footer img {
width: 100%;
max-width: 1000px;
height: auto;
display: block;
border: 3px solid #828281;
border-radius: 20px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}

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

@media (max-width: 768px) 
{
html { 
overflow-x: hidden;
overflow-y: auto;
}
  
.page-container {
width: 100%;
padding-left: 2px;
padding-right: 2px;
margin: 0 auto;
box-sizing: border-box;
}
 
.site-header {
width: 99%;
margin-top: 5px;
padding: 1px 0;
}
 
.main-nav {
flex-direction: column;
flex-wrap: nowrap;
  }

.nav-row-top,
.nav-row-bottom {
width: 100%;
justify-content: center;
}
 
.rounded-image {
display: block;
max-width: 100%;
height: auto;
border: 2px solid #000;
border-radius: 15px;
overflow: hidden;
}

.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 {
padding-bottom: 5px;
display: block;
}
 
.site-footer img {
width: 100%;
max-width: 100%;
display: block;
line-height: 0;
font-size: 0;
}
}