/* =========================================================
   NANES — BASE
   02 — RESET
   03 — SCROLLBAR
   05 — TYPOGRAPHY
   ========================================================= */


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(185, 154, 98, 0.055),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(124, 92, 255, 0.045),
            transparent 30%
        ),

        var(--bg-main);

    color: var(--text);

    font-family:
        "Cairo",
        system-ui,
        sans-serif;

    overflow-x: hidden;

    transition:
        background var(--transition-normal),
        color var(--transition-normal);
}


button,
input,
select,
textarea {
    font-family: inherit;
}


button {
    border: 0;
}


button,
select {
    cursor: pointer;
}


img {
    max-width: 100%;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


::-webkit-scrollbar-track {
    background: transparent;
}


::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            var(--primary),
            var(--accent)
        );

    border-radius: 999px;
}


::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}


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

.serif {
    font-family: "Markazi Text", serif;
}


h1,
h2,
h3,
h4,
h5 {
    line-height: 1.35;
}


::selection {
    background: rgba(185, 154, 98, 0.3);
}