* {
    -webkit-user-drag: none;
    box-sizing: border-box;
}

html {
    width: 100vw;
    height: 100vh;
    background-color: #014a09;
}

body {
    margin: 0;
    padding: 0;
    background-image: url("../images/KBR_BackgroundEmpty.png");
    background-size: cover;
    scroll-behavior: smooth;
    overflow-x: hidden;
    transition: all 0.25s ease-in-out;
}

::selection {
    caret-color: #add804;
    color: #014a09;
    background-color: #add804;

    
}

span.text-tags::selection {
    background-color: #5795f2;
    color: white;
}

html {
    font-family: 'Montserrat', 'sans-serif';
}

header {
    width: 100vw;
    margin: 0;
    position: static;
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 100px;
    width: 100%;
    padding: 10px;
    
    justify-content: space-between;
    
    z-index: 10;
    transform-origin: top;
    
    .navbar-left {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-left: 20px;

        img {
            width: 80px;
        }

        button {
            background-color: transparent;
            
            border: none;
            font-family: 'Montserrat', 'sans-serif';
            color: white;
            padding: 8px;
            font-weight: 600;
            transition: 0.25s ease-in-out;
        }

        button:hover {
            cursor: pointer;
            color: #add804;
        }

        button.active {
            color:#add804;
            border: 2px solid #add804;
            border-radius: 50px;
            transition: 0.25s ease-in-out;
            backdrop-filter: blur(8px);
        }
    }

    .navbar-right {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-right: 20px;

        .highlited {
            color: #014a09;
        }

        .interactive-btn {
            background-color: transparent;
            backdrop-filter: blur(8px);
            border: 2px solid #add804;
            color: #add804;
            padding: 10px;
            border-radius: 50px;
            box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
            font-family: 'Montserrat', 'sans-serif';

        }

        .interactive-btn:hover {
            background-color: white;
            border-color: white;
            
            color: #014a09;        

            transform: scale(1.1);
            cursor: pointer;
            transition: all 0.25s ease-in-out;
        }
        
        .interactive-btn:active {
            background-color: #014a09;
            color: #add804;
            border-color: #014a09;
            transform: scale(0.9) rotate(1deg);
            transition: all 0.25s ease-in-out;
        }

        .locale-selector {
            display: inline-flex;

            .current-locale {
                height: 50px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding-left: 10px;
                padding-right: 10px;
                background-color: white;
                border: none;
                border-radius: 30px;
                p.locale-name {
                    font-family: 'Montserrat', 'sans-serif';
                    font-weight: 600;
                    color: #014a09;
                }
                div.locale-img {
                    width: 20px;
                    height: 20px;
                    border-radius: 600px;
                    background-size: cover;
                    background-position: center;
                }

                svg {
                    width: 16px;
                    path {
                        fill: #014a09;
                    }
                }
            }

            iframe {
                position: absolute;
                right: 20px;
                top: 80px;
                width: 320px;
                height: 300px;
                transform: scaleY(1);
                transform-origin: top;
                transition: 0.25s ease-in-out;
            }

            iframe.hidden {
                transform: scaleY(0);
                transition: 0.25s ease-in-out;
            }
        }

        .locale-selector:has(iframe:not(.hidden)) {
            .current-locale {
                background-color: #add804;
            }
        }

        .current-locale:hover {
            cursor: pointer;
            background-color: #add804;
            transition: all 0.25s ease-in-out;
        }

        .current-locale:active {
            transform: scale(0.9);
            transition: all 0.25s ease-in-out;
        }
    }
}

header.sticky {
    position: sticky;
    top: 0;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    backdrop-filter: blur(15px);
    transform: scaleY(0);
}

.highlited {
    background-color: #add804;
    border: none;
    padding: 15px;
    font-family: 'Montserrat', 'sans-serif';
    border: 2px solid #add804;
    border-radius: 15px;
    font-weight: 600;
    color: #014a09;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
}

