/* ======================================================
   RESET
====================================================== */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;

}

body {

    position: relative;

    min-width: 320px;

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--op-color-text);

    background: #101723;

    overflow:hidden;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transition:
        background var(--op-transition),
        color var(--op-transition);

}

body::before{

    content:"";

    position:fixed;

    top:0;
    right:0;

    width:1400px;
    height:1400px;

    pointer-events:none;

    z-index:-2;

    border-radius:50%;

    background:
        linear-gradient(
            90deg,
            var(--op-color-bg) 0%,
            rgba(16,23,35,.92) 26%,
            rgba(16,23,35,.45) 52%,
            transparent 82%
        ),
        linear-gradient(
            180deg,
            rgba(16,23,35,.10) 0%,
            transparent 40%,
            rgba(16,23,35,.18) 100%
        );

    filter:blur(90px);

}
/* ======================================================
body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:url("../images/noise.png") repeat;

    background-size:120px;

    opacity: 1;

    mix-blend-mode:soft-light;

    animation:opNoise 18s linear infinite;

}
====================================================== */






/* ======================================================
   MEDIA
====================================================== */

img,
picture,
svg,
video {

    display: block;
    max-width: 100%;

}

img {

    user-select: none;
    -webkit-user-drag: none;

}

/* ======================================================
   TYPOGRAPHY
====================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: inherit;

}

a {

    color: inherit;
    text-decoration: none;

}

ul,
ol {

    list-style: none;

}

button,
input,
textarea,
select {

    font: inherit;
    border: none;
    outline: none;
    background: none;

}

button {

    cursor: pointer;

}

textarea {

    resize: none;

}

/* ======================================================
   SELECTION
====================================================== */

::selection {

    color: #fff;
    background: var(--op-color-accent);

}

body.is-menu-open {

    overflow: hidden;

}


/* Chrome / Edge / Opera */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#101723;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        #19A8F5 0%,
        #008ED8 100%
    );

    border-radius:100px;

    border:2px solid #101723;

    box-shadow:
        0 0 12px rgba(0,142,216,.35),
        inset 0 0 8px rgba(255,255,255,.12);

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(
        180deg,
        #19A8F5 0%,
        #008ED8 100%
    );

}

::-webkit-scrollbar-corner{

    background:#101723;

}