@font-face {    
  font-family: 'routed';      
  src: url('https://kaleidoscope.titipi.org/static/css/fonts/routed-gothic-wide.ttf');    
  font-weight: normal;     
  font-style: normal; 
} 

body {
  font-family: 'routed';
  background-color: lightgrey;
  color: #111111;
  font-size:14px;
}

.footer, .header{
  position: fixed;
  bottom: 0em;
  padding: 0.2rem;
  left: 0;
  width: 100%;
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  z-index: 100;
  background-color: lightgrey;
  font-family: 'routed';
  /*border-top: 1px solid black;*/
}

.header.main{
  text-align:right;
}

.footer a, .header a{
  border: none;
  background: white;
  color: black;
  text-decoration: none;
  margin: 0.2em;
  padding: 8px 12px;
  border-width: 1px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
}

.header a:hover {
 background: grey;
 transition: all 0.3s ease;
}

.subpaths {
 margin: 0 1rem;
}

.subpaths a:hover {
 background: grey;
 transition: all 0.3s ease;
}


#title {
 
}

#title h1 {
font-size: 2.5em;
}

h1{
font-size:2em;
}
h2{
font-size:1.75em;
}
h3{
font-size: 1.5em;
}
h4{
font-size: 1.25em;
}
h5{
font-size: 1em;
}

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

div .image {
  min-width: 30%;
  margin: auto;
}

div .pdf {
  min-width: 30%;
  margin: auto;
  aspect-ratio: 1/1.4;
}
object.pdf{
width:100%;
}
.pdf .filename{
  background: white;
  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: silver;
  color: #000000;
}

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

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: 0px solid #a000ff;
  min-width: 40%;
  text-align:justify;
  white-space: pre-wrap;
  overflow-x: auto;
  background-color: white;
  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: white;
  color: #000000;
  margin: auto;
  padding: 1em;
}

.plain .filename {
  display: none;
}

div > pre {
  border: 0px solid #a000ff;
  min-width: 30%;
  background-color: white;
  text-align:justify;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.5em;
  color: black;
  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 {
  color: black;
  text-decoration: underline;
  font-size: 1.25em;
  font-size: 14px;
}