.highlited:hover {
    transform: scale(1.1);
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.highlited:active {
    background-color: white;
    color: #014a09;
    border-color: white;
    transform: scale(0.9) rotate(1deg);
    transition: all 0.25s ease-in-out;
}

.landing-page {
    width: 100vw;
    height: fit-content;
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    .upper-row {
        display: inline-flex;
        align-items: center;
        gap: 50px;

        p.main-text {
            font-family: 'Henny Penny', 'sans-serif';
            font-size: 5em;
            color: #add804;
            text-align: right;
            line-height: 1.2;
            text-shadow: 4px 4px 10px rgba(0,0,0,0.4);
        }

        div.team-description {
            background-color: white;
            padding: 20px;
            border-radius: 30px;
            width: 400px;
            box-shadow: 4px 4px 10px rgba(0,0,0,0.4);

            p.description-text {
                font-weight: 600;
                color:  #014a09;
                span.text-tags {
                    color: #5795f2;
                }
            }
        }
    }

    .lower-row {
        margin-top: 0px;
        display: inline-flex;
        align-items: center;
        gap: 50px;

        .social-media-links {
            display: inline-flex;
            flex-direction: column;
            align-items: center;

            background-color: #add804;
            padding: 20px;
            border-radius: 30px;
            padding-top: 60px;
            padding-bottom: 60px;

            div {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                margin-top: 20px;

                svg {
                    width: 32px;
                    height: 32px;

                    circle {
                        fill: #014a09;
                    }

                    path {
                    fill: #014a09;
                    }
                }
            }

            p.box-title {
                font-size: 1.6em;
                font-weight: 600;
                margin: 0;
                color: #014a09;
            }

            p.box-subtitle {
                margin: 0;
                margin-top: 5px;
                color: #014a09;
            }

            p.link-text {
                margin: 0;
                

                a {
                    text-decoration: none;
                    color: #014a09;
                    transition: all 0.25s ease-in-out;
                }

                a:hover {
                    font-weight: 600;
                    transition: all 0.25s ease-in-out;
                }

                a:visited {
                    text-decoration: none;
                    color: #014a09;
                }
            }
        }

        .social-media-links *::selection {
            background-color: white;
            color: #014a09;

            
        }
    }
}

.team-page {
    width: 100vw;
    height: fit-content;
    padding: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    

    .team-logo {
        padding: 30px;
        background-color: #add804;
        border-radius: 30px;
        width: fit-content;
        z-index: 1;

        img {
            width: 300px;
            height: 300px;
        }
    }

    .team-composition {
        position: relative;
        left: -70px;
        z-index: 0;
        padding: 30px;
        padding-left: 100px;
        background-color: white;
        border-radius: 30px;

        .column-one {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
        }

        .column-two {
            .box-title {
                font-size: 2.5em;
                font-weight: 600;
                color: #add804;
            }
            display: inline-flex;
            flex-direction: column;
            align-items: center;

        }
    }
}

footer {
    width: 100vw;
    height: fit-content;
    padding: 40px;
    backdrop-filter: blur(8px);
    background-color: #add804;
    box-shadow:  0px -20px 30px 30px #add804;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    img {
        width: 60px;
    }

    .footer-content {
        display: inline-flex;
        align-items: center;
        gap: 100px;
    }

    .footer-paragraphs{
        margin-top: 20px;
        width: 90%;
        display: inline-flex;
        align-items: start;
        
        gap: 50px;

        .about-us {
            width: 50%;
        }

        .contact-us {
            width: 50%;
        }

        p.paragraph-title {
            color: #014a09;
            font-weight: 600;
            margin: 0;
        }

        p.paragraph-text {
            color: #014a09;
            margin-top: 10px;
        }
    }

    .highlited {
        background-color: white;
        
        width: 10%;
        padding-left: 25px;
        padding-right: 25px;
        border-radius: 30px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
        border-color: white;

        a {
            color: #014a09;
        }
    }

    .highlited:active {
        background-color: #014a09;
        border-color: #014a09;
        a {
            color: #add804;
        }
        transition: all 0.25s ease-in-out;
    }

    

    .footer-lower {
        display: inline-flex;
        align-items:end;
        gap: 20px;
        p.copyright-text {
            margin: 0;
            width: fit-content;
            font-family: 'Montserrat', 'sans-serif';
            font-size: 0.8em;
            color: #014a0960;
            font-weight: bold;
        }
        a {
            font-family: 'Montserrat', 'sans-serif';
            font-size: 0.8em;
            font-weight: 600;
            color: #014a09;
            transition: all 0.25s ease-in-out;
        }

        a:hover {
            background-color: #014a09;
            color: #add804;
            transition: all 0.25s ease-in-out;
        }

        a.privacy-settings {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            svg {
                height: 15px;
                width: 15px;
            }
        }

        a.privacy-settings:hover {
            cursor: pointer;
        }

    }

}

