/* ==========================================================
   Pinch Reservoir
   Application Styles
   Version: v0.2.0
   ========================================================== */

/* ----------------------------------------------------------
   Background
---------------------------------------------------------- */

body {

    min-height: 100vh;

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

}

/* ----------------------------------------------------------
   Text Selection
---------------------------------------------------------- */

::selection {

    background: var(--color-primary);

    color: white;

}

/* ----------------------------------------------------------
   Links
---------------------------------------------------------- */

a {

    color: var(--color-primary);

    text-decoration: none;

}

a:hover {

    text-decoration: underline;

}

/* ----------------------------------------------------------
   Card Hover Animation
---------------------------------------------------------- */

.tank-card,
.stat-card {

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.tank-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-hover);

}

/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width:700px) {

    #litres {

        font-size: 2.2rem;

    }

    .tank {

        width: 180px;

        height: 270px;

    }

    .stat-value {

        font-size: 1.7rem;

    }

}

/* ----------------------------------------------------------
   Large Desktop
---------------------------------------------------------- */

@media (min-width:1200px) {

    #app {

        max-width: 1000px;

    }

}