body {
    font-family: nunito;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding-top: 150px;
}

body::-webkit-scrollbar {
    display: none;
}


/* Header and Elements */

#header {
    position: fixed;
    width: 100%;
    padding: 45px 10px;
    padding-bottom: 105px;
    box-sizing: border-box;
    display: flex;
    background-color: #00172d;
    top: 0;
    z-index: 100;
    transition: padding 0.3s ease, font-size 0.3s ease;
    opacity: 0.9;
    grid-area: h;
}


#headLogo {
    position: absolute;
    width: 150px;
    height: 130px;
    top: 10px;
    left: 20px;
    transition: padding 0.2s ease, font-size 0.2s ease;
}

#title {
    position: absolute;
    left: 190px;
    top: -28px;
    padding: 10px;
    color: white;
    font-size: 60px;
    font-weight: 400;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#header.shrink {
    padding: 50px 5px; /* Smaller padding (shorter height) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  
#headLogo.vanish {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

#headLogo.appear { 
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

#title.move {
    margin-top: 25px;
    font-size: 35px;
    left: 10px;
}

.menuBar {
    font-size: 25px;
    color: white;
    font-weight: 200;
    font-family: nunito;
}

.menuBar:hover {
    cursor: pointer;
}

#optionsDiv {
    top: 70%;
    left: 202px;
    display: grid;
    position: absolute;
    grid-template-columns: .5fr .6fr 1fr 0.9fr 0.6fr;
    grid-template-areas: 
    'w z k spon join';
}

#instagram {
    height: 00px;
    width: 50px;
    color: white;
    position: absolute;
    top: 26%;
    left: 680px;
    z-index: 500;
}

#instagram.moveLocation {
    top: 5%;
    left: 300px;
}

#homeButton {
    grid-area: w;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#rosterButton {
    grid-area: z;
    padding-left: 5px;
    text-decoration: none;
}

#announcementsButton {
    grid-area: k;
    padding-left: 5px;
    text-decoration: none;
}

#sponsorsButton {
    grid-area: spon;
    padding-left: 30px;
    text-decoration: none;
}

.joinUs {
    grid-area: join;
    text-decoration: none;
}

#homeButton2 {
    grid-area: w;
    text-decoration: none;
}

#rosterButton2 {
    grid-area: z;
    padding-left: 5px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#announcementsButton2 {
    grid-area: k;
    padding-left: 5px;
    text-decoration: none;
}

#sponsorsButton2 {
    grid-area: spon;
    padding-left: 30px;
    text-decoration: none;
}

#homeButton1 {
    grid-area: w;
    text-decoration: none;
}

#rosterButton1 {
    grid-area: z;
    padding-left: 5px;
    text-decoration: none;
}

#announcementsButton1 {
    grid-area: k;
    padding-left: 5px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#sponsorsButton1 {
    grid-area: spon;
    padding-left: 30px;
    text-decoration: none;
}

#sponsorsButton3 {
    grid-area: spon;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding-left: 30px;
}

#announcementsButton3 {
    grid-area: k;
    padding-left: 5px;
    text-decoration: none;
}

#homeButton3 {
    grid-area: w;
    text-decoration: none;
}

#rosterButton3 {
    grid-area: z;
    padding-left: 5px;
    text-decoration: none;
}

#optionsDiv.move {
    position: absolute;
    left: 10px;
    padding: 10px;
    top: 50px;
}

/* //header */
/* footer and elements */

#footer {
    bottom: 0;
    max-width:100%;
    background-color: #00172d;
    z-index: 500;
    height: 210px;
    grid-area: f;
    display: grid;
    grid-template-rows: 70px 150px;
    padding: 10px;
    justify-content: center;
    grid-template-columns: .4fr 1fr .3fr 1fr .5fr 1fr;
    grid-template-areas: 
    'n n n n n v'
    'o p t l jak v';
}

#poweredBy {
    color:white;
    grid-area: n;
    font-weight: 100;
}

#pacific {
    grid-area: p;
    width: 90%;
    height: auto;
    background-color: white;
    position: relative;
    top: 35%;
    transform: translateY(-50%);
    border-radius: 10px;
}


#fort {
    grid-area: t;
    height: 80%;
    border-radius: 10px;
}

#jakroo {
    grid-area: jak;
    width: 80%;
    height: auto;
    max-width: 100px;
    max-height: 90%;
    background-color: white;
    border-radius: 10px;
    padding: 5px;
}

