:root {
  --header-footer-height: max(5vh, 100px);
  --content-height: calc(100vh - 2 * var(--header-footer-height));
  --border-radius: 12px;
}

* {
  box-sizing: border-box;
}

body.mobile {

}

body.desktop {

}

body {
  margin: 0;
  font-family: Avenir, Helvetica, sans-serif;
  color: var(--text);
  background: var(--header-footer-bg);
  font-weight: light;

  --header-footer-bg: #141414ff;
  --header-footer-text: #ffffffff;
}

body.dark {
  --base:           #10101099;
  --base-alt:       #20202099;
  --base-hover:     #28282899;
  --player-bg:      #111111ff;
  --text:           #f8f8f8ff;
  --secondary-text: #c4c4c4ff;
  --inactive-text:  #404040ff;
}

body.light {
  --base:           #cccccc99;
  --base-alt:       #ffffff44;
  --base-hover:     #ffffff66;
  --player-bg:      #ffffffff;
  --text:           #333333ff;
  --secondary-text: #444444ff;
  --inactive-text:  #909090ff;
}

button {
  color: inherit;
}

header, footer {
  background: var(--header-footer-bg);
  color: var(--header-footer-text);
  padding: 4px;
  height: var(--header-footer-height);
  text-align: center;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns:
    1fr var(--header-footer-height)
    calc(75% - 2 * var(--header-footer-height))
    var(--header-footer-height) 1fr;
  grid-template-areas: "left midleft middle midright right";
}

body.mobile header, body.mobile footer {
  grid-template-columns: var(--header-footer-height) 1fr var(--header-footer-height);
  grid-template-areas: "left middle right";
}

h1#directoryLabel {
  display: none;
  font-size: 22px;
  grid-area: middle;
  margin: auto;
  font-weight: 400;
  text-transform: uppercase;
}

body.mobile h1#directoryLabel {
  grid-area: middle;
}

svg#logo {
  height: 37px;
  grid-area: midleft;
  margin: 24px 31px 0;
}

body.desktop svg#logo {
  margin-left: 14px;
}

body.mobile svg#logo {
  grid-area: left;
}

a#companylink {
  grid-area: middle;
  margin: auto;
}


a {
  text-decoration: none;
  color: inherit;
  border: 0;
}


p, h1 {
  margin: 0;
}

.bold {
  font-weight: bold;
}

.secondarytext {
  color: var(--secondary-text);
}


section#content {
  min-height: var(--content-height);
  padding: 8px;
  background: url('/.theme/backgrounds/image_01.jpg') no-repeat center 75%;
  background-size: cover;
}

div#filelist {
  width: 75%;
  margin: 50px auto;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--base);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

a.fileEntry {
  padding: 10px;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 45px 1fr 35px;
  cursor: pointer;
}

a.fileEntry:nth-child(even) {
  background: var(--base-alt);
}

a.fileEntry:hover {
  background: var(--base-hover);
}

div.icon, div.dlbutton {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div.icon {
  font-size: 40px;
}
div.dlbutton {

}
a.dlLink {
  font-size: 30px;
}

div.fileSize {
  font-size: 12px;
  border-radius: 2px;
  width: 100%;
}

div.info {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.mobile div.info {
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
}

div#player {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: default;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

div#player:target {
  display: flex;
}

div#playerContainer {
  --button-size: min(10vmin, 30px);

  background: var(--player-bg);
  width: 80vw;
  height: 80vh;
  padding: 10px;
  border-radius: var(--border-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns:
    var(--button-size) 1fr var(--button-size) var(--button-size)
    var(--button-size) 1fr var(--button-size);
  grid-template-rows:
    var(--button-size) 1fr var(--button-size) 1fr var(--button-size);
  font-size: 100%;
}

body.desktop div#playerContainer {
  grid-template-areas:
    ".    title  title  title  title  title  exit    "
    ".    player player player player player .       "
    "back player player player player player forward "
    ".    player player player player player .       "
    ".    .      .      .      .      .      download";
}

body.mobile div#playerContainer {
    grid-template-areas:
    ".      title  title  title  title   title  exit    "
    "player player player player player  player player  "
    "player player player player player  player player  "
    "player player player player player  player player  "
    ".      .      back   .      forward .      download";
}

button.navButton {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

button.navButton.inactive {
  color: var(--inactive-text);
  cursor: default;
}

.navButton {
  text-align: center;
}

button#backButton {
  grid-area: back;
}

button#forwardButton {
  grid-area: forward;
}

a#downloadButton {
  grid-area: download;
}

a#closeButton {
  grid-area: exit;
}

h3#fileTitle {
  grid-area: title;
  margin: auto;
  width: 100%;
  text-align: center;
  overflow-wrap: break-word;
}


div#players {
  grid-area: player;
}

div#players div {
  display: none;
}

div#players.music div#musicPlayer,
div#players.video div#videoPlayer,
div#players.image div#imageViewer,
div#players.pdf   div#pdfViewer,
div#players.other div#otherViewer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

div#musicPlayer audio {
  width: 90%;
}

div#videoPlayer video {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

div#imageViewer img {
  width: 95%;
  height: 100%;
  object-fit: contain;
}

div#pdfViewer object {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

/* Icons */
.directory .icon {
  color: #4090f0;
}

p.unknownfile {
  font-size: 30vmin;
}

.fontawesome {
  font-family: 'FontAwesome';
}