/* set correct box model */
* {
    box-sizing:border-box;
}

/* flexbox container */
.holy-grail-flexbox {
    display:flex;
    flex-wrap:wrap;
}

/* columns (mobile) */
.holy-grail-flexbox > * {
    width:100%;
    padding:1rem;
}

h1 {
  text-align: center; 
}

.natethegreat {
font-sive: 200%;
color: f7c283;
}

.nateisawesome {
  font-size: 100%;
  color: #e6c317;
  text-align: center;
}

/* background colors */
.holy-grail-flexbox > .header {background:#f97171}
.holy-grail-flexbox > .main-content {background:#fff}
.holy-grail-flexbox > .left-sidebar {background:#f5d55f}
.holy-grail-flexbox > .right-sidebar {background:#c5ed77}
.holy-grail-flexbox > .footer {background:#72c2f1}


/* tablet breakpoint */
@media (min-width:768px) {
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:50%;
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .holy-grail-flexbox > .header {
        order:-2; /* header first */
    }
    .holy-grail-flexbox > .left-sidebar {
        /* left sidebar second (first in second row) */
        order:-1; 
    }
    .holy-grail-flexbox > .main-content {
        width:50%;
    }
    .holy-grail-flexbox > .left-sidebar,
    .holy-grail-flexbox > .right-sidebar {
        width:25%;
    }
}