/*===================
Heystacks Page
=====================
Rules for Page Container, 
Site Header, Hero Section,
Rounded Image, Captions,
and Copyright
=====================*/

* {
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;
}

.site-header img {
max-width: 1000px;
width: 100%;
height: auto;
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));
}

/*===============================
RAINBOW HUE (Header Hover Effect)
================================*/

@keyframes rainbow-hue {
0% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)) hue-rotate(0deg); }
100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)) hue-rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
.site-header a:hover img {
animation: rainbow-hue 1s linear infinite;
}
}

/*=========================
Static Hue Shift on Hover
---------
.site-header a:hover img {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)) hue-rotate(60deg);
}
---------
============================*/

/*=================
HERO SECTION: IMAGE
===================*/

.hero-section {
margin-top: 8px;
margin-bottom: 8px;
display: block;
}

.hero-container {
max-width: 1000px;
height: 440px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: stretch;
gap: 9px;
}

.hero-image-left {
flex: 0 1 551px;
}

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

.hero-image-right {
flex: 0 1 439px;
}

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

/*========
TEXT BOXES
=========*/

.text-box-jpg {
max-width: 1000px;
width: 100%;
height: auto;
margin: 0 auto;    
margin-top: 5px;
}

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

.rounded-image {
display: block;
max-width: 100%;
height: auto;
border: var(--rounded-border-width, 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));
}

.rounded-image.caption {
--rounded-border-color: #543F1E;
--rounded-border-width: 3.5px;
}

#outline-main {
--rounded-border-color: #57441E;
}

#outline-alt {
--rounded-border-color: #7A612D;
}

/*=================
HERO SECTION: IMAGE
===================*/

.sub-hero-section {
margin-top: 7px;
margin-bottom: 5px;
display: block;
}

.sub-hero-container {
max-width: 1000px;
height: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: stretch;
gap: 8px;
}

.sub-hero-image-left {
flex: 0 1 500px;
}

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

.sub-hero-image-right {
flex: 0 1 500px;
}

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

/*==============
COPYRIGHT FOOTER
===============*/

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

.footer-text img {
width: 100%;
max-width: 1000px;
height: auto;
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: 768px) {
    
.hero-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
height: auto;
padding: 0 2px;
box-sizing: border-box;
}
  
.hero-section {
align-items: center;
justify-content: center;
}

.hero-image-left {
flex: 1 1 auto;
width: 99%;
max-width: none;
justify-content: center;
margin: 0 auto;
padding-right: 0;
}

.hero-image-right {
width: 100%;
max-width: none;
justify-content: center;
margin: 0 auto;
}
  
.sub-hero-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
height: auto;
padding: 0 2px;
box-sizing: border-box;
}
  
.sub-hero-section {
align-items: center;
justify-content: center;
}
 
.sub-hero-image-left {
flex: 1 1 auto;
width: 99%;
max-width: none;
justify-content: center;
margin: 0 auto;   
padding-right: 0;
}

.sub-hero-image-right {
width: 100%;
max-width: none;
justify-content: center;
margin: 0 auto;
}
}