:root {
    --gap:2rem;
    --biggap:6rem;
}

body, html {
    font-family: 'Montserrat', sans-serif;
    color: #556874;
}

body.scrolled nav#top_nav_section {
    background-color: transparent;
    height: 5rem;
    overflow:hidden;
    transform:translateY(-5rem);
}
/* nav#top_nav_section {
    position:fixed;
} */

body {
    margin: 0;
    background-color: #e0e0e0;
}
.hero, .section-two, .section-three {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.hero {
    color: white;
}
.hero-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('https://visitescanaba.com/image/1880');
    background-size: cover;
    background-position: center;
    /* z-index: 1; */
}
.content-panel {
    position: absolute;
    display: grid;
    place-content: center;
    text-align: center;
    z-index: 2;
}
.left-content, .right-content {
    top: 0;
    width: 50%;
    height: 100%;
    a {
        text-decoration:none;
    }
}
.left-content { left: 0; background-color: transparent; text-align:left;}
.right-content { right: 0; background-color: transparent; }
.third-panel {
    bottom: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 60, 80, 0.9);
    background-color:transparent;
    z-index: 3;
}
.section-two {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #1a1a1a;
    background-color:#fff;
    padding-left: var(--biggap);
    padding-right: var(--biggap);
}
.knockout-text {
    font-size: 8vw;
    font-weight: bold;
    color: #1a1a1a;
    mix-blend-mode: screen;
    background-color: #fff;
    padding: 2rem;
}
.card-container {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap:var(--biggap);
    
    
}
.card {
    width: 20%;
    height: 80%;
    background-color: none;
    display: flex;
    flex-direction: column;
    gap:var(--gap);
    font-size: 1.5rem;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    text-decoration:none;
    color:#556874;
    margin-top:0px;
}
.card {
    transition:background 0.3s ease;
}
.card:hover {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    background:#eee;
}
.section-three {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    background-color: #eee;
    color: white;
    text-align: center;
    .herovideo {
        opacity:0.9;
    }
    .hero-background {
        background-image:none;
    }
}
.animated-heading {
    padding-right:10vw;
    font-size: 6vw;
    font-weight: bold;
    text-transform:none;
    color:var(--darkdarkblue);
    color:white;
}
.animated-heading.ultrathin {
    font-size:7vw;
    font-weight:100;
}
.animated-heading.extrabold {
    font-size:12vw;
    margin-top: -3vw;
}

.season-card-container {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: var(--biggap);
    width: 100%;
    position: absolute;
    bottom: 0%;
}
.season-card {
    width: 18%;
    height: 15vh;
    background: none;
    color: white;
    display: grid;
    place-content: center;
    font-size: 2vw;
    text-transform:uppercase;
    font-weight: bold;
    text-decoration: none;
    box-shadow:0 0 0 rgba(0,0,0,0.0);
    transition:height 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    overflow:hidden;
}
.season-card * {
    pointer-events:none;
}
.season-card:hover {
    cursor:pointer;
    height:25vmin;
    background-blend-mode: lighten;
    background-color: rgba(255, 255, 255, 0.2);
}
.season-card :is(h5,p) {
    filter:drop-shadow(0 0 0.2rem rgba(0,0,0,0.5));
}
.site-footer {
    background-color: #111;
    color: #aaa;
    padding: 40px 20px;
    display: flex;
    justify-content: space-around;
}
.footer-column {
    width: 30%;
}
.footer-column h3 {
    color: #fff;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 10px;
}
.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column ul li a {
    color: #aaa;
    text-decoration: none;
}
.footer-column ul li a:hover {
    color: #fff;
}



/* custom non-halucinated styles */

h1, h2, h3, h4, h5 {
    color: white;
    text-transform: uppercase;
}

.herovideo {
    filter:brightness(0.7);
}

.grid-container {
    text-decoration:none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding:var(--gap);
    img {
        display:block;
        height:20vh;
        object-fit:cover;
        width:100%;
        max-width:100%;
    }
    .grid-item {
        position: relative;
        overflow: hidden;
        h3 {
            text-align:center;
            position:absolute;
            width:100%;
            bottom:0;
            left:0;
            padding:0.5em;
            color: black;
            mix-blend-mode: lighten;
            background-color: rgb(255,255,255);
        }
        img {
            transform:scale(1.0);
            transition: transform 0.3s ease;
        }
        &:hover img {
            transform: scale(1.1);
        }
    }
}
.third-panel {
    h2 {
        padding:0.5em;
        color: black;
        mix-blend-mode: lighten;
        background-color: rgb(255,255,255);
    }
}

