@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*:not(i) {
    font-family: "Poppins", sans-serif;
}

:root {
    --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
    --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
    --primary-hue: 0;
    --primary-lightness: 50;
    --color: hsl(0, 0%, 100%);
    --font-size: 26px;
    --shadow-primary-hue: 180;
    --label-size: 9px;
    --shadow-secondary-hue: 60;
    --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
    --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
    --border: 4px;
    --shimmy-distance: 5;
    --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
    --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
    --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
    --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
    --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

:root {
    --shiny-cta-bg: #ffffff;
    --shiny-cta-bg-subtle: #1a1818;
    --shiny-cta-fg: #ffffff;
    --shiny-cta-highlight: 01738e;
    --shiny-cta-highlight-subtle: #014656;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

:root {
    --color-title: #FFF;
    --color-subtitle: #000;
    --color-subtitle-bg: #FFF;
}

html,
body {
    background-color: #FDFCFF;
    /* position: relative; */
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-drag: none;
}

.ltr {
    direction: ltr !important;
    text-align: left !important;
}

.rtl {
    direction: rtl !important;
    text-align: right !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
header,
section,
summary {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button,
input {
    line-height: normal;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}


/* Fade effect */


/* .js body {
            opacity: 0;
            transition: opacity 0.6s;
        }

        .js body.render {
            opacity: 1;
        } */

a {
    text-decoration: none;
    outline: none;
}

a:hover,
a:focus {
    outline: none;
    color: #01738e
}

a:focus {
    outline: thin dotted;
}

a:active,
a:hover {
    outline: 0;
}

.scene--full {
    width: 100%;
    height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
}

p {
    font-weight: 300;
}

@-webkit-keyframes glitch {
    0% {
        -webkit-clip-path: var(--clip-one);
        clip-path: var(--clip-one);
    }
    2%,
    8% {
        -webkit-clip-path: var(--clip-two);
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }
    6% {
        -webkit-clip-path: var(--clip-two);
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    9% {
        -webkit-clip-path: var(--clip-two);
        clip-path: var(--clip-two);
        transform: translate(0, 0);
    }
    10% {
        -webkit-clip-path: var(--clip-three);
        clip-path: var(--clip-three);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    13% {
        -webkit-clip-path: var(--clip-three);
        clip-path: var(--clip-three);
        transform: translate(0, 0);
    }
    14%,
    21% {
        -webkit-clip-path: var(--clip-four);
        clip-path: var(--clip-four);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    25% {
        -webkit-clip-path: var(--clip-five);
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    30% {
        -webkit-clip-path: var(--clip-five);
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }
    35%,
    45% {
        -webkit-clip-path: var(--clip-six);
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * -1%));
    }
    40% {
        -webkit-clip-path: var(--clip-six);
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * 1%));
    }
    50% {
        -webkit-clip-path: var(--clip-six);
        clip-path: var(--clip-six);
        transform: translate(0, 0);
    }
    55% {
        -webkit-clip-path: var(--clip-seven);
        clip-path: var(--clip-seven);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    60% {
        -webkit-clip-path: var(--clip-seven);
        clip-path: var(--clip-seven);
        transform: translate(0, 0);
    }
    31%,
    61%,
    100% {
        -webkit-clip-path: var(--clip-four);
        clip-path: var(--clip-four);
    }
}

@keyframes glitch {
    0% {
        -webkit-clip-path: var(--clip-one);
        clip-path: var(--clip-one);
    }
    2%,
    8% {
        -webkit-clip-path: var(--clip-two);
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }
    6% {
        -webkit-clip-path: var(--clip-two);
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    9% {
        -webkit-clip-path: var(--clip-two);
        clip-path: var(--clip-two);
        transform: translate(0, 0);
    }
    10% {
        -webkit-clip-path: var(--clip-three);
        clip-path: var(--clip-three);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    13% {
        -webkit-clip-path: var(--clip-three);
        clip-path: var(--clip-three);
        transform: translate(0, 0);
    }
    14%,
    21% {
        -webkit-clip-path: var(--clip-four);
        clip-path: var(--clip-four);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    25% {
        -webkit-clip-path: var(--clip-five);
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    30% {
        -webkit-clip-path: var(--clip-five);
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }
    35%,
    45% {
        -webkit-clip-path: var(--clip-six);
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * -1%));
    }
    40% {
        -webkit-clip-path: var(--clip-six);
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * 1%));
    }
    50% {
        -webkit-clip-path: var(--clip-six);
        clip-path: var(--clip-six);
        transform: translate(0, 0);
    }
    55% {
        -webkit-clip-path: var(--clip-seven);
        clip-path: var(--clip-seven);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }
    60% {
        -webkit-clip-path: var(--clip-seven);
        clip-path: var(--clip-seven);
        transform: translate(0, 0);
    }
    31%,
    61%,
    100% {
        -webkit-clip-path: var(--clip-four);
        clip-path: var(--clip-four);
    }
}

@keyframes accentload2 {
    0% {
        opacity: 0;
        scale: 0;
        transform: rotate(360deg);
    }
    50% {
        scale: 0;
    }
    100% {
        opacity: 0.12;
        scale: 1;
        transform: rotate(0deg);
    }
}

@keyframes accentload3 {
    0% {
        opacity: 0;
        scale: 0;
        transform: rotate(-360deg);
    }
    50% {
        scale: 0;
    }
    100% {
        opacity: 0.12;
        scale: 1;
        transform: rotate(0deg);
    }
}

@keyframes loadrot {
    0% {
        rotate: 0deg;
        scale: 0;
    }
    100% {
        scale: 1;
    }
}

@keyframes spotlight {
    0% {
        transform: rotateZ(0deg) scale(1);
        filter: blur(15px) opacity(0.5);
    }
    20% {
        transform: rotateZ(-1deg) scale(1.2);
        filter: blur(16px) opacity(0.6);
    }
    40% {
        transform: rotateZ(2deg) scale(1.3);
        filter: blur(14px) opacity(0.4);
    }
    60% {
        transform: rotateZ(-2deg) scale(1.2);
        filter: blur(15px) opacity(0.6);
    }
    80% {
        transform: rotateZ(1deg) scale(1.1);
        filter: blur(13px) opacity(0.4);
    }
    100% {
        transform: rotateZ(0deg) scale(1);
        filter: blur(15px) opacity(0.5);
    }
}

@keyframes load {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        --p: 0%;
    }
    50% {
        --p: 300%;
    }
    100% {
        --p: 300%;
    }
}

@keyframes up {
    100% {
        translate: 0;
    }
}

@-webkit-keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
}

@keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
}

@-webkit-keyframes shimmer {
    to {
        rotate: 360deg;
    }
}

@keyframes shimmer {
    to {
        rotate: 360deg;
    }
}

@-webkit-keyframes breathe {
    from,
    to {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
}

@keyframes breathe {
    from,
    to {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
}