/* =========================================
   Base Reset & Foundation
========================================= */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background-color: #f2f2f2; /* your 10% black equivalent */
    color: #111;

    line-height: 1.4;
}


/* =========================================
   Layout Container
========================================= */

#app {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}


/* =========================================
   Mobile First Styles (default)
   Phones portrait: 0px+
========================================= */

/* Your default mobile styles go here */


/* =========================================
   Small Phones Landscape / Large Phones
   480px+
========================================= */

@media (min-width: 480px) {

    /* Large phones */
}


/* =========================================
   Tablets Portrait
   768px+
========================================= */

@media (min-width: 768px) {

    #app {
        max-width: 720px;
    }

}


/* =========================================
   Tablets Landscape / Small Laptops
   1024px+
========================================= */

@media (min-width: 1024px) {

    #app {
        max-width: 900px;
    }

}


/* =========================================
   Laptops / Desktop
   1280px+
========================================= */

@media (min-width: 1280px) {

    #app {
        max-width: 1100px;
    }

}


/* =========================================
   Large Desktop
   1440px+
========================================= */

@media (min-width: 1440px) {

    #app {
        max-width: 1200px;
    }

}


/* =========================================
   Ultra Wide
   1920px+
========================================= */

@media (min-width: 1920px) {

    #app {
        max-width: 1400px;
    }

}