/* For stuff in chronological order... */

@import url('vars.css');

header, article, nav {
  width:50vw;
  background: #141414;
}

header {
  margin: 50px auto 50px auto;
  display:flex;
}

header ol#contents {
  width: 25%;
}

header ol#contents>li {
  margin: 5px 0 5px 0;
}

header div#intro {
  width: 73.5%;
}

header, article {
  padding:10px 20px 10px 20px;
}

article {
  /*background:#232323;
  width:50vw;*/
  left:15vw;
  position:relative;
  margin-top: 50px;
  margin-bottom:50px;
  /*border:solid 5px black;*/
  line-height: 1.5em;
}

article:last-of-type {
  margin-bottom:100px;
}

article:nth-child(2n) {
  /*left:45vw;*/
  left:35vw;
}


nav {
  position:fixed;
  left:25vw;
  bottom:0px;
}

#title {
  color: var(--title);
  font-size:9em;
  display:flex;
  justify-content:center;
  text-align:center;
  opacity:95%;
}

header ul {
  list-style: none;
  padding-left:4px;
  font-family: monospace;
  font-size: 0.9em;
}

header li {
  margin:2px;
}

nav li {
  display: inline;
}

nav li:nth-child(n + 2) {
  margin-left:10px;
}

@media screen and (orientation:portrait), screen and (pointer: coarse), (max-width: 1200px) {
  main {
    width:80vw;
  }
  article {
    position:static;
    margin:auto;
  }

  header {
    flex-direction:column;
  }
  header div, header ul {
    width:100%;
  }
}