/* UWIN COLOR SCHEME:
 * BLUE:
 * #005596
 *
 * YELLOW:
 * #FFCE00
 *
 * GREY:
 * #58585B 
 * 
 * AUGMENTED UWIN COLOR SCHEME: 
 * NAVY BLUE:
 * #29226D
 * 
 * DAVY BLUE:
 * #18115C88
 */

/* FOR GENERAL USE: */

#version-screen {
    position: fixed;
    display: none;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: #2227;
    transition: opacity 1s ease;
    & #version-info {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        min-width: 300px;
        width: 40vw;
        margin: 5vh 5vw;
        /* padding: 2vh 2vh; */
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--auwin-navy);
        background-image: linear-gradient(to bottom, var(--auwin-navy), #18115C);
        border: 4px solid var(--uwin-yellow);
        border-radius: 15px;
        & #version-title {
            position: sticky;
            top: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 2vh 2vh;
            background-color: #18115C;
        }
        & #version-body {
            margin: 2vh 2vh;
        }
        & h1, h2, h6, p, li {
            margin: 0 auto 0 0;
            font-weight: 0;
        }
        & h1 {
            color: var(--uwin-yellow);
            font-size: 40px;
            margin: 0 auto;
            text-align: center;
        }
        & h2 {
            color: var(--uwin-yellow);
            text-align: left;
            margin: 10px auto 0 0;
        }
        & h6 {
            font-size: 16px;
            font-weight: 100;
            margin: 0 auto;
            text-align: center;
            color: var(--uwin-yellow);
        }
        & ul {
            margin: 0 auto 10px 0;
        }
        & .square {
            display: flex;
            position: relative;
            right: 10px;
            /* display: flex;
            justify-content: center; */
            width: 30px;
            height: 30px;
            border: 1px solid #333;
            border-radius: 3px;
            background-color: var(--uwin-yellow);
            /* margin: 0 10px; */
            padding: 0;
            & > img {
                margin: auto;
                width: 24px;
                height: 24px;
                box-shadow: none;
                border: 0;
            }
        }
        & .square:active {
            background-color: #b8991e;
        }
    }
}
.notice {
    position: fixed;
    z-index: 13;
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    grid-template-columns: .1fr repeat(3, 1fr) .2fr;
    grid-template-rows: 1fr .2fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    /* display: flex;
    align-items: center;
    justify-content: space-between; */
    width: 85vw;
    /* max-width: 750px; */
    margin: 25px auto;
    padding: 10px;
    background-color: #18115CEE;
    border: 2px solid var(--uwin-yellow);
    border-radius: 10px;
    & > .notice-icon {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        grid-area: 1 / 1 / 2 / 2;
    }
    & .notice-version {
        text-align: center;
        padding: 5px 10px 0 5px;
    }
    & > .notice-content {
        grid-area: 1 / 2 / 2 / 6;
        display: flex;
        /* align-items: center; */
        padding: 15px 15px 15px 0;
    }
    & > .notice-button {
        grid-area: 2 / 5 / 3 / 6;
    }
    & > .notice-checkbox {
        display: flex;
        align-items: center;
        grid-area: 2 / 2 / 3 / 5;
        margin: auto 10px auto auto;
        /* float: right; */
        & > input {
            margin-right: 5px;
        }
    }
    & > * {
        /* padding: 15px; */
    }
    & img {
        align-self: flex-start;
        width: 64px !important;
        height: 64px !important;
        padding: 5px 10px 0 5px;
        border: none !important;
        box-shadow: none !important;
    }
    & p {
        width: 100%;
        margin: 0;
        font-size: large;
    }
    & p > .gradify, .notice-version {
        background-image: linear-gradient(to bottom, #FFCE00 50%, #493705 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }
    & a {
        color: #FFCE00;
        text-decoration: none;
    }
    & a:hover {
        text-decoration: underline;
    }
    & .notice-button {
        display: flex;
        /* align-items: flex-end; */
        margin: auto 0 0 auto;
    }
}

#version-button {
    position: fixed;
    bottom: 2vw;
    left: 2vw;
    opacity: 0;
    transition: opacity 1s ease;
    & > button {
        width: 50px;
        height: 50px;
        background-color: #302685;
        border: 2px solid #FFCE00;
        border-radius: 50%;
        color: #FFCE00;
        font-size: 20px;
        font-weight: 900;
        transition: border-color .3s ease, background-color .3s ease, color .3s ease, rotate .3s ease;
        /* transform: rotateY('90'); */
    }
    & > button:hover {
        color: #ebbc00;
        background-color: var(--auwin-navy);
        rotate: 360deg;
    }
    & > button:active {
        border-color: #113;
        background-color: #18115C;
        color: #fff;
    }
}

.learn-more-button, .button {
    width: max-content;
    color: #000;
    text-decoration: none;
    padding: 10px;
    transition: .1s ease-out;
    background-color: var(--uwin-yellow);
    border-width: 1px;
    border-radius: 5px;
    }
    .learn-more-button:hover, .button:hover {
        background-color: #AA7900;
    }

:root {
    --uwin-blue: #005596;
    --uwin-yellow: #FFCE00;
    --uwin-grey: #58585B;
    --auwin-navy: #29226D;
    --auwin-davy: #18115C88;
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Bahnschrift';
    src: url("../font/BAHNSCHRIFT.TTF");
}

* {
    font-family: 'Bahnschrift';
}

*:focus {
    outline: 2px solid #FFCE0088;
    outline-offset: 2px;
    border-radius: 3px;
}
#sm-navbar > a:focus {
    outline: 2px solid #9b7c0088;
    outline-offset: -2px;
}

