body {
  font-family: monospace;
  background-color: #fdfdfd;
  color: #111111;
  font-size:14px;
}

.header{
  display: block;
  width:100%;
  border-bottom: 1px dotted;
  padding-bottom: 10px;
}
.header.main{
  text-align:right;
}

.header a{
  margin:5px;
}
.subpaths {
    font-size: 1.25em;
}
h1{
font-size:2.5em;
}
h2{
font-size:2em;
}
h3{
font-size: 1.75em;
}
h4{
font-size: 1.5em;
}
h5{
font-size: 1.25em;
}

#title{
  display: block;
  width:100%
}

div .md,div .txt{
  margin-left: auto;
  margin-right: auto;
  min-width:30%;
}

div .image {
  border: 3px solid #a000ff;
  min-width: 30%;
  background-color: #222222;
  margin: auto;
}

div .pdf {
  border: 3px solid #a000ff;
  min-width: 30%;
  background-color: #222222;
  margin: auto;
  aspect-ratio: 1/1.4;
}
object.pdf{
width:100%;
}
.pdf .filename{
background: #a000ff;
  color: #000000;
}

div > video {
  border: 3px solid #a000ff;
  min-width: 30%;
  background-color: #222222;
  margin: auto;
}

div > audio {
  border: 3px solid #a000ff;
  min-width: 30%;
  background-color: #222222;
  margin: auto;
}

figcaption {
  background: #a000ff;
  color: #000000;
}

#wrapper {
  margin: 5em auto;
  color: black;
  display: flex;
  width: 90%;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  overflow: scroll;
  gap: 2em;
}

img, video, audio {
  display: block;
  width: 100%;
  height: 100%;
  min-width: inherit;
  max-width: inherit;
  object-fit: cover;
}

.jpeg, .jpg, .png, .bmp, .gif, .tif, .tiff, .webp { 
  border: 3px solid #a000ff;
  min-width: 40%;
  text-align:justify;
  white-space: pre-wrap;
  overflow-x: auto;
  background-color: black;
  margin: auto;
  padding: 5px;
}

.jpeg, .jpg, .png, .bmp, .gif, .tif, .tiff, .webp > figure > figcaption {
  max-width: 480px;
}

.mp4, .mpeg, .ogv, .webm, .avi {
  min-width: 30%;
  background-color: black;
  color: #00ff00;
  margin: auto;
  padding: 1em;
}

.plain {
  min-width: 30%;
  max-width: 70%;
  background-color: black;
  color: #00ff00;
  margin: auto;
  padding: 1em;
}

div > pre {
  border: 3px solid #a000ff;
  min-width: 30%;
  background-color: #222222;
  text-align:justify;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.5em;
  color: white;
  display:inline-block;
  width: auto;
}

div.dirs{
width:100%;
min-height:100px;
padding-top:30px;
}

div.dir{
display:inline-block;
min-width: 30%;
}

/* links */
.dir::before {
  content: "↳ ";
  color: #00aa99;
  font-size: 1.25em;
}

a {
  font-size: 1.25em;
}