/* =========================================================
   MODERN CSS RESET
   Portfolio: Lekan Olowookere
   Version: 1.0
========================================================= */

/* ===========================
   BOX MODEL
=========================== */

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

/* ===========================
   ROOT
=========================== */

html{
    scroll-behavior:smooth;
    scroll-padding-top:var(--navbar-height);
    text-size-adjust:100%;
}

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

body{

    min-height:100vh;

    background:var(--bg-body);

    color:var(--text-primary);

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

    font-size:var(--fs-md);

    line-height:1.7;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    overflow-x:hidden;
}

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

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

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

    font-weight:var(--fw-bold);

    line-height:1.2;

    text-wrap:balance;
}

p{

    color:var(--text-secondary);

    max-width:70ch;

    text-wrap:pretty;
}

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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition-normal);
}

/* ===========================
   LISTS
=========================== */

ul,
ol{

    list-style:none;
}

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

img,
picture{

    display:block;

    max-width:100%;

    height:auto;
}

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

video,
canvas,
svg{

    display:block;

    max-width:100%;
}

/* ===========================
   FORMS
=========================== */

button,
input,
textarea,
select{

    font:inherit;

    border:none;

    outline:none;

    background:none;
}

button{

    cursor:pointer;
}

/* ===========================
   TABLES
=========================== */

table{

    border-collapse:collapse;

    border-spacing:0;
}

/* ===========================
   SECTION
=========================== */

section{

    position:relative;
}

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

:focus{

    outline:none;
}

:focus-visible{

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

    outline-offset:4px;

    border-radius:6px;
}

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

::selection{

    background:var(--color-primary);

    color:white;
}

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

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#050816;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--color-primary),
        var(--color-secondary)
    );

    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{

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

/* ===========================
   SKIP LINK
=========================== */

.skip-link{

    position:absolute;

    left:-9999px;

    top:20px;

    z-index:99999;

    padding:14px 24px;

    background:var(--color-primary);

    color:white;

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

.skip-link:focus{

    left:20px;
}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}