body {
    margin: 0px;

    background-color: #24242a;
    background-image: url(./background.webp);
    background-size: 50px;
}

navbar {
    display: block;
    height: 35px;
    padding: 0px 10px;
    margin-bottom: 15px;

    background-color: #2c343a;
    box-shadow: #24242a 0px 15px;
}

button {
    height: 100%;
    padding: 0px 5px;

    display: inline-flex;
    align-items: center;
    cursor: pointer;

    font-family: GalanoGrotesque;
    font-size: 16px;
    color: white;
    border: none;

    background-color: #00000000;
    transition-duration: .2s;
}

button > svg {
    height: 22px;
    padding-right: 5px;

    fill: white;
}

button:hover {
    background-color: rgba(255, 255, 255, .1);
}

page {
    display: block;
}

directory {
    margin: 0px 100px;

    display: flex;
    flex-wrap: wrap;
}

.back {
    background-image: url(./FolderBack.webp);
    mask-image: url(./FolderBack.webp);
    --type-color: #5c6b78;
}

#Guide {
    border: none;
    width: 100%;
    height: calc(100vh - 60px);
}

overlay {
    pointer-events: none;
    opacity: 0;

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .25);

    transition-duration: .2s;
}

overlay.display {
    pointer-events: inherit;
    opacity: 1;
}

overlay > block {
    position: relative;
    top: 35%;
    left: calc(50% - 250px);
    width: 500px;
}

block.button {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    transition-duration: .5s;
}

block.button:hover {
    background-color: #84476933;
    --type-color: #844769 !important;
}

block.button > img {
    margin-top: 0px;
    margin-right: 10px;
}