/* ==========================================================
   BiiMedia Theme
   root.css
========================================================== */

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;

    font-family: "Satoshi", sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;

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

    position: relative;
}

/* ==========================================
   Main Background
========================================== */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background:
        var(--gradient-main),
        var(--gradient-blue);

    z-index: -2;

    pointer-events: none;

}

/* ==========================================
   Noise Layer
========================================== */

body::after {

    content: "";

    position: fixed;

    inset: 0;

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

    opacity: .03;

    mix-blend-mode: soft-light;

    pointer-events: none;

    z-index: -1;

}

/* ==========================================
   Selection
========================================== */

::selection {

    background: var(--color-primary);

    color: #fff;

}

/* ==========================================
   Scrollbar
========================================== */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #081729;

}

::-webkit-scrollbar-thumb {

    background: var(--color-primary);

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--color-accent);

}

/* ==========================================
   Links
========================================== */

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}

a:hover {

    color: var(--color-primary);

}

/* ==========================================
   Images
========================================== */

img {

    max-width: 100%;

    height: auto;

    display: block;

}

/* ==========================================
   Focus
========================================== */

:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 4px;

}