style.css

:root {
  --background: #fae6e5;
  --foreground: #ff8165;
  --border:     #ff8165;
  --bottomimg:  url(/assets/img/hat.png);  

  --darkback:   #282a36;
  --darkfore:   #6272a4;
  --darkborder: #6272a4;
  --darkbotimg: url(/assets/img/hat.png);
}


@font-face {
  font-family: "icons";
  src: 
    url("/assets/fonts/icons.woff2") format("woff2"), 
    url("/assets/fonts/icons.woff") format("woff"),
    url("/assets/fonts/icons.ttf") format("truetype"),
    url("/assets/fonts/icons.eot") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "operator";
  src: url("/assets/fonts/operator.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "operator";
  src: url("/assets/fonts/operatoritalic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

html {
  background:url(/assets/img/back.gif) #fae6e5;
  height:calc(100% - 45px);}

body {
  font-family: 'operator','OperatorMono Nerd Font', 'OperatorMono', Courier New, monospace;
  color: var(--foreground); 
  font-size:10pt;
  font-weight:400;
  background: var(--background);
  padding:15px;
  -webkit-box-shadow: 0px 0px 0px 3px var(--border); 
  box-shadow: 0px 0px 0px 3px var(--border);
  min-height:calc(100% - 45px);
}

#hat {
  position: fixed;
  bottom: 11px;
  right: 27px;
  background: var(--bottomimg) no-repeat;
  height: 60px;
  width: 57px;
  background-size: contain;
}

h1 {
  font-style: italic;
  font-weight: 700;
  margin-bottom: 20px;
  font-style:normal;
}

#breadcrumbs {
  margin-left:2px;
  font-size:10pt!important;
  font-style:oblique;
}

  #breadcrumbs a {
    color: var(--foreground);
    padding: 2px 3px 3px 3px;
  }

.box-content {
  padding: 15px 0px;
  font-size:0pt;
}

#list {
  width: 500px;
  border:0px;
  position:relative;
  left:-5px;
  font-style:normal;
  font-size:10pt;
}

table {
  border-spacing: 0px;
}

th,tr:nth-child(even) {
  background:none;
}

#breadcrumbs a:hover,
table#list tbody tr:hover {
  background:var(--foreground);
  color: var(--background);
}

table#list td {
  padding-left:0px;
}

a, 
a:hover, 
a:active {
  text-decoration:none;
}

#header {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size:72pt;
  font-weight:700;
  display:block;
  margin-top:-12px;
  margin-left:-6px;
  text-shadow: 0px 1px 18px #FFF;
  line-height: 75%;
  padding: 8px 0px 20px 0px;
  font-style:normal;
}

#header p br {
  content: "";
  margin: -35px;
  display: block;
  font-size: 0pt;
}

img#stars {
  height:140px;
  width: 300px;
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: .6;
}

#readme{
  margin:0px 0px 0px 5px;
  border-top:1px dotted var(--foreground);
  max-width: 90%;
  width:500px;
}

  #readme a:link,
  #readme a:hover,
  #readme a:active,
  #readme a:visited 
   {color: #655c5c;
  } 

  #readme a:hover {
   font-weight: 700;
  }

  #readme img {
   max-width: 500px;
   max-height: 500px;
   margin: 20px 0px;
  }

table#list tbody tr {height: 25px;}

table#list tbody a {
  padding-left: 0px;
  color:var(--foreground);}

table#list tbody a[href$="/"] {
  color: var(--foreground);
  font-weight: 700;
  padding: 0px;
}

table#list tbody a:before {
  font-family:"icons"!important;
  content: "\F0214";
  padding:0px 10px;
  display:inline-block;
}

table#list tbody a[href$="../"]:before {
  content: "\F060C"!important;
}

table#list tbody a[href$="/"]:before {
  content: "\F024B";
  color:var(--foreground);
}

table#list tbody a[href="t/"]:before{
  content:"\F0839"
}

table#list tbody a[href="m/"]:before{
  content:"\F0381"
}

table#list tbody a[href$="flac"]:before,
table#list tbody a[href$="m4a"]:before,
table#list tbody a[href$="m4r"]:before,
table#list tbody a[href$="wav"]:before,
table#list tbody a[href$="mp3"]:before, 
table#list tbody a[href$="caf"]:before {
  content: "\F0E2A";
}

table#list tbody a[href$="mkv"]:before,
table#list tbody a[href$="mp4"]:before {
  content: "\F0FCF";
}

table#list tbody a[href$="png"]:before;
table#list tbody a[href$="jpg"]:before;
table#list tbody a[href$="gif"]:before {
  content:"\F0EB0";
}

table#list tbody a[href$="epub"]:before,
table#list tbody a[href$="m4b"]:before,
table#list tbody a[href$="mobi"]:before {
  content:"\F0B63";
}

table#list tbody a[href$="nzb"]:before {
  content:"\F1764";
}

table#list tbody a[href$="zip"]:before,
table#list tbody a[href$="deb"]:before,
table#list tbody a[href$="rar"]:before {
  content: "\F07B9";
}

table#list tbody tr:hover a,
table#list tbody tr:hover a[href="t/"]:before,
table#list tbody tr:hover a[href="m/"]:before,
table#list tbody tr:hover a[href$="/"]:before {
  color: var(--background);
}

table#list thead {display:none;}

table#list th:nth-of-type(2) a {
    font-size:0pt;
}

table#list th:nth-of-type(1) a:nth-of-type(1),
table#list th:nth-of-type(1) a:nth-of-type(2) {
  display:none;
}

table#list th:nth-of-type(2) a:nth-of-type(1):before {
    content:"";
    font-size:10pt;
 display:inline-block;
}

table#list td:nth-of-type(2),
table#list td:nth-of-type(3) {
  padding: 0px 15px;
}

table#list th:nth-of-type(2),
table#list th:nth-of-type(3),
table#list td:nth-of-type(2), 
table#list td:nth-of-type(3) {
  text-align: right;}

table#list th:nth-of-type(3),
table#list td:nth-of-type(3) {
  display:none;}

@media only screen and (max-width: 600px) {

  #header {
   font-size: 20vw;
  }

  table#list th:nth-of-type(2),
  table#list th:nth-of-type(3),
  table#list td:nth-of-type(2),
  table#list td:nth-of-type(3) {
    display:none;
    max-width: 95%;
    overflow-x:hidden;
  }

  #list {
    width:100%;
  }

}

/*
@media (prefers-color-scheme: dark) {

  html {
    background: var(--darkback);
  }

  body {
    background: #282a36;
    box-shadow: 0px 0px 0px 3px var(--darkfore);
  }

  #header {
    text-shadow: 0px 1px 18px var(--darkborder);
  }

  body, 
  table#list tbody a,
  table#list tbody a:before,
  table#list tbody a[href$="/"],
  table#list tbody a[href$="/"]:before,
  #breadcrumbs a
    {color:var(--darkfore);}

  #hat
   background: var(--darkbotimg) no-repeat;
  }
}
*/