@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');


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

html, body { padding: 0; margin: 0; scroll-behavior: smooth;
scrollbar-color:rgb(0, 0, 0); scrollbar-width:none; /* transition:2s; */
font-family: "Archivo Black", sans-serif; }

#outer-shell { width:100vw; }


@media (max-width: 3500px) 
{

body {  }

#outer-shell {width:60%; margin:0 auto;}

#outer-wrapper {grid-area:outer-wrapper;
/* display: flex; justify-content: center; align-items: center; text-align: center; */
display: grid; color:white;
grid-template-columns: 100%;                     /*  page/column width - 100% of 50% from #outer-shell.  */
grid-template-rows: auto;             /* section/row height */
grid-template-areas:
"upper-shell"
"mid-shell"
"bottom-shell"; }


/*  **** HEADER AREA ***  */

#upper-shell { grid-area:upper-shell; width:100%; }

#upper-shell > #header {grid-area:header; display: grid;
width:60%; height:11vh;
background-color: white;                                            /* FIXED POSITION width MUST BE SET TO #outer-shell width  */
position: fixed; top:0; z-index:99;
border-top:solid 2px #f1f1f1;                 
grid-template-columns: 100%;                                         /* page/column width */
grid-template-rows: auto;                                 /* section/row height */
grid-template-areas:
"fixed4"
"fixed3"
"fixed2" ; }

#header > #fixed1 { grid-area:fixed1; 
width:100%;
border-bottom:solid 1px black;
display: flex; justify-content: center; align-items: center; text-align: center;
grid-template-columns: auto auto auto;                                          /* page/column width */
grid-template-rows: auto;                                                      /* section/row height */
grid-template-areas:
"fixed1-left"
"fixed2-center"
"fixed3-right" ; }

#fixed1 > .fixed1-left {grid-area:fixed1-left; width:25%; 
display: flex; justify-content: center; align-items: center; text-align: center;}
.fixed1-left a {font-size:1vw; color:#333;}

#fixed1 > .fixed1-center {grid-area:fixed1-left; 
width:50%;
display: flex; justify-content: center; align-items: center; text-align: center;}
.fixed1-center img { width:80%; height:auto; padding:1%; object-fit: cover;  overflow: hidden; */ }

#fixed1 > .fixed1-right {grid-area:fixed1-left; 
width:25%;
display: flex; justify-content: center; align-items: center; text-align: center;}
.fixed1-right a {font-size:1vw; color:#333;}

#header > #fixed2 { grid-area:fixed2; 
width:100%; height:3vh;
background-color:#333; 
display: flex; justify-content: center; align-items: center; text-align: center;}
#fixed2 a {color:white; font-size:.9vw; margin-right:3%; text-decoration: none;}
#fixed2 img {width:80%;}

#header > #fixed3 { grid-area:fixed3; 
width:100%; height:3vh;
display: flex; justify-content: center; align-items: center; text-align: center;}
#fixed3 a {color:#111; font-size:.8vw; margin-right:2%;}

#header > #fixed4 { grid-area:fixed4; 
width:100%; height:8vh;
border-bottom:solid 2px white;
display: flex; justify-content: center; align-items: center; text-align: center;
background-image:url('bros_240.gif'); background-repeat: no-repeat; background-size: 100%;
background-position: 50%; }
#fixed4 a {text-decoration: none;}
#fixed4 p { width:100%; height:auto;
font-size:2.5vw; color:white; text-shadow: 5px 2px 2px maroon;
display: flex; justify-content: center; text-align: center; align-items: center;}


/* ****  MID SECTION   *** */

#mid-shell {grid-area:mid-shell; display:grid;
width:60%; height:150vh;
position:absolute; top:12vh;
border-top:solid 1px black;
grid-template-columns: 100%;                                /* page/column width */
grid-template-rows: 20vh;                                 /* section/row height */
grid-template-areas:
"mid1"
"mid6"
"mid-marquee"
"mid2"
"mid3"
"mid4"
"mid5"
"mid7"
"mid8" ; }


#mid-shell > #mid1 {grid-area:mid1; display: grid;
width:100%; 
border-bottom:solid 2px white;
grid-template-columns: 33.2% 33.6% 33.2%;                       /* page/column width */
grid-template-rows: 5vh auto;                             /* section/row height */
grid-template-areas:
"mid1-left-top mid1-center-top mid1-right-top"
"mid1-left-bot mid1-center-bot mid1-right-bot" ;}

