:root{
    --dark-purple:#1e1a34;
    --dark-purple-rgb:30,26,52;
    --russian-violet:#201547;
    --russian-violet-rgb:32,21,71;
    --slate-blue:#7d55c7;
    --slate-blue-rgb:125,85,199;
    --dark-violet:#9b26b6;
    --dark-violet-rgb:155,38,182;
    --mexican-pink:#e31c79;
    --mexican-pink-rgb:227,28,121;
    --process-cyan:#41b6e6;
    --process-cyan-rgb:65,182,230;
    --tiffany-blue:#7ce0d3;
    --tiffany-blue-rgb:124,224,211;
    --cadet-grey:#a2aaad;
    --dark-color:#07080c;
    --dark-color-rgb:7,8,12;
    --light-color:#efefef;
    --zeta-font:Industry,sans-serif;
    --zeta-font-title:Equinox,Quicksand,sans-serif;
}

::selection{
    background-color:var(--tiffany-blue);
    color:var(--dark-color);
}

::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{background-color:transparent;height:0;width:0;opacity:0;}
::-webkit-scrollbar-track{background-color:var(--dark-color);box-shadow:0;}
::-webkit-scrollbar-track-piece{background-color:var(--dark-color);}
::-webkit-scrollbar-thumb{background-color:var(--process-cyan);border-radius:0;}
::-webkit-scrollbar-corner{background-color:var(--dark-color);}
::-webkit-resizer{background-color:var(--dark-color);color:#fff;}

*{
    outline:0;
}

body{
    animation-name:loaded;
    animation-duration:1s;
    animation-fill-mode:both;

    &.dark{
        background-color:var(--dark-color);

        & h2,
        & h3,
        & h4,
        & h5{
            font-weight:300;
            color:#fff;
        }

        & p,
        & h6,
        & ul li,
        & ol li{
            color:rgba(255,255,255,.75);
        }
    }
}

figure{
    margin:0;
    padding:0;

    &.background{
        width:100%;
        height:100%;
        overflow:hidden;
        position:relative;

        & img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
        }
    }
}

h1{
    font-family:var(--zeta-font-title),sans-serif;
    font-weight:500;
    font-size:calc(2rem + 2.5vw);
    text-transform:lowercase;
    letter-spacing:1rem;
    line-height:1.1;
    text-shadow:0 0 1rem rgba(255,255,255,.5);

    & > span{
        text-transform:uppercase;
    }
}

h6{
    font-weight:350;
    font-size:.9rem;
    letter-spacing:3px;
    text-transform:uppercase;
}

p{
    font-weight:350;

    & a{
        display:inline-block;
        color:#fff;
        position:relative;
        text-decoration:none;
        font-weight:500;

        &::before{
            content:"";
            width:100%;
            height:1px;
            background-color:var(--tiffany-blue);
            position:absolute;
            left:0;
            bottom:-1px;
            transform:scale(0);
            transition:transform 0.3s ease-in;
        }

        &:hover,
        &:focus,
        &:active{
            &::before{
                transform:scale(1);
            }
        }
    }

    & b{
        font-weight:500;
        color:#fff;
    }

    &:last-child{
        margin-bottom:0;
    }
}

form{
    --input-height:80px;

    & fieldset{
        padding:.65rem;
        position:relative;

        &.picker-indicator{
            & input,
            & select{
                padding-right:1.5rem;
            }

            & input::-webkit-calendar-picker-indicator{
                opacity:0;
            }

            & select{
                appearance:none;
            }

            &::before{
                content:"\f2f3";
                font-family:"uicons-regular-rounded" !important;
                font-style:normal;
                font-weight:normal;
                font-variant:normal;
                font-size:1.25rem;
                text-transform:none;
                text-rendering:auto;
                line-height:0;
                -webkit-font-smoothing:antialiased;
                -moz-osx-font-smoothing:grayscale;
                color:#fff;
                position:absolute;
                right:1.5rem;
                top:50%;
                transform:translateY(-50%);
            }
        }
    }

    & input,
    & select{
        padding:0 1rem;
        height:var(--input-height);
        border-radius:0;
        font-size:1rem;
        font-weight:350;
        border:0;
        outline-width:1px;
        outline-style:solid;
        outline-offset:4px;
        transition:outline-offset .1s ease;

        &:focus{
            outline-offset:6px;
        }
    }

    & .button{
        padding:0 1rem;
        width:100%;
        height:var(--input-height);
    }

    &.dark{
        & input,
        & select{
            background-color:rgba(255,255,255,.1);
            outline-color:rgba(255,255,255,.5);
            color:#fff;

            &:focus{
                outline-color:var(--tiffany-blue);
            }
        }
    }
}

