* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
html {
  font-family: 'Futura W01', helvetica, sans-serif;
  font-size: 100%;
  color: rgba(12, 12, 10, 0.8);
  font-weight: 300;
}
body {
  margin: 0;
  background:#f6f3ea;
  text-decoration: none;
}
h1,
.head2,
 h3 {
  margin: 0;
  text-transform: uppercase;
} 
.head2 {
  color: #352a75;
  font-size: 65%;
  line-height: calc(1.1rem + 1.2vw);
}
.mail {
  color: rgba(12, 12, 10, 0.8);
  border-bottom: #f6f3ea;
}
.mail:hover {
  color: salmon;
}
ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
ul  li {
  border-bottom: 2px solid rgba(169, 169, 169, 0.79); 
  padding: 2px;
  text-transform: uppercase;
}
ul  li ul li {
  border-bottom: none;
  padding: 2px;
  text-transform: none;
  margin-left: 10px;
}
.anchor {
  text-decoration: none !important;
  border-bottom: #f6f3ea;
}
.anchor:hover {
  color:green;
  text-decoration: inherit;
}
.anchor:active {
  text-decoration-line: inherit;
}

/* --------------------------------------------------------*/

header {
  min-height: 100vh;
  padding: 5rem 5vw 2rem;
}
header h1 {
  font-size: calc(1.1rem + 1.8vw);
  margin: 0;
  line-height: 1.2em;
}
header p {
  margin: 2rem 0 0;
}
header ul {
  margin: 0;
}
header p,
header a {
  color: rgba(38, 37, 32, 0.7);
}
header a {
  border-bottom: 1px solid rgba(169, 169, 169, 0.79);
}

/* DROP ROTATION FOR SMALLER SCREENS, ETC. */
@supports (display: grid) {
  header {
    /* autoprefixer: off */
    display: flex;
    margin: auto;
    padding-top: 1rem;
    padding-bottom: 12rem;
  }
 
    header .header-wrapper {
      /* autoprefixer: off */
      /* width: 66vw; */
      grid-template-columns: auto 1fr 1fr 1fr 0.5fr;
      grid-template-rows: auto auto auto auto;
    }
    header h1:nth-child(1) {
      grid-column: 1 / -1;
    }
    header head2:nth-child(2) {
      grid-column: 1;
      grid-row: 2 / 4;
      font-size: 80%;
      margin-right: -5px;
      margin-bottom: 20px;
      writing-mode:horizontal-tb;
      color: #352a75;
    }
    
    header .divider {
      grid-column: 1 / 5;
      grid-row: 3;
      border-bottom: 4px solid #352a75;
    }
    header .references {
      grid-column: 1 / -1;
      grid-row: 4;
    }
    header .more-examples {
      grid-column: 1 / -1;
      grid-row: 5;
      margin-left: 0;
    }
  }