#blanks {
    grid-area: l;
    width: 80%;
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    height: auto;
    max-width: 350px;
    border-radius: 10px;
}

#dockside {
    grid-area: o;
    height: 80%;
    background-color: #111111;
    border-radius: 10px;
    size: 150%;
}

#aboutUs {
    grid-area: v;
    padding: 10px;
    margin-top: 5%;
    font-family: nunito;
    color: white;
    text-align: center;
}

.menuBarBottom {
    text-decoration: none;
    text-underline-offset: 2px;
    color: white;
    display: block;
    padding: 6px;
    font-weight: 200;
}

.menuBarBottom:hover {
    text-decoration: underline;
}

#openNewIcon {
    font-size: 20px;
}

#bottomIcon {
    font-size: 15px;
}


.menuBarBottom:visited {
    color: white;
}
/* // footer */

/* main div and elements */

#main {
    color: black;
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 10px;
    z-index: 10;
    grid-area: m;
}

#blue {
    border-bottom: 5px solid blue;
    margin-top: -20px; 
}

#yellow { 
    border-bottom: 5px solid gold;
    margin-top: -30px; 
}

#blue2 {
    border-bottom: 5px solid blue;
    margin-top: -30px;
}

.textData {
    max-width: 60ch;
    font-size: 10px;
}

#tableData {
    display: grid;
    width: 93%;
    height: auto;
    box-sizing: border-box;
    grid-template-rows: .1fr auto 100px .1fr auto;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    row-gap: 0px;
    align-items: center;
    grid-template-areas: 
    'a .'
    'c pic1'
    '. .'
    'pic2 b'
    'pic2 d';
}

.tablePic {
    width: 100%;
    height: auto;
    box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.tableTextData {
    max-width: 100%;
    font-size: clamp(0.9rem, 1.4vw, 2.5rem);
    line-height: 1.5;
}

#pic1 {
    grid-area: pic1;
    position: relative;
    left: 10%;
}

#pic2 {
    grid-area: pic2;
    width: 70%;
    height: auto;
    position: relative;
    left:50%;
    transform: translateX(-50%);
}

#table1H {
    grid-area: a;
}

#table2H {
    grid-area: b;
}

#table1D {
    grid-area: c;
    font-weight: 0;
    width: 100%;
}

#table1D, #table2D, #data1D {
    font-weight: 200;
}

#table1H, #table2H, #data1H {
    font-weight: 400;
}

#table2D {
    grid-area: d;
    padding: 5px;
    font-weight: 0;
    width: 100%;
}

#data1P {
    width: 100%;
    font-size: clamp(0.9rem, 1.4vw, 1.5rem);
    grid-area: text;
}

#data1H {
    grid-area: titleText;
}

.highlight {
    font-size: 35px;
    font-weight: 650;
}

#historyText {
    max-width: 100ch;
}

#imageTemp {
    width: 93%;
    display: inline;
    grid-area: sideImage;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    align-self: center;
    box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

#content {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 93%;
    grid-area: cc;
}

/* hero image and text */


#homeImage {
    width: 100%;
    filter: brightness(40%);
}

#homeImageDiv {
    position: relative;
}

#heroText {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 350;
    transform: translate(-50%,-50%);
}

/* //hero image */

main h1 {
    padding: 10px
}

main p {
    padding: 10px;
}

#data1D {
    display: grid;
    gap: 20px;
    grid-template-rows: 20% 80%;
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas: 
    'titleText sideImage'
    'text sideImage';
}

/* //main */

#hamburger {
    display: none;
}

#hamMenu {
    display: none;
}

#openNewIconHam {
    font-size: 20px;
}

/* Announements */

#announcementsDivCont {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
}

#announcementsDiv {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.announcement {
    background-image: linear-gradient(95deg, #2B4C7E 8%, #F2C94C 8.1%, white 8.8%);
    width: 100%;
    max-width: 700px;
    box-shadow: 2px 2px 15px;
}


.announcement > h1 {
    font-weight: 300;
}

.announcement > p {
    font-weight: 150;
}

.announcement > h1 {
    margin-left: 11.5%; 
}

.announcement > p {
    margin-left: 12%;
}

.announcement > h6 {
    margin-left: 12.5%;
    font-weight: 50;
}


/* //Announcements*/

/* Roster */

#rosterDiv {
    width: calc(100% - 20px);
    padding: 10px;
}

