html, body{
    background-color: black;
    color: white;
}

.folder{
    color: blue;
    display: flex;
}
.folder > label {
    cursor: pointer;
}
.folder > label > input{
    display: none;
}
.folder > label > div:before{
    transition: transform 0.5s ease;
    display: inline-block;
    content: ">";
    padding-right: 5px;
    color: white;
}
.folder:has(> label > input:checked) > label > div:before{
    transform: rotate(90deg) translate(3px, 2px);
}

.data{
    padding-left: 10px;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease;
    margin-left: 5px;
    border-left: solid gray 2px;
}
.data > div{
    overflow: hidden
}

.folder:has(> label > input:checked) + .data{
    grid-template-rows: 1fr;
}
.file{
    cursor: pointer;
}

.data > div > div > a{
    color: white;
    text-decoration: none;
}
.data > div > div[rawType="ttf"] > a{
    color: rgb(255, 120, 120);
}
.data > div > div[rawType="php"] > a{
    color: rgb(127, 124, 255);
}
.data > div > div[type="script"] > a{
    color: rgb(255, 255, 146);
}
.data > div > div[type="html"] > a{
    color: rgb(255, 202, 141);
}
.data > div > div[type="style"] > a{
    color: rgb(146, 171, 255);
}
.data > div > div[type="image"] > a{
    color: rgb(213, 150, 255);
}
.data > div > div[type="content"] > a{
    color: rgb(255, 150, 150);
}