$colour-my-shadow: rgba(224, 196, 58, 0.5);
$accent-colour: chocolate;
$border-colour: grey;
$border-colour-light: silver;
$dark-blue: midnightblue;

body {
  background-color: lavender;
  margin: 0;
  max-width: 100vw;
  font-family: sans-serif;
}

.me {
  box-shadow: 0 0 .3em .1em $colour-my-shadow;
}

a {
  color: $accent-colour;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: lightsteelblue;
  box-shadow: 0 -4em 5em 2em rgba(25,25,112,0.5);

  h1 {
    margin-left: 4em;
  }

  nav {
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid $border-colour;

    ul {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;

      list-style-type: none;
      border-top: 1px solid $border-colour;
      padding: 0;
      margin: 0;

      li {
        display: inline-block;
        padding: 1em 2em;
        border-left: 1px solid $border-colour;
        //background-image: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.03));
        box-shadow: 0 0 1em rgba(0,0,0,0.07) inset;
      }

      li:last-child {
        border-right: 1px solid $border-colour;
      }
    }
  }
}

#main {
  width: 100%;
  padding-top: 10em;
  padding-bottom: 2em;
  background-image: linear-gradient(thistle, lavender);

  p {
    margin: 0 1em 0;
  }

  section {
    margin: 0 1em 0;
  }
}

footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;

  background-color: $dark-blue;
  color: cornsilk;
  box-shadow: 0 1em 1em 1em $dark-blue;
  padding: .5em 1em;

  p {
    margin: 1em;
  }

  #tilde_ring {
    border: 1px dotted $border-colour-light !important;
    margin-bottom: 2em;
  }
}