.rosterEntry {
    background-image: linear-gradient(95deg, #2B4C7E 3%, #F2C94C 3.1%, white 3.8%);
    box-shadow: 2px 2px 20px;
    display: grid;
    height: 255px;
    grid-template-columns: 0.1fr 0.2fr 1fr;
    grid-template-rows: 55px 25px 150px;
    grid-template-areas: 
    '. pic name'
    '. pic position'
    '. pic bio';
    margin-bottom: 20px;
}

.rosterImage {
    grid-area: pic;
    height: 80%;
    padding: 10px;
    width: auto;
    position: relative;
    top: 15%;
    object-fit: contain;
    max-width: 150px;
    box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.rosterName {
    grid-area: name;
    font-weight: 300;
}

#rosterTitle {
    font-weight: 350;
    padding-left: 0;
}

.rosterTitle {
    grid-area: position;
    margin-left: 10px;
    font-weight: 100;
}

.rosterBio {
    grid-area: bio;
    font-size: 17px;
    font-weight: 200;
}

#rosterTitle {
    margin-left: 10px;
}

/* // Roster */

/* Sponsors */

#sponsorsPage, #announcementsPage {
    display: flex;
    flex-direction: column;
}


#sponsorsDivCont {
    display: flex;
    flex: 1 0 auto;
    min-height: calc(100vh - 150px);
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

#sponsorsDiv {
    top: 0px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    grid-template-rows: 1fr;
    grid-template-areas: 
    'docksideS pacificS fortS blanksS jakrooS';
}



#docksideSponsor {
    grid-area: docksideS;
}

#jakrooSponsor {
    grid-area: jakrooS;
}

#pacificSponsor {
    grid-area: pacificS;
}

#fortSponsor {
    grid-area: fortS;
}

#blanksSponsor {
    grid-area: blanksS;
}



.sponsorContainer {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
    grid-template-rows: 180px auto 60px;
    grid-template-areas: 
    'sponPic'
    'stitle'
    'swriteup';
    border-radius: 10px;
    max-width: 100%;
    box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

#sponsorsDiv > a {
    display: contents;
    text-decoration: none;
}

.sponsorHeader {
    padding-top: 20px;
    grid-area: stitle;
    margin-top: 0;
    font-size: 1.8em;
    font-weight: 250;
    text-align: center;
    color: black;
}

.sponsorImage {
    grid-area: sponPic;
    align-self: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: auto;
}

.sponsorWriteup {
    grid-area: swriteup;
    text-align: center;
    font-weight: 150;
    text-decoration: none;
}

.sponsorWriteup:hover {
    text-decoration: underline;
}

#docksideSponsorImage {
    background-color: black;
    border-radius: 10px;
    height: 150px;
    width: auto;
}

#jakrooSponsorImage {
    height: 150px;
    width: auto;
}

#fortSponsorImage {
    height: 150px;
    width: auto;
}

#blanksSponsorImage {
    border-radius: 10px;
    width: 60%;
    height: auto;
}

.sponsorWriteup {
    padding:12px;
}

.bottomIconSpon {
    font-size: 10px;
}

/* // Sponsors */


