/*
Baillie Stang
2023
*/

:root
{
--black:#121212;
--color1:#21a300;
--color2:#9524ff;
--color3:#c1c4c7;
--color4:#ff00dc;
--dark:#666;
--lessDark:#282828;
--white:#fff;
--git:#6e5494;
--twit:#fff;
}

*
{
border:none;
margin:0;
padding:0
}

body
{
background-color:var(--black);
color:var(--white);
font-family:monospace;
margin:8px;
text-align:center;
}

pre
{
white-space:pre-wrap;
margin-left:15px;
margin-bottom:15px;	
}

#wrapper
{
display:flex;
flex-direction:column;
max-width:600px;
text-align:left
}

#content
{
display:flex;
flex-direction:column;
margin-top:20px
}

#content p
{
margin-bottom:15px
}

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

a:hover
{
color:var(--color2);
font-weight:bold;
}

.accent
{
color:var(--color3)
}

.code
{
background-color:var(--lessDark);
color:var(--color4);
padding:5px;
border-radius:3px;
	
}

.bold
{
font-weight:bold;
}

.dark
{
color:var(--dark);
}

ul#header
{
color:#fff;
}

ul li
{
color:#fff;
display:block;
list-style-type:none;
overflow:hidden;
padding:10px;
transition:.3s;
}

ul li:hover
{
background-color:var(--white);
}

ul li .date
{
text-align:center;
width:120px;
}

ul li .size
{
text-align:right;
width:90px;
}

ul li .date,ul li .size
{
color:var(--dark);
display:block;
float:right;
font-size:12px;
}

ul#header li
{
border-bottom:1px solid #ccc;
color:#fff;
font-size:11px;
}

ul#header li:hover
{
background-color:transparent;
}

ul#header li *
{
color:var(--dark);
font-size:11px;
}

ul#header li a:hover
{
color:var(--dark);
}

ul#header li .asc span,ul#header li .desc span
{
background-position:right center;
background-repeat:no-repeat;
color:var(--white);
}

ul li.item
{
border-top:1px solid var(--white)
}

ul li.item:first-child
{
border-top:none;
}

ul li.item .name
{
font-weight:bold;
}

ul li.item .directory,ul li.item .file
{
background-position:left center;
background-repeat:no-repeat;
padding-left:20px
}

#navspan
{
display:flex;
flex-wrap:wrap;
justify-content:space-between
}

a.navlink
{
font-weight:bold;
margin:0 0 0 0;
}

a.git
{
color:var(--git);
}

a.twit
{
color:var(--twit);
}

input
{
background-color:var(--black);
border:1px solid var(--color1);
color-scheme:only dark;
margin:8px 0 0;
padding:4px
}

input:focus{
border:1px solid var(--color2);
}

button
{
background-color:var(--black);
color:var(--color1);
color-scheme:only dark;
cursor:pointer;
font-family:monospace
}

button:hover
{
color:var(--color2)
}