:root {
    --fg-blue  : #aaaaff;
    --fg-pink  : #ff8fff;
    --fg-white : #ffffff;

    --shadow-white : 0 0 20px #dddddd;

    --border-pink : 1px solid var(--fg-pink);

    --border-shadow-pink : inset 0 0 12px #ff8fff55;
}

@font-face {
    font-family: 'Fira Code';
    src        : url('/static/assets/FiraCode-Regular.ttf') format('truetype');
}


/* Fix html dumbassery */
html {
    overflow-x          : hidden;
    margin              : 0;
    padding             : 0;
}


/* Main font settings */
* {
    color       : var(--fg-white);
    background  : #0000;
    font-family : 'Fira Code', monospace !important;
    /*text-shadow : 0 0 20px #ff00ff;*/
    outline     : 0;
    font-variant-ligatures: none;
    overflow-x  : hidden;
}


.header {
    width           : 100vw;
    display         : flex;
    justify-content : center;
}

/* ASCII art title */
pre {
    background-image  : linear-gradient(var(--fg-blue), 
                                        var(--fg-blue),
                                        var(--fg-pink), 
                                        var(--fg-white), 
                                        var(--fg-white), 
                                        var(--fg-white),
                                        var(--fg-white)
                        );
    background-repeat : no-repeat;
    background-clip   : text;
    color             : transparent;

    /* Fuck you chromium */
    -webkit-background-clip: text;

    text-shadow : var(--shadow-white);
    white-space : pre !important;
    line-break  : none;
    text-align  : left;
}


/* Document body, obviously */
body {
    margin           : 0;
    padding          : 0;
    text-align       : center;
    height           : 100vh;
    width            : 100vw;
    overflow-x       : hidden;
    overflow-y       : scroll;
    background-image : linear-gradient(#000000, #000000),
                       linear-gradient(#090010, #090010),
                       linear-gradient(#09001b, #09001b),
                       linear-gradient(#12001b, #12001b),
                       linear-gradient(#120024, #120024),
                       linear-gradient(#16002b, #16002b);

    background-repeat   : no-repeat;
    background-position : 0% 0%, 0% 20%, 0% 40%, 0% 60%, 0% 80%, 0% 100%;
    background-size     : 100vw 20%;
    scrollbar-color     : #aa5aaa88 #0000;
    justify-content     : center;
}


/* Navigation bar */
.navbar {
    height          : 20pt;
    margin-left     : 20px;
    margin-right    : 20px;
    background      : #0008;
    padding         : 0px;
    position        : relative;
    align-content   : middle;
/*    border          : var(--border-pink);
    box-shadow      : var(--border-shadow-pink);*/
    display         : flex;
    flex-wrap       : nowrap;
    justify-content : center;
    overflow-y      : hidden;
    overflow-x      : hidden;
}

/* Links in navbar */
.navbar .link {
    display         : inline-block;
    width           : 75pt;
    height          : 16pt;
    margin          : 0px;
    padding-top     : 2pt;
    border          : var(--border-pink);
    text-decoration : none;
    margin-left     : 10pt;
    margin-right    : 10pt;
    transition      : background .35s, color .2s;
}

.navbar .link:hover {
    color        : black;
    background   : var(--fg-pink);
}

.navbar .disabled {
    display : none;
}

.navbar .disabled:hover {
    background : #00000000;
    color      : #f0f0f0;
}

/* Content */
.content, .foldercontent {
  margin     : 20px;
  background : #0008;
  border     : 1px #ff8fff solid;
  box-shadow : var(--border-shadow-pink);
  overflow-x : hidden;
}

.content {
  overflow-y      : auto;
  padding-bottom  : 10pt;
  scrollbar-color : #aa5aaa88 #0000;
}

@media only screen and (min-width: 1540px) {
  .content {
        max-width   : 1500px;
        width       : 1500px;
        margin-left : auto;
        margin-right: auto;
  }
}

.foldercontent {
  margin : 0;
}

.content p {
  margin-left   : 20pt;
  margin-right  : 20pt;
  margin-bottom : 0pt;
}

.wintitle, .foldertitle, .doctitle {
    background     : var(--fg-pink);
    color          : black;
    margin         : 0px;
    padding-bottom : 2pt;
    padding-left   : 2pt;
    display        : block;
    width          : 100%;
    overflow-y     : hidden;
    max-height     : 10pt;
    text-align     : left;
    font-size      : 8pt;
    font-weight    : bold;
    box-shadow     : 0 0 12px #ff8fff;
}

.doctitle {
  width : auto;
}

.foldertitle {
  padding-bottom : 1pt;
  width          : auto;
  transition     : background .2s, color .2s;
  box-shadow     : inset 0 0 12px #ff8fff;
  border         : 1px #ff8fff solid;
}

.foldertitle:hover {
  background    : #00000000;
  color         : #f0f0f0;
}

.folder {
  box-shadow : none;
  margin    : 20pt;
}

.folderarrow::after {
  content : "+";
}

.folder[open=""] .foldertitle .folderarrow::after {
  content : "–";
}

.folder[open=""] div {
  animation : fadein .1s linear;
}

.folder div {
  box-shadow : inset 0 0 12px #ff8fff;
}

.folderarrow {
  float : right;
  color : #16002b;
  background : #00000000;
  margin-right : 5pt;
  font-size : 9pt;
}

.foldertitle:hover .folderarrow {
  color : #f0f0f0;
}

/* Tab stuff */
.tabview {
  display   : flex;
  flex-wrap : wrap;
}

.tabcontent {
  height     : 0px;
  opacity    : 0;
  width      : 100%;
  order      : 99;
  transition : opacity .2s;
}

.tab {
  display : none;
}

.tablabel {
  order      : 1;
  display    : block;
  padding    : 2pt;
  cursor     : pointer;
  flex-grow  : 1;
  transition : background .2s, box-shadow .2s;
}

.tab:checked + label + .tabcontent {
  height  : auto;
  opacity : 100;
}

/* Links in text */
.bodylink {
  text-decoration : none;
}
/* Hover version */
.bodylink:hover {
  color : #999999;
}

.docimage {
  margin     : 20px;
  box-shadow : none;
  width      : 50%;
  position   : relative;
}

/* Footer */
.footer {
  position   : fixed;
  background : #000;
  padding    : 5pt;
  text-align : left;
  bottom     : 0px !important;
  box-shadow : 0 0 5px 1px #ff8fff;
  width      : 100%;
  overflow   : hidden !important;
  margin     : 0pt;
}

/* Mobile logo thing */
@media only screen and (max-width: 950px) {
  pre {
    font-size : 5pt;
  }
  .docimage img {
    width : 100%;
  }
}

@keyframes fadein {
  from {
    opacity : 0;
  }
  to {
    opacity : 100;
  }
}