* { margin: 0; padding: 0; border: none; } body { text-align: center; font-family: monospace; font-size: 16px; color: #ffffff; background-color: #212121; } body#left { text-align: left; } h1 { font-size: 20px; padding: 0 10px; text-align: center; margin: 5px 5 5; background-color: #363636; position: sticky; top: 0; font-weight: bold; } h2 { font-size: 16px; padding: 0 10px; margin: 10px 0 0; color: #ccccff; font-weight: normal; } a { color: #89bfff; text-decoration: none; } a:hover { color: #89bfff; text-decoration: underline; } ul li { display: block; list-style-type: none; overflow: hidden; padding: 10px; } ul li:hover { background-color: #222222; } ul li .date, ul li .size { font-size: 16px; display: block; color: #ccccff; } ul#header li { font-size: 16px; font-weight: bold; border-bottom: 1px solid #cccccc; } ul#header li:hover { background-color: transparent; } ul#header li * { color: #777777; font-size: 16px; } ul#header li a:hover { color: #ffffff; } ul#header li .asc span, ul#header li .desc span { padding-right: 15px; background-position: right center; background-repeat: no-repeat; color: #ffffff; } ul#header li .asc span { background-image: url('?i=asc'); } ul#header li .desc span { background-image: url('?i=desc'); } ul li.item { border-top: 1px solid #f3f3f3; } ul li.item:first-child { border-top: none; } ul li.item .name { font-weight: bold; } ul li.item .directory, ul li.item .file { padding-left: 20px; background-position: left center; background-repeat: no-repeat; } ul li.item .directory { background-image: url('?i=directory'); } ul li.item .file { background-image: url('?i=file'); } #footer { color: #cccccc; font-size: 20px; margin-top: 40px; margin-bottom: 20px; padding: 0 30px; text-align: center; } #links { color: #89bfff; font-weight: bold; text-decoration: none; transition: 0.1s; text-align: center; } #footer a:hover { color: #ccccff; }