h2 {
    font-size: 32px;
    margin: 0;
}
p {
    font-size: 20px;
    margin: 8px 0;
    font-weight: 100;
}
hr {
    border: 1px solid var(--uwin-yellow);
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow-x: hidden;

    & > header, nav, footer {
        display: flex;
        justify-content: center;
    }
}

header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 12;
    
    /* background-color: var(--uwin-blue); */
    background-image: linear-gradient(to top, #18115C 0%, var(--auwin-navy) 100%);


    & > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        width: 100%;
        max-width: 1000px;

    }

    & a, span {
        color: var(--uwin-yellow);
        text-decoration: none;
        margin: 5px;
        padding: 0;
    }
}

#header-l {
    display: flex;
    height: 60px;
    & > img {
        margin: auto auto auto 10px;
        height: 80%;
    }
}

#header-r {
    display: flex;
    justify-content: end;
    /* align-items: center; */
    /* width: 80%; */
    /* height: 100%; */
    /* margin: 5px; */
}

#header-notifs {
    position: sticky;
    top: 60px;
    display: flex;
    background-color: var(--uwin-yellow);
    width: 100%;
    z-index: 10;
    & > * {
        color: #000;
    }
}

#navbar {
    display: flex;
    justify-content: space-evenly;
    width: 720px;
    & > span {
        font-weight: bold;
    }
    & > a, span {
        display: flex;
        align-items: center;
        transition: 0.1s ease-in;
        margin: 5px;
        padding: 10px;
        border-radius: 10px;
    }
    & > a:hover {
        background-color: #0002;
    }
}

#sm-navbar-icon {
    display: none;
}

#sm-navbar {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    position: fixed;
    top: 64px;
    right: 0;
    background-color: var(--uwin-yellow);
    box-shadow: inset 0em 0em 3em #0002;
    border: 1px solid #AA7900;
    border-top: 0;
    z-index: 5;
    
    width:max-content;
    padding: 0 0 0 10px;
    font-size: 1.5em;

    & > span {
        font-weight: bold;
        color: #000;
    }
    & > a, span {
        /* display: flex;
        justify-content: center;
        align-items: center; */
        transition: 0.1s ease-in;
        width: 100%;
        margin: 0;
        padding: 10px 10px 10px 0;
        text-decoration: none;
        /* border-radius: 5px; */
        text-align: right;
        
        /* padding: 5px; */
        /* max-width: 100%; */
        /* background-image: linear-gradient(to bottom, var(--uwin-grey) 20%, #363639 100%); */
    }
    & > a {
        color: #000;
    }
    & > a:hover {
        background-color: #0002;
    }
}