header{
    & h6{
        margin-bottom:0;
        color:rgba(255,255,255,.85);
    }

    & h1{
        color:#fff;
    }

    & p{
        font-size:1rem;
        color:rgba(255,255,255,.85);
    }

    &:has(p){
        & h1{
            margin-bottom:1rem;
        }
    }
}

ul{
    padding-left:1.25rem;
    list-style-type:lower-greek;

    & li{
        &::marker{
            color:var(--tiffany-blue);
        }
    }
}

ol{
    padding-left:1.25rem;

    & li{
        &::marker{
            color:var(--tiffany-blue);
        }
    }
}

.row,
.nav-wrapper,
.container{
    margin-right:auto;
    margin-left:auto;
    max-width:1400px;
}

.fab{
    font:var(--fa-font-brands);
}

.solar{
    align-content:center;
}

.separator{
    --corner-width:20px;

    margin:1.5rem 0;
    width:100%;
    height:1px;
    display:inline-block;
    position:relative;

    & > span{
        margin-left:22px;
        width:calc(100% - 44px);
        height:inherit;
        display:block;
        background-color:rgba(255,255,255,.25);
        transition:all 0.5s ease-in-out;
    }

    &::before,
    &::after{
        content:"";
        width:var(--corner-width);
        height:inherit;
        display:block;
        background-color:rgba(255,255,255,.5);
        position:absolute;
        bottom:0;
        transition:all 0.5s ease-in-out;
    }

    &::before{
        left:0;
    }

    &::after{
        right:0;
    }

    &.w-75{
        width:75%;
    }

    &.w-50{
        width:50%;
    }

    &.w-25{
        width:25%;
    }
}

.degrade{
    &.dark{
        background:linear-gradient(0deg,
            rgba(7, 8, 12, 1) 0%,
            rgba(7, 8, 12, 0.95) 25%,
            rgba(7, 8, 12, 0.75) 50%,
            rgba(7, 8, 12, 0.5) 75%,
            rgba(7, 8, 12, 0.25) 100%);

        &.horizontal{
            background:linear-gradient(-90deg,rgba(7, 8, 12, 1) 0%, rgba(7, 8, 12, 0.25) 100%);

            &.invert{
                background:linear-gradient(90deg,rgba(7, 8, 12, 1) 0%, rgba(7, 8, 12, 0.25) 100%);
            }
        }
    }
}


.bg-color{
    &.dark{
        background-color:var(--dark-color);
    }
}

.bg-video{
    width:100vw;
    height:700px;
    position:relative;

    & video,
    & .solar{
        width:inherit;
        height:inherit;
        position:absolute;
        top:0;
        left:0;
    }

    & video{
        object-fit:cover;
        z-index:-1;
    }

    & .solar{
        z-index:1;
    }
}

.text-align{
    &.center{
        text-align:center;
    }

    &.right{
        text-align:right;

        & .button:last-child{
            margin-right:4px;
        }
    }
}

.tab{
    clip-path:polygon(0 0,30% 0,calc(30% + 32px) 14px,calc(70% - 32px) 14px,70% 0,100% 0,100% 100%,0 100%);

    &.down{
        margin-top:-15px;
    }
}

.sticky{
    position:sticky;
    top:calc(var(--navigation-h-3) + 3rem);
}

.title{
    & p{
        margin:1.5rem 0 2rem 0;
    }
}

.social{
    margin-top:2rem;
    padding-left:4px;

    & .button{
        margin:.65rem;
        padding:0;
        width:45px;
        font-size:1.1rem;
        justify-content:center;
        text-align:center;

        & span{
            margin-left:5px;
        }

        &:first-child{
            margin-left:0;
        }

        &:last-child{
            margin-right:0;
        }
    }
}

@media(max-width:767px){
    h1{
        letter-spacing:.5rem;
    }
}

@media(max-width:400px){
    h1{
        font-size:calc(2rem + 1.5vw);
    }
}

@keyframes loaded{
    0%{
        opacity:0;
        visibility:hidden;
    }

    100%{
        opacity:1;
        visibility:visible;
    }
}