/* =========================================================
   Physics Presentation Engine

   CSS Reset

   Provides a consistent base across browsers.
========================================================= */



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


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

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}





/* =========================================================
   DOCUMENT
========================================================= */


html {

    width:
        100%;

    height:
        100%;

    font-size:
        16px;

    scroll-behavior:
        smooth;

}





body {

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

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

    background:
        var(--background-color);

    color:
        var(--text-primary);

    line-height:
        1.5;

}





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


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


    font-weight:
        600;

    line-height:
        1.2;

}





p {

    margin-bottom:
        var(--space-3);

}





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


a {


    color:
        var(--primary-color);


    text-decoration:
        none;


}



a:hover {


    text-decoration:
        underline;


}





/* =========================================================
   BUTTONS
========================================================= */


button {


    font-family:
        inherit;


    font-size:
        inherit;


    border:
        none;


    outline:
        none;


    cursor:
        pointer;


    background:
        transparent;


    color:
        inherit;


}





button:disabled {


    cursor:
        not-allowed;


    opacity:
        .5;


}





/* =========================================================
   INPUT ELEMENTS
========================================================= */


input,
textarea,
select {


    font-family:
        inherit;


    font-size:
        inherit;


}





input {


    outline:
        none;


}





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


img,
video,
canvas,
svg {


    display:
        block;


    max-width:
        100%;


}





img {


    user-select:
        none;


}





video {


    background:
        #000;


}





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


ul,
ol {


    list-style:
        none;


}





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


table {


    border-collapse:
        collapse;


    border-spacing:
        0;


}





/* =========================================================
   SCROLLBARS

   Custom appearance for panels
========================================================= */


::-webkit-scrollbar {


    width:
        10px;


    height:
        10px;


}





::-webkit-scrollbar-track {


    background:
        transparent;


}





::-webkit-scrollbar-thumb {


    background:
        rgba(255,255,255,.25);


    border-radius:
        10px;


}





::-webkit-scrollbar-thumb:hover {


    background:
        rgba(255,255,255,.4);


}





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


::selection {


    background:
        var(--primary-color);


    color:
        white;


}





/* =========================================================
   REMOVE DEFAULT FOCUS STYLE

   Replaced later with custom accessibility focus
========================================================= */


button:focus,
input:focus,
textarea:focus {


    outline:
        none;


}