@keyframes wipe-top {
  from { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
html {
  background-color:black;
  color:white;
overflow-x:auto;
}

p, #jsnavigation a, ol, summary {
  font-size:18px;
  margin: 0 auto 15px auto;
  line-height: 31px;
}
h5 {
  font-size:19px;
  margin: 0 auto 16px auto;
  line-height: 32px;
}
p, #jsnavigation a, ol, summary, h5, li { font-family: 'Courier New', monospace; }
p.italic { font-style:italic; }
br {line-height:45px;}
header {
  font-size: 32px;
  min-height: 52px;
  height: 16vh;
  max-height: 160px;
}
header a { 
  color:white; 
  text-decoration: none;
  padding:0 27px 15px 27px;
  font-family: 'Courier New', monospace;
}
header a:hover { text-decoration:underline; } 
section, article {
  display:inline-block;
  vertical-align: top;
}
section {
  width:36.5vw;
  max-width: 678px;
}
article {
  width:50vw;
  max-width: 929px;
  margin-bottom: clamp(1px, 4vw, 80px);
}
#jsnavigation { 
  width:100%;
max-width:250px;
  margin:0 auto;
}
#jsnavigation li {
  margin-left:10px;
  margin:10px;
}
#jsnavigation a { color:white; }
#jsnavigation a.special { color:#f48847; }
#jsnavigation a:hover { text-decoration-style:double; }
article li { font-size:20px; }

.animate-fast-fade { 
  transition-timing-function: ease-out;
  transition-duration:1.7s; 
}
.animate-slow-fade { 
  transition-delay: 1s;
  transition-duration:3s;
}
.animate-fast-fade, .animate-slow-fade { opacity: 0; }
.animate { opacity: 1;}

audio, img, video {
  margin: 20px 0;
  width:100%;
}
details { z-index:1; }
summary {
  top:0;
  position:sticky;
  z-index:2;
  padding: 20px;
  border: 1px solid black;
}
details[open] {
  max-height:50vh;
  overflow-y:auto;
  animation-name: wipe-top;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  border: 1px solid white;
}
details[open] summary { 
  padding-bottom:20px;
  background-color:black; 
  border-bottom: 1px solid white;
}
details[open] p {
  text-transform: uppercase;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 1500px) {
section { width:25vw; }
article { width:70vw; }
}

@media (max-width: 745px) {
body { padding:20px; }
header {
  height:5vh;
  border-bottom:1px solid #222;
  margin-bottom:20px;
}
section { 
  float:right; 
  padding: 20px;
  border:1px solid #222;
  margin:20px;
  overflow-x:auto;
}
#jsnavigation { margin:unset; }
article { display: inline; }
}