body {
  margin: 0;
  background-color: #d1b280; }

header {
  background-color: #080706;
  padding: 1rem;
  margin: 0; }

section#contact {
  grid-area: a; }

section#languages {
  grid-area: b; }

section#certifications {
  grid-area: c; }

section#skills {
  grid-area: d; }

section#experience {
  grid-area: e; }

section#education {
  grid-area: f; }

/* Mobile first queries */
header.navbar a.navbar-brand.mr-2 {
  color: #efefef;
  font-size: 1rem;
  margin: 0 10px; }

header.navbar a.btn.btn-link {
  color: #efefef; }

header.navbar nav {
  display: none; }

header.navbar .languages a img {
  background-color: #080706;
  padding: 1px;
  height: 20px;
  margin: 10px; }

header.navbar .languages a:hover {
  border-bottom: 2px solid #d1b280; }
  header.navbar .languages a:hover img {
    background-color: #d1b280; }

header.navbar .divider-vert {
  display: none; }

.content {
  display: grid;
  grid-gap: .5em;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "a a a a" "b b b b" "c c c c" "d d d d" "e e e e" "f f f f";
  padding: 5px; }
  .content .tech {
    color: #080706; }
  .content .mute {
    color: #d1b280; }
  .content #languages dl {
    display: inline-block;
    margin-right: 10px;
    width: 135px; }
  .content #contact .d-inline-block {
    margin-right: 10px; }
  .content i {
    margin-right: 10px; }
  .content small.date {
    display: block; }
  .content .h1 .fas, .content .h1 .far {
    font-size: 1.5rem; }
  .content section#experience h2 a, .content section#experience h2 small.date {
    padding-left: 45px; }
  .content section#experience h3 .fa-stack {
    font-size: 1rem; }
  .content section#experience h3 a {
    display: block;
    text-align: left;
    padding-left: 45px; }
  .content section#experience h3 small.date {
    padding-left: 45px; }
  .content section#experience p {
    text-align: justify; }
  .content section#skills dl .far, .content section#skills dl .fas {
    color: #d1b280; }

@media print {
  .languages {
    display: none; }
  .content {
    grid-template-areas: "e e e a" "e e e b" "e e e c" "e e e d" "e e e ." "f f f ."; } }

/* Larger than mobile */
/* Larger than phablet */
@media (min-width: 550px) {
  .content {
    padding: 5px;
    grid-template-areas: "a a c c" "b b d d" "e e e e" "f f f f"; }
    .content .h1 .fas, .content .h1 .far {
      font-size: 2.5rem; }
    .content section#experience h2 a {
      padding-left: 5px; }
    .content section#experience h3 .fa-stack {
      font-size: 1.5rem; }
    .content section#experience h3 a {
      display: initial;
      padding-left: 5px; }
    .content section#experience h3 small.date {
      padding-left: 75px; }
    .content section#experience h4, .content section#experience p {
      margin-left: 70px; } }

/* Larger than tablet */
@media (min-width: 750px) {
  header.navbar a.navbar-brand.mr-2 {
    font-size: 2rem; }
  header.navbar nav {
    display: initial; }
    header.navbar nav a.btn.btn-link:hover {
      color: #d1b280;
      border-bottom: 2px solid #d1b280; }
  header.navbar .divider-vert {
    display: initial; } }

/* Larger than desktop */
@media (min-width: 1000px) {
  .content {
    grid-template-areas: "e e e a" "e e e b" "e e e c" "e e e d" "e e e ." "f f f ."; } }

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  .content {
    grid-template-areas: "b a a c" "b e e c" "d e e f" ". e e ."; } }