* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-size:1em;
  font-family: 'Sorts Mill Goudy', serif;
  color:#727272;
  }

ul, ol {margin:0;padding:0;text-indent:0;}

a {color:rgb(28,212,0);padding: 0.4rem 0;}
a:hover {color:rgb(255,124,0);background-color:#ddd;}
a:active {color:rgb(3,66,204);background-color:transparent;}

h1 a {color:rgb(3,66,204);}

header {
  top:1%;
  left:12%;
  z-index:2;
  position:absolute;
}

.main {
  top:8%;
  left:1%;
  width:98%;
  z-index:10;
  position:absolute;
}

.archive {
  top:10%;
  left:7%;
  width:86%;
  z-index:7;
  position:absolute;
}

article {
  position:absolute;
  color:rgba(180,180,180,0.2);
  top:3.4em;
  left:1em;
  font-size:1rem;
  line-height:1.2;
}

nav {
  top:9%;
  right:3%;
  z-index:4;
  font-family: 'Varela', sans-serif;
  font-size:1.0rem;
  line-height: 1.4;
  position:absolute;
  background:rgba(255,255,255,0.7);
  width:40%;
}

.navpost {
  list-style: none;
  opacity: 0.3;
  }

.navpost a {display:block;width: 100%;color:rgb(204,29,29);}
.navpost a:hover {color:rgb(255,124,0);}

.mswitch {color:rgb(204,29,29);}
.mswitch:hover {color:rgb(255,124,0);}

.navtop {z-index:90;}

.navtop .navpost {opacity:1;}

article a { color:rgba(144,144,144,0.2); }

article ul, article ol { margin-left: 1.3rem;}

article li {margin-bottom: 0.3rem;}

.main article {
  color:rgba(33,33,33,1);
  z-index: 30;
  top:2em;
  left:1em;
  font-size:1.2rem;
  line-height:1.6;
  }

.main article a {color:rgb(28,212,0);}
.main article a:hover {color:rgb(255,124,0);}

.main article h3 {
  font-weight:bold;
  font-size:1.8rem;
  }

.main article p.dateline {
  margin-top:1.4em;
  color:rgba(99,99,99,1);
  font-size:0.8em;
  }

.main article li:nth-child(even) {
  color: rgb(180,180,180);
  }

.main article li:nth-child(odd) {
  color: rgb(110,110,110);
  }


@media screen and (min-width: 690px) {
.main {
  top:8%;
  left:4%;
  width:82%;
}

.archive {
  top:10%;
  left:7%;
  width:74%;
}
}


@media screen and (min-width: 920px) {
.main {
  top:8%;
  left:7%;
  width:72%;
}

.archive {
  top:10%;
  left:9%;
  width:80%;
}
}