/* ho ho ho */
 :root {
    --darkblue: #054891;
    --bg: #0A73B4;
    --copy: #4A5565;
    --readable: 80ch;
    --contain: 1024px;
}
html {
    font-size:16px;
}
body {
    background:var(--bg);
    color:white;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    position: relative; /* for snowflakes positioning */
    overflow-x: hidden; /* Prevent horizontal scrollbar from drift */
}
.contain {
    max-width:var(--contain);
    margin-left:auto;
    margin-right:auto;
    left:0px;
    right:0px;
    position:relative;
    padding-left:25px;
    padding-right:25px;
}
ul {
    margin:0px;
    padding:0px;
}
#hero {
    height:100vh;
    #snowman {
        position:absolute;
        width:auto;
        left:-55vmin;
        height:105vh;
        object-fit:contain;
        object-position:left top;

    }
    .content {
        max-width:50%;
        left:60%;
        padding-right:2rem;
        position:relative;
        top:30vh;
    }
    h1 {
        text-align:left;
    }
    @media screen and (max-width: 768px) {
        height:auto;
        #snowman {
            transform-origin: 40% center;
            transform: scale(1.5);
        }
        .content {
            max-width:100%;
            left:0px !important;
            padding-right:0rem;
            top:0px;
        }
        h1 {
            text-align:center;
        }
        #snowman {
            position:relative;
            left:auto;
            right:auto;
            height:auto;
            object-fit:contain;
            object-position:center;
            top:0px;
            left:0px;
            max-width:95%;
        }
        .buttons {
            justify-content:center;
        }
        .flex {
            display:flex;
            flex-direction:column-reverse;
            align-items:center;
            gap:2rem;
        }
    }
}

h1 {
    font-weight:900;
    font-size:5rem;
}
h2 {
    font-weight:bold;
    font-size:3rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
h3 {
    font-weight:2rem;
}

h1,h2,h3,h4 {
    text-align:center;
}

p {
    line-height:1.6;
}

.center {
    text-align:center;
}
p a {
    color:white;
}

@media screen and (max-width: 660px) {
        h1 {
            font-size:12vmin;
        }
        h2 {
            font-size:8vmin;
        }
    }

ul {
    margin:2rem 0px;
    list-style-position: inside;
    li {
        padding:0.5em 0px;
    }
}

.buttons {
    display:flex;
    gap:1rem;
}
.center .buttons, .buttons.center {
    justify-content: center;
}
.btn,.button {
    display:inline-block;
    border-radius:0.5rem;
    padding:0.6rem 1.2rem;
    border:2px solid white;
    text-decoration:none;
    font-weight:bold;
}
.btn.white {
    background-color:white;
    color:var(--bg);
}
.btn.transparent {
    background:transparent;
    color:white;
}
.btn.white:hover, .btn.transparent:hover {
    /* border-color:var(--darkblue); */
    background:var(--darkblue);
    color:white;
}

#cac_info {
    background:white;
    color:var(--copy);
}

.center p, p.center {
    max-width:var(--readable);
    margin-left:auto;
    margin-right:auto;
    text-wrap:balance;
}

section,footer {
    padding:2rem 0px;
}

#images {
    .swiper-slide {
        max-width:25vw;
        width:20em; 
    }
    img {
        width:100%;
        height:100%;
        object-fit:cover;
        aspect-ratio:12/16;
        display:block;
        border-radius:2rem;
    }
    padding-bottom:3rem;
}

#blue_wave {
    /* svg inside */
    width:100%;
    overflow:hidden;
    /* background:var(--bg); */
    svg {
        width:100%;
        height:auto;
        position:relative;
        top:10px; /* weird blue gap */
    }
}

footer {
    background:white;
    color:var(--copy);
    font-size:0.8rem;
    .footerlogo {
        max-width:50vw;
        width:12rem;
        height:auto;
    }
    .footerlinks {
        margin-bottom:2rem;
        display:flex;
        flex-wrap:wrap;
        gap:2rem;
        
        justify-content:center;
        margin-top:3rem;
        margin-bottom:3rem;
        a {
            text-decoration:none;
            color:var(--copy);
        }
    }
}

.overlapping_cards {
    margin-bottom:3rem;
    margin-top:3rem;
    position:relative;
    .flex {
        display:flex;
        justify-content:center;
        gap:2rem;
        flex-wrap:wrap;
    }
    .overlapping_card {
        margin:0.5rem;
        background:white;
        color:var(--copy);
        box-shadow:0px 4px 12px rgba(0,0,0,0.1);
        border-radius:1rem;
        padding:2rem;
        max-width:300px;
        flex:1 1 300px;
        h3 {
            margin-top:1em;
            font-size:1.5em;
            color:var(--bg);
        }
        img {
            max-width:100%;
            height:auto;
            object-fit:cover;
            display:block;
            aspect-ratio:16/16;
            border-radius:0.5rem;
        }
        p {
            text-wrap:pretty;
        }
    }
}

.snowflake {
    pointer-events:none;
    position: fixed;
    width:3rem;
    filter:drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
    height:3rem;
    pointer-events: none; /* Allows interaction with content underneath */
    color: white; /* Color of the snowflake */
    z-index: 9999; /* Ensure it stays on top of content */
    transform-origin: 50% 50%; /* Center of rotation/scale */
    object-fit:contain;
    svg {
        width:100%;
        height:100%;
        object-fit:contain;
    }
}

#webgl-container {
    position: fixed; /* Fix the background canvas */
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    z-index: -1; /* Place it behind the main content */
    canvas {
        width:100%;
        height:100lvh;
        object-fit:cover;
    }
}