#header-trim {
    background-color: #ff0;
    height: 4px;
}

.parallax {
    display: flex;
    justify-content: end;
    align-items: end;
    background-image: linear-gradient(to right, #0000 0%, var(--auwin-davy) 100%), linear-gradient(to bottom, #0000 0%, var(--auwin-davy) 60%), url("../images/media/image-20250914-123934-682abbfe.jpeg");
    height: 100lvh;
    max-width: 100%;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    transition: height .5s;

    /* & > #parallax-text {
        margin: auto 5vw 10vh auto;
        font-size: 56px;
        text-align: right;
        color: var(--uwin-yellow);
    } */
}

#parallax-text {
    margin: auto 5vw 15vh 5vw;
    font-size: 50px;
    text-align: right;
    /* color: var(--uwin-yellow); */
}

#parallax-text > * {
    margin: 0;
    color: var(--uwin-yellow);
}
#parallax-text > img {
    height: 200px;
    width: auto;
    border: 0;
    box-shadow: none;
}
/* note: maybe #363636 over #DDD for main bg color */
main {
    background-color: #252525;
}

#main-content {
    color: #ddd;
    margin: auto;
    /* padding: 0 20px; */
    padding: 0;
    /* max-width: 1240px; */
    max-width: 80vw;
    /* min-height: 1000px; */

    & > section {
        /* height: 50vh; */
        margin: 10px auto;
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        & > * {
            margin: auto;
            font-size: 20px;
        }
        & > :not(.main-text) {
            margin: 20px;
            border-radius: 10px;
        }
    }
    & > section:first-of-type {
        margin-top: 40px;
    }
    & > section:last-of-type {
        margin-bottom: 40px;
    }
    & > section:nth-child(odd) {
        flex-direction: row-reverse;
        /* background-color: #0002; */
        /* box-shadow: 0px 0px 120px 125px #0002; */
        /* & > * {
            margin-right: auto;
            margin-left: 0;
        } */
    }
    & .main-text {
        /* height: 100%; */
        display: flex;
        flex-direction: column;
        width: 50%;
        /* height: 75%; */
        padding: 20px 20px 25px;
        background-color: #1B1B1B;
        border: 1px solid #333;
        border-radius: 10px;
        box-shadow: 0px 0px 5px 1px #0003;
        margin: 10px 10px;
    }
    & #index-sec5 > .main-text {
        width: 50%;
    }
    & #index-sec5 > :not(.main-text) {
        width: 50%;
    }
    /* & img:not(#index-sec5 > *) {
        border-radius: 10px;
        box-shadow: 0px 0px 5px 1px #0003;
        background-color: #fff;
        width: 40%;
    } */
    & #index-sec5 {
        /* text-align: center; */
        flex-direction: row-reverse;
    }

}

.indexMain img {
    /* margin: 0 !important; */
    /* border-radius: 10px; */
    border: 1px solid #333;
    box-shadow: 0px 0px 5px 1px #0003;
    width: 40vw;
    height: 400px;
    object-fit: cover;
    object-position: 55% 50%;
}

#slideshow {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    width: 40vw !important;
    /* height: 100%; */
    margin: 20px !important;
    text-align: center;
    /* background-color: #000; */
    & > * {
        margin: 0;
    }
}

#slideshow-media {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    border-radius: 10px;
    width: 100%;
    /* height: 400px; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: 100%; */
    /* & > #ssL, #ssR {
        flex: 0;
        width: 48px;
        box-shadow: none;
        z-index: 2;
    } */
}

