@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');


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


:root{
    --accent:#d0006f;
    --bg:#181828;
    --card:#23233a;
    --text:#ffffff;
    --muted:rgba(255,255,255,.65);
}


body{
    background:var(--bg);
    color:var(--text);
    font-family:'Poppins',sans-serif;
    max-width:1400px;
    margin:60px auto;
    padding:0 30px;
}


/* Apache Titel entfernen */

h1{
    display:none;
}


/* Apache Footer entfernen */

address{
    display:none;
}


/* Linien */

hr{
    display:none;
}


/* Links */

a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
    transition:.3s;
    border-bottom:2px solid transparent;
}


a:hover{
    border-color:var(--accent);
}



/* Tabelle */

table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    background:var(--card);
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}



/* Spalten */

th:first-child,
td:first-child{
    width:5%;
    text-align:center;
    padding-left:15px;
    padding-right:15px;
}


th:nth-child(2),
td:nth-child(2){
    width:55%;
}


th:nth-child(3),
td:nth-child(3){
    width:25%;
    white-space:nowrap;
}


th:nth-child(4),
td:nth-child(4){
    width:15%;
    white-space:nowrap;
}



/* Header */

th{
    background:var(--card);
    color:white;
    padding:18px 24px;

    text-align:left;

    font-size:.85rem;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.08em;
}



/* Inhalte */

td{
    padding:18px 24px;
    color:white;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


tr:last-child td{
    border-bottom:none;
}



/* Hover */

tr{
    transition:.25s;
}


tr:hover{
    background:rgba(255,255,255,.05);
}



/* Meta Spalten */

td:nth-child(3),
td:nth-child(4){

    color:var(--muted);

}



/* Icons */

img{
    width:22px;
    height:22px;

    display:block;
    margin:auto;

}



/* Apache Sort Icons */

th img{
    width:12px;
    height:12px;

    display:inline-block;
    margin-left:6px;
}



/* Parent Directory */

a[href="../"]{
    color:var(--accent);
}



/* Mobile */

@media(max-width:900px){

    body{
        margin:20px auto;
        padding:0 10px;
    }


    table{
        display:block;
        overflow-x:auto;
    }


    th,
    td{
        padding:14px 16px;
    }

}