#mid1 > .mid1-left-top {grid-area: mid1-left-top;
font-size:1.5vw; background-color: white; color:#222;
width:100%; height:5vh; font-family: "BBH Sans Hegarty", sans-serif; 
display: flex; justify-content: center; align-items: center; text-align: center;}
#mid1 > .mid1-center-top {grid-area: mid1-center-top;
font-size:1.5vw;background-color: white; color:#222;
width:100%; height:5vh; font-family: "BBH Sans Hegarty", sans-serif;
display: flex; justify-content: center; align-items: center; text-align: center;}
#mid1 > .mid1-right-top {grid-area: mid1-right-top;
font-size:1.5vw;background-color: white; color:#222;
width:100%; height:5vh; font-family: "BBH Sans Hegarty", sans-serif;
display: flex; justify-content: center; align-items: center; text-align: center;}

#mid1 > .mid1-left-bot {grid-area: mid1-left-bot;
width:100%; height:auto; border-right:solid 1px white;
background-color: #333;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid1-left-bot p {font-size:22px; font-family: "Atkinson Hyperlegible Next", sans-serif; 
object-fit: cover; overflow: hidden; padding:5%;}

#mid1 > .mid1-center-bot {grid-area: mid1-center-bot;
width:100%; height:auto;
background-color: #333;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid1-center-bot p {font-size:22px; font-family: "Atkinson Hyperlegible Next", sans-serif;
object-fit: cover; overflow: hidden; padding:5%;}

#mid1 > .mid1-right-bot {grid-area:mid1-right-bot;
width:100%; height:auto; 
background-color: #333; border-left:solid 1px white;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid1-right-bot p {font-size:22px; font-family: "Atkinson Hyperlegible Next", sans-serif;
object-fit: cover; overflow: hidden; padding:5%;}



#mid-shell > .mid2 { grid-area:mid2;
width:100%;
margin-bottom:1%; background-color: #111;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid2 img {width:100%; max-height:99%; z-index:3; 
object-fit: cover; overflow: hidden; opacity:20%;}
.mid2 H1 {font-size:3.8vw; font-family: "Lacquer", system-ui; color:maroon; 
text-shadow: 2px 1px 1px white;
z-index:3; position: absolute; top: calc(20% - 20px)}

#mid-shell > .mid3 { grid-area:mid3; 
width:100%;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid3 img {width:100%; height:auto; }

#mid-shell > #mid4 { grid-area:mid4; display: grid;
width:100%; 
border-bottom:solid 2px white;
grid-template-columns: 33.2% 33.6% 33.2%;                       /* page/column width */
grid-template-rows: 5vh auto;                             /* section/row height */
grid-template-areas:
"mid4-left-top mid4-center-top mid4-right-top"
"mid4-left-bot mid4-center-bot mid4-right-bot" ; }

#mid4 > .mid4-left-top {grid-area: mid4-left-top;
font-size:1.5vw; background-color: white; color:#222;
width:100%; height:5vh; font-family: "BBH Sans Hegarty", sans-serif; 
display: flex; justify-content: center; align-items: center; text-align: center;}
#mid4 > .mid4-center-top {grid-area: mid4-center-top;
font-size:1.5vw;background-color: white; color:#222;
width:100%; height:5vh; font-family: "BBH Sans Hegarty", sans-serif;
display: flex; justify-content: center; align-items: center; text-align: center;}
#mid4 > .mid4-right-top {grid-area: mid4-right-top;
font-size:1.5vw;background-color: white; color:#222;
width:100%; height:5vh; font-family: "BBH Sans Hegarty", sans-serif;
display: flex; justify-content: center; align-items: center; text-align: center;}

#mid4 > .mid4-left-bot {grid-area: mid4-left-bot;
width:100%; height:auto; border-right:solid 1px white;
background-color: #333;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid4-left-bot p {font-size:22px; font-family: "Atkinson Hyperlegible Next", sans-serif; 
object-fit: cover; overflow: hidden; padding:5%;}

#mid4 > .mid4-center-bot {grid-area: mid4-center-bot;
width:100%; height:auto;
background-color: #333;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid4-center-bot p {font-size:22px; font-family: "Atkinson Hyperlegible Next", sans-serif;
object-fit: cover; overflow: hidden; padding:5%;}

#mid4 > .mid4-right-bot {grid-area:mid4-right-bot;
width:100%; height:auto; 
background-color: #333; border-left:solid 1px white;
display: flex; justify-content: center; align-items: center; text-align: center;}
.mid4-right-bot p {font-size:22px; font-family: "Atkinson Hyperlegible Next", sans-serif;
object-fit: cover; overflow: hidden; padding:5%;}


#mid-shell > .mid5 { grid-area:mid5; 
background-color: #222;
display: flex; justify-content: center; align-items: center; text-align: center;
font-size:1.5vw; font-family: "aldrich", serif; padding:1%;}

