*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    box-sizing: border-box;
}

html {
    font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
}

p{
	font-size: 1.4rem; //14px
}

// MEDIA QUERY MANAGER
/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px
*/
@mixin respondTo($breakpoint) {
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content };    //600px
    }
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 56.25em) { @content };     //900px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em) { @content };    //1200px
    }
    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 112.5em) { @content };    //1800
    }
}

.example{
	background-color: red;
    
    @include respond(tab-land) {
        background-color: yellow;
    }
    
    @include respond(tab-port) {
        background-color: blue;
    }
    
    @include respond(phone) {
        background-color: green;
    }
}