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

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

/* ========================================
   VARIABLES
======================================== */

:root{

    /* Colors */

    --color-white:#ffffff;
    --color-black:#000000;
    --color-gray:#b3b3b3;
    --color-darkgray:#2a2a2a;
    --surface-01:#000000;
    --surface-02:#090909;
    --surface-03:#0b0b0b;
    --surface-04:#111111;
   

    /* Font */

    --font-main:"Instrument Sans",sans-serif;

    /* Transition */

    --transition:0.3s ease;

}

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

body{

    font-family:var(--font-main);
    background:var(--color-black);
    color:var(--color-white);

}

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

.container{

    width:90%;

    max-width:1200px;

    margin:0 auto;

}

/* ==========================
   PAGE TRANSITION
========================== */

body{

    opacity:1;

    transition:opacity .35s ease;

}

body.fade-out{

    opacity:0;

}

/* ==========================
   SCROLL PROGRESS
========================== */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:2px;

    background:white;

    z-index:2000;

    transition:width .1s linear;

}