footer *::selection {
    background-color: #014a09;
    color: white;
}

.icon-btn {
    background-color: transparent;
    border: none;
    

    svg {
        path {
            fill: white;
            transition: all 0.25s ease-in-out;
        }
    }
}

.icon-btn:hover {
    svg {
        path {
            fill: #add804;
            transition: all 0.25s ease-in-out;
        }
    }
    cursor: pointer;
}

.icon-btn:active {
    svg {
        path {
            fill: #014a09;
            transition: all 0.25s ease-in-out;
        }
    }
}

.loading-screen {
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 30;
    background-color: #012008aa;
    backdrop-filter: blur(16px);

    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 1;
    visibility:visible;

    img {
        width: auto;
        height: 200px;
    }

    svg {
        margin-top: 30px;
        transform: scale(2);
        path {
            stroke: #add804;
        }
    }

    transition: all 0.5s ease-in-out;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    z-index: -30;
    transition: all 0.5s ease-in-out;
}

body:has(.loading-screen:not(.hidden)) {
    overflow: hidden;
}

.privacy-popup {
    background-color: white;
    height:fit-content;
    padding: 40px;
    width: 100vw;

    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 30;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.2);

    transform-origin: bottom;
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    transition: all 0.25s ease-in-out;

    .privacy-cta {
        display: inline-flex;
        flex-direction: column;
        gap: 10px;
        p {
            text-align: right;
            margin: 0;
        }

        p.cta-title {
            font-size: 1.5em;
            font-weight: 600;
            color: #add804;
        }

        p.cta-text {
            font-size: 1em;
            color: #014a09;
        }

        p.cta-note {
            font-size: 0.8em;
            color: gray;
        }
    }

    button {
        background-color: transparent;
        border: none;
        font-family: 'Montserrat', 'sans-serif';
        font-weight: 600;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 50px;
        margin: 5px;
        transition: all 0.25s ease-in-out;
    }

    button:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: all 0.25s ease-in-out;
    }

    button:active {
        transform: scale(0.9);
        transition: all 0.25s ease-in-out;
    }

    button.read-policy {
        background-color: #014a09;
        color: #add804;
    }

    button.read-policy:hover {
        color: white;
        transition: all 0.25s ease-in-out;
    }

    button.read-policy:active {
        background-color: #add804;
        color: #014a09;
        transition: all 0.25s ease-in-out;
    }

    button.accept-policy {
        background-color: #add804;
        color: #014a09;
    }

    button.accept-policy:hover {
        color: white;
        transition: all 0.25s ease-in-out;
    }

    button.accept-policy:active {
        background-color: #014a09;
        color: #add804;
        transition: all 0.25s ease-in-out;
    }

    button.close-btn {
        position: absolute;
        padding: 0;
        margin: 0;
        align-self: start;
        right: 20px;
        top: 20px;
        svg {
            path {
                fill: grey;
            }
        }
    }

    button.close-btn:hover {
        svg {
            path {
                fill: #014a09;
                transition: all 0.25s ease-in-out;
            }
        }
    }
}

