:root {
    --body-color:#111; /* 111 (original), 393e41 (onyx) */
    --selection-color:#8f0000;
    --shadow-color:#444;
    --highlight-color:#222;
    --nav-color:#333;
    --text-color:#f7f0f0; /* #fff (original), #f7f0f0 (snow) */
    --link-color:#00ceff; /* #00ceff (original), #63b0cd (moonstone), #5aa9e6 (argentinian blue) */
    --warning-color:#8f0000;
    --info-color:#85cb33; /* #a2d729 (original), #f3a738 (gamboge), #85cb33 (yellow green), #c17817 (ochre), #fde74c (maize), #fff582, #fbc028 */
    color:var(--text-color);
    font-family:sans-serif;
    font-size:medium;
    box-sizing: border-box;
}
::selection {
    background-color:var(--selection-color);
    /* box-shadow:0px 0px 7px var(--shadow-color); - box-shadow is not supported for ::selection. */
}
body {
    background-color:var(--body-color);
    display:flex;
    flex-direction:column;
    align-items:center;
}
a {
    color:var(--link-color);
    text-decoration:none;
}
a h1,h2,h3,h4,h5,h6 {
    color:var(--text-color);
}
a.section-item h2 {
    color:var(--link-color);
}
a:hover {
    text-decoration:underline;
}
a:active {
    color:#ffce00;
    text-decoration:underline;
}
img {
    margin:5px;
}
a img {
    border:none;
}
ul {
    list-style-type:square;
    /* list-style-position:inside; */
    /* padding:1px; */
    /* margin:7px; */
}
::marker {
    margin-right:10px;
}
h1 {
    font-size:xx-large;
    /* text-shadow:0px 0px 2px var(--shadow-color); */
    margin-bottom:7px;
}
h2 {
    font-size:x-large;
    font-weight:bold;
    margin-bottom:5px;
}
h3 {
    font-size:large;
    font-weight:bold;
    margin-bottom:2px;
}
table {
    padding:0px;
    border:2pt solid var(--shadow-color);
    border-spacing:0px;
    border-radius:2pt;
    border-collapse:separate;
}
thead {
    font-weight:bold;
}
tr:hover {
    background-color:var(--highlight-color);
    /* filter:brightness(150%); */
}
td, th {
    padding:0.25em;
    border:1pt solid var(--shadow-color);
}
th {
    position:sticky;
    z-index:5;
    background-color:var(--highlight-color);
}
thead th {
    top:28px;
}
tbody th {
    top:56px;
}
th:hover {
    /* background-color:var(--nav-color); */
    filter:brightness(150%);
}
/* td {
    background-color:var(--body-color); not sure why i had this here...
}
td:hover {
    filter:brightness(150%);
} */
tbody th:first-of-type {
    left:0;
    z-index:1;
    border:2px solid var(--shadow-color);
    background-color:var(--body-color); /* has to be set because if the background is transparent (default), the text of the cells that appear behind it when scrolling will be visible. */
}
tbody th.table-header {
    z-index:3;
}
/* table tr:hover td:first-of-type { */
/*     background-color:var(--highlight-color); */
/* } */
input, select, textarea, button {
    font-family:inherit;
    font-size:inherit;
}
input {
    color:#000; /* FIX? */
}
input[type=file] {
    color:var(--text-color);
}
code, pre {
    background-color:var(--nav-color);
    padding:0.4em;
    border:2px dashed var(--border-color);
    border-radius:0.4em;
    white-space:pre;
    overflow:auto;
    text-wrap:wrap stable;
}
code {
    padding:0.2em; /* code blocks display much more padding, so we set it lower */
}
.inlinelist {
    list-style-type:none;
}
.inlinelist li {
    display:inline-flex;
    margin-left:1%;
    margin-right:1%;
}
.inlinelist li:first-child:before {
    content:none;
}
/* .inlinelist li:before { */
/*     content:""; */
/* } */
#shownav {
    display:none;
}
label[for=shownav] {
    display:none;
}
nav {
    position:fixed;
    top:0;
    left:0;
    z-index:10;
    /* padding:4px 5px; */
    border-bottom:2px solid #000;
    background-color:var(--nav-color);
    border-top-width:0px;
    box-shadow:0px 0px 7px var(--shadow-color);
    display:flex;
    width:100dvw;
}
nav > * {
    padding:3pt 4pt; /* 4px 5px; */
}
#navlist {
    list-style-type:none;
    margin:0;
    flex:1;
}
#navlist li {
    float:left;
    margin-right:3px;
}
#navlist li a {
    display:block;
}
#akpdt {
    color:#fff;
    font-weight:bold;
}
#akpdt:before {
    content:"[";
}
#akpdt:after {
    content:"]";
}
#aforum {
    color:#ffd700;
}
#achat {
    color:#c0c0c0;
}
#aarticles {
    color:#f08080;
}
#alinks {
    color:#90ee90;
}
#amusic {
    color:#87cefa;
}
#aprojects {
    color:#f0e68c;
}
#afiles {
    color:#f44;
}
#amedia {
    color:#44f;
}
#astats {
    color:#ff4;
}
#aprofile {
    color:#ffc0cb;
}
#alogout {
    color:#cd853f;
}
#aadmin {
    color:#9932cc;
}
#current-page {
    display:flex;
    flex:1;
    justify-content:center;
}
#current-page ul {
    padding:0;
    margin:0;
}
#current-page ul li {
    display:inline;
}
#current-page ul li:first-child:before {
    content:none;
}
#current-page ul li:before {
    content:" » ";
}
#search {
    flex:1;
    justify-content:flex-end;
    display:flex;
    /* padding-right:10px; */
}
#searchbox {
    margin:0px;
    /* margin-right:3pt; */
    border:none;
}
main {
    padding:1ch 0 0;
    /* max-width:100vw; */
    /* overflow:scroll; */
    max-width:140ch;
}
/* main > * { */
/*     overflow:scroll; */
/* } */
.note,.warning,.info {
    border:2px solid #333;
    background-color:var(--info-color);
    margin:20px;
    padding:5px;
    box-shadow:0px 0px 7px var(--shadow-color); /* #333 */
    border-radius:5px;
}
.note {
    color:var(--body-color);
}
.note::before,.warning::before,.info::before {
    content:"❕ ";
    font-size:inherit; /* Adjusts the size to match the surrounding text */
    text-shadow:var(--body-color) 0px 0px 3px;
}
.warning {
    background-color:var(--warning-color);
}
.warning::before {
    content: "⚠️ ";
}
.info {
    color:var(--body-color);
    background-color:var(--info-color);
}
.info::before {
    content: "💡 ";
}
.collapsible {
    display: inline;
}
.collapsible > .collapsible-hider:checked ~ .collapsible-hidee {
    display: auto;
}
.collapsible > .collapsible-hider:not(:checked) ~ .collapsible-hidee {
    display: none;
}
.collapsible > .collapsible-hider.collapsible-hide-hider {
    display: none;
}
.collapsible > .collapsible-hider-label {
    color: var(--link-color);
}
footer {
    padding:5px;
    background-color:var(--nav-color);
    margin:50px auto;
    color:var(--text-color);
    width:60ch;
    max-width:90vw;
    border:2px solid #000;
    box-shadow:0px 0px 7px var(--shadow-color); /* #000 */
    border-radius:5px;
    display:flex;
}
footer #gototop {
    flex:1;
}
footer #validations {
    flex:1;
    display:flex;
    justify-content:flex-end;
}
.pagination {
    text-align:center;
}
.pagination .prev::before {
    content:"⯇";
}
.pagination .next::before {
    content:"⯈";
}
.mediacol {
    float:left;
}
.news_written {
    text-align:right;
    font-style:italic;
}
.project-links {
    list-style-type: none;
}
.project-links li {
    display: inline;
    padding-right: 1%;
}
.directory-table td:nth-child(1) {
    text-align:center;
}
.file-directory {
    color:#00f !important;
}
.file-directory:before {
    content: "📁 ";
}
.file-audio {
    color:#f0f !important;
}
.file-audio:before {
    content:"🎵 ";
}
.file-video {
    color:#0cc;
}
.file-video:before {
    content:"📼 ";
}
.file-archive {
    color:#f00 !important;
}
.file-archive:before {
    content:"📦 ";
}
.file-image {
    color:#0f0 !important;
}
.file-image:before {
    content:"🖼 ";
}
.file-unknown {
    color:#fff !important;
}
.file-unknown:before {
    content:"❔ ";
}
.release-page-release-art-container {
    display:flex;
    align-items: center;
    justify-content: center;
    float: right;
}
.release-page-release-art {
    display:flex;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    margin-bottom:5px;
    min-height:300px;
    max-height:55dvh;
}
#gototop {
    color:grey;
}
#gototop::before {
    content:"↑"; /* ▲⏫⏶ ▴*/
}
#rss {
    color:orange;
}
#html {
    color:#0d0;
}
#css {
    color:#44f;
}
@media screen and (max-width:690px) {
    th {
        top:0;
    }
    main {
        width:100%;
        min-width:auto;
        max-width:auto;
        padding:0;
        left:1vw;
        right:1vw;
    }
    nav {
        text-align:center;
        display:none;
    }
    nav > * {
        padding:0.5em 0;
    }
    nav hr {
        width:12%;
    }
    #navlist li {
        float:none;
    }
    h1 {
        text-align:center;
    }
    #shownav {
        display:none;
    }
    #shownav:checked ~ nav {
        display:block;
    }
    label[for=shownav] {
        display:block;
        position:fixed;
        top:1vh;
        right:1vw;
        font-size:xx-large;
        color:var(--text-color);
        z-index:1000;
    }
    #search {
        float:none;
        justify-content:center;
    }
}