:root {
  --fg-default:#C5C6C7;
  --bg-default:#0B0C10;

  --fg-dark-title:#C5C6C7;
  --bg-dark-title:#1F2833;

  --fg-light-title:#1F2833;
  --bg-light-title:#C5C6C7;
}

* {
  padding:0;
  margin:0;
  word-wrap: break-word;
}

html {
  color-scheme: light dark;
  background: var(--bg-default);
  height:95vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.22;
  height:100vh;
  white-space: nowrap;
  background: var(--bg-default);
}

h1 {color:var(--fg-default);}

#file {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(to right, var(--fg-default) 8px, transparent 8px) 0 0,
    linear-gradient(to right, var(--fg-default) 8px, transparent 8px) 0 100%,
    linear-gradient(to left, var(--fg-default) 8px, transparent 8px) 100% 0,
    linear-gradient(to left, var(--fg-default) 8px, transparent 8px) 100% 100%,
    linear-gradient(to bottom, var(--fg-default) 8px, transparent 8px) 0 0,
    linear-gradient(to bottom, var(--fg-default) 8px, transparent 8px) 100% 0,
    linear-gradient(to top, var(--fg-default) 8px, transparent 8px) 0 100%,
    linear-gradient(to top, var(--fg-default) 8px, transparent 8px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}
#file input[type=file]{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  cursor:pointer;
}

img {
  max-width: 100%;
}

pre code {
  white-space: pre-wrap;
}

.page {
  height:95vh;
  overflow:hidden;
  display:none;
}

.active-page {
  display: table-cell;
  vertical-align:middle;
  text-align: center;
}

.page div {
  text-align: left;
  width:100vw;
  max-width: 75%;
  margin: 0 auto;
  font-size: inherit;
  color: var(--fg-default);
  background: var(--bg-default);
  white-space: pre;
  display: block;
  line-height: normal;
}

.page .blank-title {
  color: var(--bg-default);
  background: var(--bg-default);
}
.page .light-title {
  color: var(--fg-light-title);
  background: var(--bg-light-title);
  text-align: center;
}
.page .dark-title {
  font-size: inherit;
  color: var(--fg-dark-title);
  background: var(--bg-dark-title);
  text-align: center;
}

#theme-selector {
  text-align:center;
  display:none;
  align-items:center;
  justify-content:center;
}
#theme-selector div {
  font-size: 1vw !important;
  color: var(--fg-light-title);
  background: var(--bg-light-title);
  /*background: var(--bg-default);*/
  border: 2px solid var(--bg-dark-title);
  width:20%;
  z-index:12;
  position:absolute;
  top:20%;
  margin:0 auto;
  padding:15px;
  max-height: 60%;
  overflow-y: auto;
}
#theme-selector label span {
  padding:10px;
  margin:0;
}