/* =========================================================
   MANU PORTFOLIO — BASE
   ========================================================= */


/* =========================================================
   BOX SIZING
   ========================================================= */

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


/* =========================================================
   HTML
   ========================================================= */

html {
    scroll-behavior: smooth;

    background: var(--color-background);
}


/* =========================================================
   BODY
   ========================================================= */

body {
    margin: 0;

    min-height: 100vh;

    background-color: var(--color-background);

    background-image:
        radial-gradient(
            circle at 50% -20%,
            rgba(91, 33, 182, 0.08),
            transparent 35%
        );

    color: var(--color-text);

    font-family: var(--font-primary);

    font-size: 16px;

    line-height: 1.6;

    overflow-x: hidden;

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


/* =========================================================
   MAIN
   ========================================================= */

main,
.site-main {
    background: var(--color-background);

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


/* =========================================================
   HEADINGS
   ========================================================= */

.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6 {
    margin-top: 0;

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


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.site-main p {
    color: var(--color-text-muted);
}


/* =========================================================
   IMAGES
   ========================================================= */

img {
    display: block;

    max-width: 100%;

    height: auto;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

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


button {
    cursor: pointer;
}


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

::selection {
    background: var(--color-primary);

    color: #ffffff;
}


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

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: var(--color-background);
}


::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.45);

    border-radius: var(--radius-full);
}


::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    position: relative;

    padding-block: var(--section-padding-block);
}


/* =========================================================
   UTILITIES
   ========================================================= */

.mono {
    font-family: var(--font-mono);
}


.screen-reader-text {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   MENU STATE
   ========================================================= */

body.menu-open {
    overflow: hidden;
}


/* =========================================================
   FOCUS
   ========================================================= */

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

    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

}