.section-two {
    .header-wrap {
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        position:relative;
        width: 100%;
        overflow:hidden; /* fix weird scaling video creeping over edges */
    }
    .fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        padding:1px; /* fix weird scaling video creeping over edges */
    }
    .text-overlay {
        position: relative;
        /* background: white;
        mix-blend-mode: screen;
        padding: 20px; */
        width:100%;
        h2 {
            font-weight: bold;
            background: white;
            color: black;
            mix-blend-mode: lighten;
            padding: 1em;
            font-size: 7vmax;
            font-weight: 999;
            text-align: left;
            line-height: 0.8;
            text-transform: none;
            padding-left: 0px;
        }
    }
}

.extrabold {
    font-weight:900;
}
.ultrathin {
    font-weight:300;
}
h1 .ultrathin {
    letter-spacing:0.25vw;
    font-size:3vw;
}
h1 .extrabold {
    font-size: 7.5vw;
    display:block;
    text-transform: none;
}

.newhome_submit {
    display:none;
}

#subscribe_email, #mce-EMAIL {
    border: none;
    border-bottom: 2px solid white;
    padding: 1rem;
    font-size: 1.5rem;
    text-align: right;
    width:100%;
    background: transparent;
    display:block;
    max-width:23em;
    text-align:center;
}

form#mc-embedded-subscribe-form {
    width:49vw;
    padding-right:2rem;
}
.right-content {
    text-align:right;
}
.fakebutton {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: var(--green);;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
    transform: translateY(-1em);
}
.left-content a {
    transition:all 0.3s ease;
}
.left-content a:hover {
    scale:1.02;
}

.blog_card_image {
    max-width:100%;
    aspect-ratio:16/9;
    display:block;
    object-fit:cover;
    height:auto;
}
h4.blog_title {
    font-size:1rem;
    color:var(--darkblue);
    text-transform:none;
}
.card aside {
    padding:1rem;
    padding-top:0px;
    height: 100%;
    display: flex;
    align-items: center;
}
.blog_excerpt {
    line-height:1.5;
    margin-top:var(--gap);
}

.season-card:hover .everything {
    opacity:1;
    transform:translateX(0vw);
}
.everything {
    color:white;
    font-size:0.8vw;
    font-weight:300;
    text-align:center;
    opacity:0;
    transform:translateX(5vw);
    transition:opacity 0.5s ease, transform 0.5s ease;
}

img.season_card_image {
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: center top;
    opacity:0;
    transition:opacity 0.3s ease, scale 1s ease;
    scale:1;
}
.season-card:hover img.season_card_image {
    opacity:0.8;
    scale:1.1;
}

/* media query for portrait orientation */
@media (orientation: portrait) {
    .left-content, .right-content {
        width: 100%;
    }
    .content-panel.third-panel {
        width: 100%;
    }
    .grid-container img {
        height:25vh;
    }
    .grid-container {
        & .grid-item {
            h3 {
                font-size: clamp(1.0rem, 2vw, 2.5rem);
                padding: 0.5em;
            }
        }
    }
    h1 .ultrathin {
        font-size:7vw;
        font-weight:100;
    }
    h1 .extrabold {
        font-size:16vw;
        margin-top: -3vw;
    }
    .section-two {
        padding:var(--gap);
        h2 {
            font-size:15vw !important;
        }
    }
    .card-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        height:62%;
        justify-content: space-around;
        gap:2rem;
        .card {
            flex-direction:row;
            width:100%;
            height:auto;
            img {
                width:25vw;
                height:auto;
            }
            .blog_excerpt {
                display:none;
            }
            aside {
                padding-top:1rem;
            }
        }
    }
    .animated-heading.ultrathin {
        font-size:11vw;
        font-weight:100;
    }
    .animated-heading.extrabold {
        font-size:18vw;
        margin-top: -5vw;
    }
    .season-card-container {
        flex-direction: column;
        align-items: center;
        gap: 5vh;
        position:absolute;
        left:0px;
        top:0px;
        .season-card {
            width:80%;
            /* background-image: url(https://jescanaba.holtbosselabs.com/image/1743?w=800); */
            background-size: cover;
            background-position: center;
            background-color: rgba(25, 25, 55, 0.4);
            height:12vh;
        }
        .everything {
            display:none;
        }
        h5 {
            font-size:5vw;
            text-align:center;
        }
    }
    img.season_card_image {
        opacity:0.8;
        filter:brightness(0.9);
        object-position:center;
    }
}

.h1_top {
    color:var(--darkblue);
}
.h1_bottom {
    text-transform: none;
    color: var(--darkblue);
}
div#mc_embed_signup {
    display: flex;
    justify-content: center;
}
#subscribe_email, #mce-EMAIL {
    color:var(--darkblue);
}
#subscribe_email, #mce-EMAIL {
    border-bottom: 2px solid var(--darkblue);
}

.right-content-hidden {
    display:none;
}