#mid-shell > #mid6 { grid-area:mid6; display: grid;
width:100%; border:solid 2px black;
display: flex; justify-content: center; text-align: center; align-items: center;
grid-template-columns: 33.2% 33.6% 33.2%;                       /* page/column width */
grid-template-rows: auto;                             /* section/row height */
grid-template-areas:
"leftcol centercol rightcol" ; }

#mid6 > .leftcol {grid-area:leftcol; display: grid;
width:100%; height:auto; text-align: center; }
.leftcol a {font-size:1vw; margin-top:10%;
display: flex; justify-content: center; text-align: center; align-items: center; 
color:black; }

#mid6 > .centercol {grid-area:centercol; display: grid;
width:100%; height:auto; text-align: center; }
.centercol a {font-size:1vw; margin-top:10%;
display: flex; justify-content: center; text-align: center; align-items: center; 
color:black; }

#mid6 > .rightcol {grid-area:rightcol; display: grid;
width:100%; height:auto; text-align: center; }
.rightcol a {font-size:1vw; margin-top:10%;
display: flex; justify-content: center; text-align: center; align-items: center; 
color:black; }

#mid-shell > .mid7 { grid-area:mid7; 
width:100%; 
display: flex; justify-content: center; align-items: center; text-align: center;
font-size:1.5vw; color:#555; font-family: "aldrich", serif; padding:1%;}

#mid-shell > #mid8 { grid-area:mid8; 
width:100%; 
border-bottom:solid 1px black; color:#222;
display: flex; justify-content: center; align-items: center; text-align: center;}


#mid-shell > .mid-marquee { grid-area:mid-marquee; 
width:100%; height:auto;
background-color:white;
display: flex; justify-content: center; align-items: center; text-align: center;}





#bottom-shell {grid-area:bottom-shell;
width:auto; background-color:#222;}


#mid8 > #waterfish {
width:auto; max-height:50%;
margin:0 auto; position:absolute; top:16%;
display: flex; justify-content: center; align-items: center; text-align: center;}

#waterfish > .water {width:100%; height:auto;}
.water img {width:60%; height:auto;  clip-path: circle(50% at 50% 50%); z-index:3; }

#waterfish > .fish {width:100%; height:auto; padding-top:2%; position: absolute;}
.fish img {width:60%; z-index:9;}



}



@media (max-width: 2500px) 
{
body {background-color: rgb(6, 206, 22);}
}


@media (max-width: 2000px) 
{
body {background-color:white;}
}







@media (max-width: 1500px) 
{
body {background-color: aqua;}
#outer-shell {width:80%; margin:0 auto;}

#upper-shell > #header {
grid-area:header; display: grid;
width:80%; height:18vh; }

#mid-shell {grid-area:mid-shell; display:grid;
width:80%; height:150vh; }
}




/*  *** MOBILE DISPLAY SETTINGS ***  */

@media (max-width: 800px) 
{
body {background-color: rgb(255, 0, 0);}
#outer-shell {width:90%; margin:0 auto;}

#upper-shell > #header {
grid-area:header; display: grid;
width:90%; height:18vh; }


#mid-shell {grid-area:mid-shell; display:grid;
width:90%; height:150vh; }


}




@media (max-width: 400px) 
{
body {background-color: rgb(223, 210, 40);}
#outer-shell {width:90%; margin:0 auto;}

#upper-shell > #header {
grid-area:header; display: grid;
width:90%; height:18vh; }

#mid-shell {grid-area:mid-shell; display:grid;
width:90%; height:150vh; }

}







/* -----------------------------------------------------
   Marquee Structure (Footer)
----------------------------------------------------- */

/* The outer container — holds everything in place */
.marquee {
  position: relative;
  width: 100%;
  min-height: 10vh;
  overflow: hidden;
  /* background: #fff; 
  border-top: 3px solid #e9f7fe; */
  display: flex;
  align-items: center;
}

/* The moving "track" that slides left to right */
.marquee__track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
}

/* Animation: moves the track smoothly across the screen */
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Each block of repeated content (we duplicate it in HTML) */
.marquee__content {
  display: inline-flex;
  flex-shrink: 0; /* Prevents shrinking */
}

/* The list and items inside the marquee */
.marquee__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Base style for all items */
.marquee__item {
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image-specific item */
.marquee__item--image {
  width: 12rem;
}

/* Image formatting */
.marquee__item--image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text item formatting */
.marquee__item--text h3 {
  font-size: 2rem;
  margin: 0;
  white-space: nowrap;
}