.privacy-popup.hidden {
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease-in-out;
}

@media screen and (max-width: 900px) {
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    header {
        .navbar-left {
            button {
                display: none;
                position: absolute;
            }
        }
    }
    
    .landing-page {
        height: fit-content;
       .upper-row {
        flex-direction: column;
        gap: 0px;

        p.main-text {
            font-size: 5em;
        }

        div.team-description {
            max-width: 80vw;

            p.description-text {
                font-size: 1em;
            }
        }
       }

       .lower-row {
        flex-direction: column;
        margin-top: 50px;


       }
    }

    .team-page {
        height: fit-content;
        flex-direction: column;
        margin-top: 50px;
        margin-bottom: 0px;

        .team-logo {
            display: none;
            position: absolute;
        }

        .team-composition {
            left: 0;
            display: inline-flex;
            flex-direction: column-reverse;
            align-items: center;
            padding: 30px;
            padding-bottom: 60px;
            width: 100vw;
            border-radius: 0px;
            box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4);

            
            .column-two {
                .box-title {
                    font-size: 2em;
                }
            }
        }
    }

    footer {
        margin-top: 50px;
        height: fit-content;
        padding: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100vw;

        box-shadow:  0px 0px 30px 90px #add804;

        padding-top: 0px;
        padding-bottom: 50px;

        .footer-content {
            flex-direction: column;
            justify-content: center;
            gap: 30px;
        }
        .footer-paragraphs {
            flex-direction: column;
            gap: 20px;
            width: 50vw;
            .about-us {
                width: 100%;
            }

            .contact-us {
                width: 100%;
            }
        }

        .highlited {
            width: 50%;
        }
        
        p.copyright-text {
            align-self: center;
        }
    }
}

@media screen and (max-width: 700px) {

    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    header {
        .navbar-left {
            button {
                display: none;
                position: absolute;
            }
        }
    }
    
    .landing-page {
        height: fit-content;
       .upper-row {
        flex-direction: column;
        gap: 0px;

        p.main-text {
            font-size: 3.5em;
        }

        div.team-description {
            max-width: 80vw;

            p.description-text {
                font-size: 0.8em;
            }
        }
       }

       .lower-row {
        flex-direction: column;
        margin-top: 50px;


       }
    }

    .team-page {
        height: fit-content;
        flex-direction: column;
        margin-top: 50px;
        margin-bottom: 0px;

        .team-logo {
            display: none;
            position: absolute;
        }

        .team-composition {
            left: 0;
            display: inline-flex;
            flex-direction: column-reverse;
            align-items: center;
            padding: 30px;
            padding-bottom: 60px;
            width: 100vw;
            border-radius: 0px;
            box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4);
            margin-bottom: 0;

            
            .column-two {
                .box-title {
                    font-size: 1.5em;
                }
            }
        }
    }

    footer {
        margin-top: 50px;
        height: fit-content;
        padding: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100vw;

        box-shadow:  0px 0px 30px 90px #add804;

        padding-top: 0px;
        padding-bottom: 50px;

        .footer-content {
            flex-direction: column;
            justify-content: center;
            gap: 30px;
        }
        .footer-paragraphs {
            flex-direction: column;
            gap: 20px;
            width: 50vw;
            .about-us {
                width: 100%;
            }

            .contact-us {
                width: 100%;
            }
        }

        .highlited {
            width: 50%;
        }

        p.copyright-text {
            align-self: center;
        }
    }

    .privacy-popup {
        flex-direction: column;
        padding: 50px;
        button.close-btn {
            top: 20px;
            right: 20px;
        }

    }
}

@media screen and (max-width: 600px) {
    .privacy-popup {
        .privacy-cta {
            p {
            text-align: center;
            }
        }
    }
    .popup-actions {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}