@media (max-width: 1000px) {

    #tableData {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 80px auto auto 50px 80px auto auto;
        width: 100%;
        grid-template-areas: 
        'a'
        'c'
        'pic1'
        '.'
        'b'
        'd'
        'pic2';
        padding: 5px;
        justify-items: center;
    }

    .textData {
        max-width: 200ch;
    }

    .tablePic {
        display: block;
        justify-self: center;
        margin: 0 auto;
        transform: none;
        left: auto;
        width: 90%;
    }

    #pic1,
    #pic2 {
        left: 0;
        transform: none;
        width: 90%;
    }

    #data1P, #table1D, #table2D {
        width: 95%;
        overflow: visible; 
        align-self: center;
        text-align: left;
        margin-bottom: 20px;
    }

    #data1P {
        font-size: 17px;
        font-weight: 0;
    }

    #header.shrink {
        padding: 20px;
    }

    #table1D, #table2D {
        font-size: 17px;
    }

    #hamMenu {
        z-index: 100;
        width: 100%;
        height: 100vh;
        background-color: #00172d;
        position: fixed;
        display: none;
        text-align: center;
        top: 75px;
        display: block;
        opacity: 0;
        transform: translateX(100%);
        pointer-events: none;
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    #hamMenu > a {
        padding: 40px;
        font-size: 30px;
        text-decoration: none;
    }

    body {
        padding-top: 75px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #hamMenu.slideIn {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    #hamMenu.slideOut {
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
    }

    #title {
        display: none;
    }

    .menuBar {
        display: none;
    }

    #hamburger.shift {
        right: 15px;
        font-size: 40px;
        transition: transform 0.3s ease;
        top: 20%;
        transform: translateY(-84%);
    }

    #instagram {
        left: 2%;
        top: 26%;
        height: 40px;
        width: 40px;
    }

    #instagram.moveLocation {
        left: 2%;
        top: 6%;
        height: 35px;
        width: 35px;
    }

    #header {
        height: 30px;
        display: inline;
        z-index: 200;
        padding-bottom: 30px;
    }

    #headLogo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 75%;
        width: auto;
    }

    #headLogo.getSmaller {
        height: 60%;
        transition: transform 0.3s ease;
        opacity: 1;
    }

    #hamburger {
        display: inline;
        position: absolute;
        right: min(4vw, 30px);
        top: 10%;
        transform: translateY(-60%);
        color: white;
        cursor: pointer;
        z-index: 250;
        font-size: clamp(50px, 8vw, 55px);
    }

    #footer {
        bottom: 0;
        max-width: 100%;
        width: 100%;
        padding: 0px;
        height: auto;
        grid-template-rows: 0.6fr .5fr .7fr 1fr 0.7fr;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        row-gap: 15px;
        grid-template-areas:
        'n'
        'o'
        'p'
        't'
        'l'
        'jak';
    }

    #pacific {
        top: 0%;
        transform: translateY(0%);
    }

    #pacific, #blanks, #dockside, #fort, #jakroo {
        margin-left: -10px;
        width: 90%;
        max-width: 180px;
        height: auto;
        align-self: center;
    }

    #pacific, #blanks {
        max-width: 300px;
        top:0%;
    }

    .announcement {
        background-image: linear-gradient(94deg, #2B4C7E 11%, #F2C94C 11.1%, white 11.8%);
    }

    .announcement > p {
        font-size: 15px;
    } 
    .announcement > h6 {
        margin-left: 14%;
    }

    #announcement1 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    #blanks {
        margin-bottom: 10px;
        transform: none;
    }

    #data1D {
        display: block;
        text-align: center;
    }

    #imageTemp {
        width: 60%;
        max-width: 320px;
        float: right;
        margin: 0 0 15px 15px;
        margin-right: 10px;
    }

    #aboutUs {
        display: none;
    }

    .rosterEntry {
        display: grid;
        padding-top: 20px;
        background-image: linear-gradient(95deg, #2B4C7E 11%, #F2C94C 11.1%, white 11.8%);
        grid-template-rows: 1fr 0.2fr 0.05fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: 
        'pic'
        'name'
        'position'
        'bio';
        height: auto;
        max-height: 800px;
        overflow: hidden;
    }

    .rosterName {
        font-size: 1.83em;
        text-align: center;
    }

    .rosterTitle {
        left: 0;
        margin-left: 0;
        text-align: center;
    }
    
    .rosterBio {
        position: relative;
        width: 85%;
        font-size: 1.3em;
        left: 10%;
    }

    .rosterImage {
        position: relative;
        left: 0;
        width: 100%;
        height: auto;
        transform: none;
        display: block;
        margin: 0 auto;
    }

    #optionsDiv {
        left: 0px;
        display: none;
        position: absolute;
    }

    #imageTemp {
        display: none;
    }

    #hamMenu{
        display: none;
    }     

    #sponsorsDiv {
        grid-template-columns: 1fr;
        grid-template-rows: 400px 400px 400px 400px;
        grid-template-areas: 
        'docksideS'
        'pacificS'
        'fortS'
        'blanksS'
        'jakrooS';
    }

    .sponsorContainer {
        grid-template-columns: 1fr;
        height: auto;
        border-radius: 0;
        grid-template-rows: auto auto auto;
        grid-template-areas:
        'sponPic' 
        'stitle'
        'swriteup';
        margin-bottom: 30px;
        padding: 10px;
        box-shadow: 2px 3px 20px rgba(0,0,0, 0.5);
        background-image: linear-gradient(95deg, #2B4C7E 12%, #F2C94C 12.1%, white 12.8%);
    }

    .sponsorHeader {
        font-weight: 300;
    }

    .sponsorWriteup {
        font-weight: 150;
    }

    .sponsorImage {
        max-width: 550px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    #heroText {
        top: 35%;
        font-size: 1.8em;
    }
}


@Media (max-width: 373px) {
    .rosterName {
        font-size: 1.45em;
    }
}