html {

background: linear-gradient($teal,transparent),
linear-gradient(180deg,$gold,transparent),
      linear-gradient(90deg,$navy,transparent),
      linear-gradient(-90deg,$punch,transparent);

background-blend-mode: screen;
min-width: 100%;
min-height: 100%;

}

h1, h2, h3, h4, h5, h6 { color: $navy; }

main {

box-shadow: 0px 3px 16px 0px transparentize($navy, 0.75);
border: 0.15em solid transparent;
border-image: linear-gradient(to bottom right, $teal 0%, $navy 50%, $punch 100%);
border-image-slice: 1;

}

.post-meta {

color: darken($gold, 15%);

}

.page-heading {

text-align: center;
margin-bottom: 1em;

h1, h2, h3 { margin-bottom: 0.25em; }

}

nav {

display: flex;
border-bottom: 0.15em solid transparent;
border-image: linear-gradient(to right, $teal 0%, $navy 50%, $punch 100%);
border-image-slice: 1;

a {
  padding: .25em .5em;
  text-transform: uppercase;
  flex: 1 1 100%;

  &.active {
    background: $navy;
    color: $white;
  }
}

}

.social-media-list {

margin-left: 0;
li {
  display: inline-block;
  padding: 0 .5em;
}

}

footer {

padding: 1em 1.5em;

}