.slideshowImgs {
    display: none;
    width: 100% !important;
    height: 400px;
    object-fit: cover;
    object-position: 55% 50%;
    border-radius: 10px;
    /* border-radius: 0 !important; */
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.ssCurrent {
    display:block;
    opacity: 1;
    animation: .5s ease-out fadeIn;
}

.slideshow-dot {
    width: 15px;
    height: 15px;
    margin: 5px 2px;
    padding: 5px;
    background-color: #111;
    border-radius: 50%;
    display: inline-block;
    & > * {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: #FFFF55;
        background: radial-gradient(circle at 25% 25%,rgba(255, 255, 85, 1) 0%, rgba(255, 206, 0, 1) 25%, rgba(205, 156, 0, 1) 100%);
        /* background-color: var(--uwin-yellow) !important; */
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    }
}
.activedot {
    & > * {
        opacity: 1;
    }
}

#slideshow-controls {
    position: absolute;
    /* top: 220px; */
    display: flex;
    width: 98%;
    justify-content: space-between;
    & > * {
        border: 0;
        opacity: 0.3;
        width: 40px !important;
        height: 40px;
        box-shadow: none !important;
        background-color: var(--auwin-navy);
        /* border: 5px solid var(--uwin-yellow); */
        border-radius: 10px !important;
        padding: 10px;
        transition: opacity 0.3s ease;
    }
    & > *:hover {
        opacity: 1;
    }
}

#slideshow-captions {
    position: absolute;
    bottom: 50px;
    left: 40px;
    /* right: 6vw; */
    width: fit-content;
    & > * {
        display: none;
        padding: 0 0 0 0vw;
        background-color: #0003;
        box-shadow: 0px 0px 25px 20px #0003;
        border: 0;
    }
    & > .activecap {
        display: block;
    }
    & > * > * {
        margin: 0;
        text-shadow: 2px 2px 0px #000A;
    }
    & > * > h1 {
        color: var(--uwin-yellow);
        text-align: left;
    }
}

#slideshow-progress {
    position: absolute;
    bottom: 0;
    left: 1vw;
}

#ssL, #ssR {
    flex: 0;
    /* width: 48px; */
    box-shadow: none;
    z-index: 2;
}

#slideshow-controls > *:not(:last-child) {
    margin-right: 50px;
    & > * {

    }
}


footer {
    background-color: var(--auwin-navy);
    & > div {
        display: flex;
        justify-content: center;
        align-items: end;
        width: 1240px;
        padding: 20px 20px 50px 20px;
    }

    & a {
        color: var(--uwin-yellow);
        /* text-decoration: none; */
        /* font-style: italic; */
    }
    & a:hover {
        text-decoration: underline;
    }
}

#footer-l {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin: 0 auto auto auto;
    & > #footer-contact-us {
        color: #DDD;
        /* font-size: .5em; */
    }
}

#footer-r {
    display: flex;
    flex-direction: row;
    justify-content: end;
    flex-wrap: wrap;
    gap: 20;
    width: 70%;
    margin: auto;
    & > * {
        margin: auto 10px;
        height: 100%;
    }
}

.clickDiv {
    position: absolute;
    color: var(--uwin-yellow);
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 100;
}

.tiny {
    font-size: small;
    text-align: left;
}

/* ABOUT US */

.aboutUsParallaxImg {
    /* height: 100vh; */
    background-image: linear-gradient(to right, #0000 0%, var(--auwin-davy) 100%), linear-gradient(to bottom, #0000 0%, var(--auwin-davy) 60%), url("../images/media/DSC05929-test.jpg");
    background-position: bottom;
    
}

#tl-imgs {
    width: 50%;
}

.aboutusMain {

}

.aboutus-content {
    display: flex;
    flex-direction: row;
    margin: 60px auto;
    & > * {
        /* flex: 1; */
    }

    & > .aboutus-img {
        display: flex;
        justify-content: center;
        padding: 0 20px;
    }
    & > .aboutus-img > img {
        height: auto;
        /* max-height: 552px; */
        width: 100%;
        min-width: 443px;
        max-width: 720px;
        border: 1px solid #333;
        border-radius: 10px;
        box-shadow: 0px 0px 5px 1px #0003;
        object-fit: cover;
        object-position: 55% 50%;
    }
}

