@font-face {
  font-family:JetBrainsMono;
  src:url("/JetBrainsMonoNLNerdFont-Regular.ttf")
}
:root {
  --bg-color: rgba(32, 32, 42, 0.8);
  --font-color: #cdd6f4
}
* {
  scrollbar-width:thin;
  scrollbar-color:#dc8add var(--bg-color)
}
html {
  color:var(--font-color);
  font-family:JetBrainsMono;
  height:100vh;
  width:100vw
}
body {
  background-repeat:no-repeat;
  background-size:cover;
  margin:0
}
@media only screen and (max-width: 768px) {
  .viewer {
    position:relative;
    overflow:scroll !important;
    height:fit-content !important
  }
  .viewer .tab>ul {
    margin-top:0px !important;
    margin-left:0px !important
  }
  .viewer .tab {
    height:1.8em !important;
    box-shadow:0px 3px 0px 0px var(--font-color) !important;
    position:relative
  }
  .viewer .tab>ul>li>a {
    align-content:center
  }
  .viewer .file-manager {
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    width:2em;
    padding-left:.5em;
    box-shadow:-3px 0px 0px 0px var(--font-color);
    align-content:center;
    cursor:pointer
  }
  .section {
    margin-left:3%;
    margin-right:3%;
    padding:0
  }
  .section .section {
    margin:0
  }
  .files {
    display:none;
    box-shadow:0px 3px 0px 0px var(--font-color) !important
  }
  .close {
    display:none
  }
  .open {
    display:block;
    height:100%
  }
  .prompt {
    display:none !important
  }
}
@media only screen and (min-width: 768px) {
  .viewer {
    width:80%;
    margin-left:20%;
    position:absolute
  }
  .files {
    position:sticky;
    top:0;
    width:calc(20% - 10px);
    height:calc(100% - 58px);
    box-shadow:3px 0px 0px 0px var(--font-color);
    overflow-x:scroll
  }
  .file-manager {
    display:none
  }
}
main {
  overflow:clip;
  height:98vh;
  width:98vw;
  margin-top:1vh;
  margin-left:1vw;
  border-radius:20px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color:var(--bg-color);
  backdrop-filter:blur(5px)
}
main .files ul {
  list-style-type:none
}
main .files ul a {
  color:var(--font-color);
  text-decoration:none;
  display:inline
}
main .files a:hover,
main .files .selected {
  background-color:rgba(66,135,245,.5) !important
}
main .viewer {
  height:calc(100% - 58px);
  overflow:clip
}
main .viewer .content {
  text-wrap:balance;
  padding-left:20px;
  height:calc(100% - 23px);
  overflow-y:scroll;
  overflow-x:clip;
  margin-top:3px
}
main .viewer .content a:hover,
main .viewer .content .selected {
  background-color:rgba(66,135,245,.5) !important
}
main .viewer .content img {
  max-width:90%;
  max-height:20%;
  margin-right:100vw
}
main .viewer .content pre {
  background-color:var(--bg-color) !important;
  padding:10px;
  width:calc(100% - 40px)
}
main .viewer .content code,
main .viewer .content blockquote {
  background-color:var(--bg-color) !important;
  width:calc(100% - 50px);
  padding:.2em 1em .2em 1em;
  margin-left:0px;
  height:fit-content;
  position:relative
}
main .viewer .content pre>code {
  background-color:rgba(0,0,0,0) !important;
  color:var(--font-color)
}
main .viewer .content code {
  font-size:1.2em;
  padding:.2em;
  background-color:rgba(183,194,253,.2509803922) !important;
  color:#b7c2fd
}
main .viewer .content blockquote::before {
  background-color:#82aaff;
  width:3.5px;
  display:block;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  content:""
}
main .viewer .content ul.section a,
main .viewer .content ul.section li,
main .viewer .content ul.section a::before {
  color:var(--font-color);
  text-decoration:none;
  list-style-type:none;
  content:" "
}
main .viewer .content li.section a::before {
  content:" "
}
main .viewer .content h1,
main .viewer .content a,
main .viewer .content a::before {
  color:#82aaff;
  content:"󰌹 "
}
main .viewer .content h1::before {
  content:"󰲡 "
}
main .viewer .content h2,
main .viewer .content h2::before {
  color:#ffc777;
  content:" 󰲣 "
}
main .viewer .content h3,
main .viewer .content h3::before {
  color:#c3e88d;
  content:"  󰲥 "
}
main .viewer .tab::-webkit-scrollbar {
  display:none
}
main .viewer .tab {
  width:100%;
  height:22px;
  box-shadow:0px 3px 0px 0px var(--font-color);
  overflow-x:scroll;
  -ms-overflow-style:none;
  scrollbar-width:none
}
main .viewer .tab button {
  all:unset;
  cursor:pointer;
  padding-left:5px
}
main .viewer .tab ul {
  display:flex;
  flex-direction:row;
  padding:0px;
  margin:0;
  height:100%;
  margin-left:3px
}
main .viewer .tab ul li:hover,
main .viewer .tab ul .selected {
  background-color:rgba(66,135,245,.5) !important
}
main .viewer .tab ul li:not(.selected) a {
  color:rgba(205,214,244,.5)
}
main .viewer .tab ul a:hover {
  background-color:rgba(0,0,0,0)
}
main .viewer .tab ul a {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:50px;
  display:block;
  color:#fff
}
main .viewer .tab ul li {
  padding:0px 12px 0px 15px;
  box-shadow:-3px 0px 0px 0px var(--font-color) inset;
  color:rgba(205,214,244,.6) !important;
  display:inherit
}
main .viewer .section {
  padding:0px
}
main .file::-webkit-scrollbar {
  display:none
}
main .files {
  text-wrap:nowrap;
  overflow-x:scroll;
  -ms-overflow-style:none;
  padding-left:10px;
  padding-top:15px
}
main .files ul:not(:empty) {
  padding-left:.2em;
  margin:0
}
main .files span {
  padding:0;
  margin:0
}
main .files li {
  padding-left:0;
  margin:0
}
main .files li>ul>.file {
  padding-left:2.5em
}
main .files a {
  color:var(--font-color)
}
main .prompt {
  position:relative;
  bottom:0;
  height:55px;
  box-shadow:0px -3px 0px 0px var(--font-color);
  font-size:10px;
  display:inline-flex;
  width:100%;
  align-content:center
}
main .prompt .cursor {
  opacity:.6;
  width:15px;
  background-color:#fff;
  margin-top:2ex;
  margin-bottom:2ex;
  position:relative;
  display:none
}
main .prompt label {
  font-size:2em;
  padding-left:10px;
  margin-top:auto;
  margin-bottom:auto
}
main .prompt input {
  left:-1000px;
  position:absolute
}
footer>p {
  margin-bottom:0
}