/* ==========================================================
   Pinch Reservoir
   Layout
   Version: v0.2.0
   ========================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {

    margin: 0;

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

    background:
        linear-gradient(
            180deg,
            #EAF6FF 0,
            var(--color-background) 240px
        );

    color: var(--color-text);

}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

#app {

    max-width: 900px;

    margin: 0 auto;

    padding:

        var(--space-xl)
        var(--space-lg)
        80px;

}

/* ==========================================================
   Header
   ========================================================== */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

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

}

.header h1 {

    margin: 0;

    font-size: var(--font-title);

    font-weight: 700;

    letter-spacing: -.03em;

}

.header p {

    margin-top: 6px;

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

}

/* ==========================================================
   Main
   ========================================================== */

main {

    display: flex;

    flex-direction: column;

    gap: var(--space-lg);

}

/* ==========================================================
   Dashboard Grid
   ========================================================== */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px,1fr));

    gap: var(--space-md);

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:700px){

#app{

    padding:

        var(--space-lg)
        var(--space-md)
        60px;

}

.header{

    align-items:flex-start;

}

.header h1{

    font-size:1.9rem;

}

}