body {
  background-color: #fae6c2;
  font-family: Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

section {
  border: 2px solid gray;
  margin-top: 10px;
  margin-bottom: 15px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  margin: 0 auto;   /* centers horizontally */
  height: auto;     /* keeps aspect ratio */
}

h2 {margin: 5px}
h3 {margin: 4px}
p {margin: 3px}

.page-container {
  background: #FFFCEB;
  border: 3px solid #7D7D7D;
  margin: 20px auto;
  max-width: 900px;
  padding: 20px;
}

/* HEADER */
header {text-align: center;}

.logo img {
  display: block;   /* removes inline gap below image */
  margin: 0 auto;   /* centers horizontally */
  height: auto;     /* keeps aspect ratio */
  max-width: 100%;  /* responsive on smaller screens */
/*   width: 100%;      scales down on small screens */
}


/* MENU STUFF */

div.scrollmenu {
  background-color: #FFF;
  overflow: auto;
  white-space: nowrap;
  font-family: Arial narrow, sans-serif;
  font-weight: bold;
  font-size: 16px;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 18px 10px 18px 10px;
  text-decoration: none;
  width: 190px;
  border: 2px solid #7D7D7D;
}

div.scrollmenu a.first  {background-color: #3b82f6; margin: 0px 4px 0px 4px;}
div.scrollmenu a.second {background-color: #EF4444; margin: 0px 4px 0px 4px;}
div.scrollmenu a.third  {background-color: #22C55E; margin: 0px 4px 0px 4px;}
div.scrollmenu a.fourth {background-color: #FCA402; margin: 0px 4px 0px 4px;}

div.scrollmenu a.first.inactive  {color: black; background-color: #8BB6FA;}
div.scrollmenu a.second.inactive {color: black; background-color: #F59090;}
div.scrollmenu a.third.inactive  {color: black; background-color: #A8E9C0;}
div.scrollmenu a.fourth.inactive {color: black; background-color: #FFE159;}

div.scrollmenu a.first.inactive:hover  {color: white; background-color: #639CF8;}
div.scrollmenu a.second.inactive:hover {color: white; background-color: #F26A6A;}
div.scrollmenu a.third.inactive:hover  {color: white; background-color: #65D78F;}
div.scrollmenu a.fourth.inactive:hover {color: white; background-color: #FFC402;}

#topMenu {}
#bottomMenu {}


/* FORMAT STUFF */

.spacerBar  {height: 8px; margin: 8px 0px 8px 0px; text-align: center;}
.skinnySpacerBar  {height: 2px; margin: 2px 0px 2px 0px;}
.firstDividerBar  {color: #3b82f6; background: #3b82f6; font-size: 14px; height: 16px; margin: 8px 0px 8px 0px;}
.secondDividerBar {color: #ef4444; background: #ef4444; font-size: 14px; height: 16px; margin: 8px 0px 8px 0px;}
.thirdDividerBar  {color: #22c55e; background: #22c55e; font-size: 14px; height: 16px; margin: 8px 0px 8px 0px;}
.fourthDividerBar {color: #FCA402; background: #FCA402; font-size: 14px; height: 16px; margin: 8px 0px 8px 0px;}
.contentDividerBar {background-color: #65C1E6; height: 3px; margin: 8px 0px 8px 0px; text-align: center;}


/* MAIN CONTENT */


.mediumWidthPicture {
  width: 100%;    /* make image full width on small screens */
  max-width: 250px; /* but not too big on large screens */
  height: auto;
  border: 1px solid #ccc;
}

.largeWidthPicture {
  width: 100%;    /* make image full width on small screens */
  max-width: 500px; /* but not too big on large screens */
  height: auto;
  border: 1px solid #ccc;
}

.centeredDisplay {  /* right now, I'm using this to center large pictured */
  display: flex;
  flex: 1;
  justify-content: center;
  box-sizing: border-box; 
  align-items: center;
  margin-bottom: 10px;
}

.video-placeholder {
  width: 100%;                /* full width below content */
  height: 300px;
  background: #555;
  color: white;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;           /* space above video */
  aspect-ratio: 16 / 9; /* keeps video ratio */
}


/* ========== SECTION STYLES ========== */

.section-title {        /* each section has title-text, capitalised & inverted 
/*  flex: 1;                   why? */
/*  text-align: center;        why? */
/*  align-items: center;       why? */
/*  justify-content: center;   why? */
  background-color: gray;
  color: #FFFCEB;
  font-weight: bold;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 16px;
}

.special-section-title {
  background-color: #D783FF;
  color: #FFFCEB;
  font-weight: bold;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: 16px;
}

.section-blogpostTitle {
  font-weight: bold;
  font-size: 18px;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 25px;
}

.section-indentedContent {
  padding: 0px 30px 20px 60px;
  color: #333;
  font-size: 15px;
}


.flex-container {   /* This allows for columns on desktop and stacks content on mobile devices */
box-sizing: border-box;
  display: flex;  
  flex-wrap: wrap;
  font-size: 16px;
  margin-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  color: #333;
}

.oneColumn {padding: 10px; flex: 100%;}
.flexIntoThirds {box-sizing: border-box; padding: 10px; flex: 33%;}
.flexIntoHalves {box-sizing: border-box; padding: 10px; flex: 50%;}
.flexIntoTwoThirds {box-sizing: border-box; padding: 10px; flex: 67%;}



/* Mobile adjustments */
@media (max-width: 600px) {
/*  .top-nav, .sub-nav {flex-direction: column;}  stack buttons vertically */
/*  .nav-btn, .sub-btn {width: 100%;}             full width buttons */
/*  .project-content {flex-direction: column;}    stack text and box art */
  .video-placeholder {height: 200px;}          /* smaller video for mobile */
  body {font-size: 16px;}                      /* slightly bigger for readability */
  div.scrollmenu {font-size: 14px;}
  .firstDividerBar  {color: white;}
  .secondDividerBar {color: white;}
  .thirdDividerBar  {color: white;}
  .fourthDividerBar {color: white;}
  .flexIntoThirds {flex:100%;} 
  .flexIntoHalves {flex:100%;} 
  .flexIntoTwoThirds {flex:100%;} 
  .largeWidthPicture {max-width: 250px;}
}


/* SOCIAL MEDIA BUTTONS */
.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 25px 0px 10px 0px;
  flex-wrap: wrap;
}

.social-btn {
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #aaa;
  padding: 10px 20px;
  color: #333;
  transition: all 0s;
  border-radius: 4px;
  display: flex;
  align-items: center;       /* vertically center icon and text */
  gap: 8px;                  /* space between icon and text */
}

.social-btn.facebook:hover {     /* Hover colors for each platform */
  border: 2px solid transparent;
  background-color: #1877f2; /* Facebook blue */
  border-color: #1877f2;
  color: white;
}

.social-btn.instagram:hover {
  border: 2px solid transparent;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.social-btn.youtube:hover {
  border: 2px solid transparent;
  background-color: #ff0000; /* YouTube red */
  border-color: #ff0000;
  color: white;
}

.social-btn i {    /* Icon sizing */
  font-size: 1.1em;
}

.social-btn:active {   /* Optional: pressed effect */
  opacity: 0.85;
}


/* Wave Animation */

.wave-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.05) 0px,
    rgba(0, 0, 0, 0.05) 3px,
    transparent 2px,
    transparent 12px
  );
  animation: waveMotion 12s linear infinite;
  z-index: -1; /* keeps it behind everything */
}

@keyframes waveMotion {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-50px) translateY(10px); }
  100% { transform: translateX(0) translateY(0); }
}