body {
  font-family: "Courier new", monospace;
  background-color: black;
  color: #00ff00;
}

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

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

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

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

figcaption {
  background: #00ff00;
  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 #00ff00;
  min-width: 40%;
  text-align:justify;
  white-space: pre-wrap;
  overflow-x: auto;
  background-color: black;
  margin: auto;
  padding: 1em;
}

.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 #00ff00;
  min-width: 30%;
  background-color: #222222;
  text-align:justify;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.5em;
  width: 90%;
}


/* links */
.dir::before {
  content: "$ ";
  color: #00ff00;
  font-size: 1.5em;
}

a {
  font-size: 1.5em;
}