.aboutus-text {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        /* width: 50%; */
        margin: 0 20px;
        padding: 20px;
        background-color: #1B1B1B;
        border: 1px solid #333;
        border-radius: 10px;
        box-shadow: 0px 0px 5px 1px #0003;
        & > h2 {
            font-size: 40px;
        }
    }

#team-leads, #subteam-leads {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 100%; */
    text-align: center;
    padding: 10px;
    /* border-bottom: 2px solid #CCC; */
    & > h1, h2 {
        font-size: 56px;
        color: var(--uwin-yellow);
    }
    & > h2 {
        /* font-size: 40px; */
    }
    & > #tl-imgs, > #stl-imgs {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        & > .tl {
            width: 275px;
            margin-bottom: 50px;
            text-align: center;
            & > img {
                width: 265px;
                border: 1px solid #333;
                border-radius: 5px;
                box-shadow: 0px 0px 5px 1px #0006;
            }
            & > * {
                margin: 5px;
            }
            & > h3 {
                font-size: 32px;
                color: #FFCE00;
                /* text-wrap: wrap;
                text-overflow: ellipsis; */
            }
            & > p {
                font-size: 20px;
            }
        }
    }
}
#subteam-leads {
    margin-bottom: 30px;
}

.tl {
    
}

p:not(.tl > *) {
    text-align: left;
}
/* COMMUNITY SUPPORT */

.communitySupportParallaxImg {
    background-image: linear-gradient(to right, #0000 0%, var(--auwin-davy) 100%), linear-gradient(to bottom, #0000 0%, var(--auwin-davy) 60%), url("../images/media/DSC05952.jpg");
}

/* SPONSORS */

.sponsorsParallaxImg {
    background-image: linear-gradient(to right, #0000 0%, var(--auwin-davy) 100%), linear-gradient(to bottom, #0000 0%, var(--auwin-davy) 60%), url("../images/media/DSC05873.jpg");
    background-position: bottom;
}

#plat-sponsors {
    margin-top: 60px;
}
#plat-sponsors > .sponsor-imgs {
    background-color: #dee7e455;
    border: 1px solid #333;
    transition: background-color .4s ease;
}
#plat-sponsors > .sponsor-imgs:hover {
    background-color: #dee7e499;
}

#gold-sponsors > .sponsor-imgs {
    background-color: #daa52055;
    border: 1px solid #333;
    transition: background-color .4s ease;
}
#gold-sponsors > .sponsor-imgs:hover {
    background-color: #daa52099;
}


#silv-sponsors > .sponsor-imgs {
    background-color: #c0c0c055;
    border: 1px solid #333;
    transition: background-color .4s ease;
}
#silv-sponsors > .sponsor-imgs:hover {
    background-color: #c0c0c099;
}

#bron-sponsors {
    margin-bottom: 60px;
}
#bron-sponsors > .sponsor-imgs {
    background-color: #714b2955;
    border: 1px solid #333;
    transition: background-color .4s ease;
}
#bron-sponsors > .sponsor-imgs:hover {
    background-color: #714b2999;
}


.sponsor-content {

    & > h1 {
        text-align: center;
        font-size: 42px;
        color: var(--uwin-yellow);
        margin: 30px 10px;
    }
}

.sponsor-imgs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw;
    border-radius: 15px;
    margin: 20px;
    padding: 20px;
    & img {
        /* display: flex; */
        width: 90%;
        max-width: min-content;
        /* max-width: 500px; */
        max-height: 150px;
        object-fit: scale-down;
        height: auto;
        margin: 2vw;
        transition: max-height .5s ease;
    }
    & img:hover {
        /* width: 90%; */
        max-height: 160px;
    }
}

/* CONTACT US */

