/* Have to use @import for the font, as you can only specify a single stylesheet */

/*------------------------------------*\
    Stuff of Meister Maximus
    @author ItsLeMax
\*------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --initial_dark: rgb(44, 44, 44);
    --initial_bright: rgb(235, 235, 235);
}

h1,
.size,
.date {
    color: var(--initial_bright);
}

/* Always highlight the step back 'folder' */

a[href="../"],
a[href="../?C=N&O=D"],
a[href="../?C=S&O=A"],
a[href="../?C=S&O=D"],
a[href="../?C=M&O=A"],
a[href="../?C=M&O=D"] {
    color: rgb(219, 180, 107);
}

/* Hover effect with background and inverted text color */

tr:hover td {
    background: #d6a46b;
}

tr:hover a:not(thead *),
tr:hover td {
    color: var(--initial_dark);
}

/* Repeating pattern of bright and dark background */

tbody>* {
    background-color: var(--initial_dark);
    filter: brightness(90%);
}

tbody>*:nth-child(odd) {
    filter: brightness(80%);
}

@media (max-width: 960px) {
    html {
        font-size: .8em !important;
    }
}

@media (max-width: 640px) {
    html {
        font-size: .6em !important;
    }

    td:last-child,
    th:last-child,
    th+th {
        min-width: unset !important;
    }
}

/*------------------------------------*\
    Basic declarations
    @author luk1337 / jessfraz
\*------------------------------------*/

html {
    min-height: 100%;
    font-weight: 300;
    font-size: 1.5em;
    font-family: system, -apple-system, ".SFNSDisplay-Regular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 2em;
    background-color: var(--initial_dark);
}

body {
    max-width: 900px;
    margin: 0 auto;
    backface-visibility: hidden;
}

a {
    color: var(--initial_bright);
    text-decoration: none;
}

/*------------------------------------*\
    Wrapper
\*------------------------------------*/
.wrapper {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 800px;
}

/*------------------------------------*\
    Demo block
\*------------------------------------*/
h1 {
    font-weight: 200;
    text-align: center;
    font-size: 1.4em;
    line-height: 3em;
    font-family: 'Museo Slab', 'Open Sans', monospace;
    padding-left: 10px;
}

a.clear,
a.clear:link,
a.clear:visited {
    padding: 2px 0 2px 0;
    font-weight: 400;
    font-size: 14px;
    margin: 0px 0 0 20px;
    line-height: 14px;
    display: inline-block;
    border-bottom: transparent 1px solid;
    vertical-align: -10px;
    transition: all 100ms ease-in;
}

a.clear:hover {
    text-decoration: none;
    cursor: pointer;
}

/*------------------------------------*\
    Table (directory listing)
\*------------------------------------*/
table {
    border-collapse: collapse;
    font-size: .875em;
    max-width: 100%;
    margin: 20px auto;
}

tr {
    outline: 0;
    border: 0;
}

th {
    text-align: left;
    font-size: 1em;
    padding-right: 20px;
    width: 85%;
}

/* 2nd Column: Filename */
th+th {
    width: 10%;
    padding-left: 0px;
    padding-right: 0px;
    min-width: 100px;
}

/* 3rd Column: Last Modified */
th+th+th {
    width: 20%;
}

/* 4th Column: Size */
th+th+th+th {
    width: 5%;
}

tr td:first-of-type {
    padding-left: 10px;
    padding-right: 10px;
}

th:first-of-type {
    padding-left: 10px;
}

td {
    padding: 5px 0;
    outline: 0;
    border: 0;
    border-bottom: 1px solid var(--initial_dark);
    vertical-align: middle;
    text-align: left;
    transition: background 100ms ease-in;
}

td:last-child,
th:last-child {
    text-align: right;
    min-width: 150px;
}

th:last-child {
    padding-right: 5px;
}

td:last-child {
    padding-right: 10px;
}

td a {
    display: block;
}

tr.parent a {
    color: #9099A3;
}

/*------------------------------------*\
    Footer
\*------------------------------------*/
.footer {
    text-align: center;
    font-size: .75em;
    margin-top: 50px;
}