/* =====================================================
   Vice City Vibe
   base.css

   Global HTML element styling
===================================================== */


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


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

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

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

    line-height: 1.6;

    overflow-x: hidden;

}



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


h1,
h2,
h3,
h4 {

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

    line-height: 1.2;

    font-weight: 700;

}



h1 {

    font-size: clamp(2.5rem, 6vw, 5rem);

}



h2 {

    font-size: clamp(1.8rem, 4vw, 2.8rem);

    margin-bottom: 2rem;

}



h3 {

    font-size: 1.4rem;

}



p {

    color: var(--text-muted);

}



strong {

    color: var(--text);

    font-weight: 700;

}





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


a {

    color: inherit;

    text-decoration: none;

}



a:focus-visible {

    outline: 2px solid var(--cyan);

    outline-offset: 4px;

}





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


ul,
ol {

    list-style: none;

}





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


img {

    max-width: 100%;

    height: auto;

    display: block;

}





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


button {

    font-family: inherit;

    border: none;

    cursor: pointer;

}





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

   Gives highlighted text a neon feel
===================================================== */


::selection {

    background: var(--pink);

    color: white;

}





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

   Desktop browsers only
===================================================== */


::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: var(--bg);

}



::-webkit-scrollbar-thumb {

    background: var(--purple);

    border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--pink);

}