#contact-form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 30px auto;
    & > .form-component {
        display: flex;
        width: 100%;
        max-width: 500px;
        margin: 10px auto;
    }
    & label {
        display: flex;
        justify-content: end;
        align-items: start;
        flex-shrink: 0;
        width: 125px;
        margin: auto 10px auto auto;
        text-align: right;
        font-size: 20px;
        font-weight: bold;

    }
    .form-message > label {
        margin-top: 6px;
    }
    & input, textarea {
        /* width: 100%; */
        flex-grow: 2;
        resize: none;
        padding: 5px 5px 5px 3px;
        border: 1px solid #333;
        border-radius: 3px;
        background-color: #222;
        color: #ddd;
        transition: background-color 0.5s ease;
        font-size: 20px;
    }
    & input:focus, textarea:focus {
        background-color: #FFCE0033;
        outline: 2px solid #FFCE0088;
    }
    & button {
        display: flex;
        justify-content: center;
        width: 70px;
        margin: auto 0 auto auto;
        padding: 5px;
        background-color: #FFCE00;
        border: 1px solid #333;
        border-width: 1px;
        border-radius: 3px;
        font-size: 16px;
    }
}

/* BLOG */

#blogEntryList {
    & > ul {
        list-style-type: none;
        & > li {
            margin-bottom: 2vh;
            & > a {
                margin-bottom: 0;
                color: var(--uwin-yellow);
                font-weight: 900;
                /* line-height: 1.5; */
                font-size: 2em;
                text-decoration: none;
            }
            & > a:hover {
                text-decoration: underline;
            }
            & > small {
                margin-top: 0;
                color: #AAA;
                font-weight: 100;
            }
        }
    }
}

.blog-post {
    margin: 50px 0;
    & > h1, h2, h3, h4, h5, h6 {
        margin: .5em;
    }
    & > h1, h2, h3 {
        color: var(--uwin-yellow);
        /* background-color: #00f; */
    }
    & > p {
        margin: 1rem 0;
    }
}

.text-here-smile {
    background-color: #00f;
    min-height: 50px;
    /* width: 60%; */
    margin: 25px auto;
}

/* MEDIA QUERIES */

@media (max-width: 1279px) {
    .aboutus-text {
        width: 100%;
    }
    .aboutus-img {
        display: none !important;
    }
}

@media (min-width: 951px) {
    #sm-navbar {
        display: none;
    }
}

@media (max-width: 950px) {
    #main-content > section > * {
        width: 90% !important;
    }
    #main-content > section > img {
        margin: 10px;
        width: 95% !important;
        border-radius: 0;
        /* height: 30vh; */
        object-fit: cover;
        object-position: 55% 50%;
    }
    #slideshow-media {
        margin: 0;
        padding: 0;
    }
    .slideshowImgs {
        width: 100% !important;
    }
    

    #main-content > section, #main-content > section:nth-child(odd) {
        flex-direction: column !important;
        align-items: center;
        & > * > * { }
    }
    #navbar {
        display: none;
    }
    #sm-navbar-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto 1vw auto auto;
        & :hover {
            cursor: pointer;
        }
    }

    /* #sm-navbar {
        display: none;
    } */
}

@media (max-width: 768px) {
    .parallax {
        /* height: 150%; */
        background-attachment: scroll !important;
        
    }
}

@media (max-width: 750px) {
    #footer-l {
        width: 40%;
    }
    #footer-r {
        width: 60%;
    }
    #footer-r > * {
        width: 100%;
        margin: 20px;
    }
}
@media (max-width: 635px) {
    footer > div {
        flex-direction: column;
    }
    #footer-l, #footer-r {
        width: 80%;
        gap: 20px;
        & h3, p {
            text-align: center;
            line-height: 1;
            font-size: 2em;
        }
        & .logo {
            width: 100%;
            /* margin: 10px; */
        }
        & img {
            height: auto;
            margin: auto;
        }
    }
}

@media (max-width: 499px) {
    #parallax-text {
        position: relative;
        bottom: 35px;
        margin: auto 5vw 10vh 5vw;
        font-size: 25px;
        text-align: right;
        /* color: var(--uwin-yellow); */
    }
    #parallax-text > img {
        height: 120px;
    }
}