html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #f4f6f8;
    color: #263238;
    font-family: Arial, Helvetica, sans-serif;
    padding: 30px;
}

/* ===== Заголовок ===== */

h1 {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 20px 24px;
    background: #263238;
    color: white;
    border-radius: 10px;
    font-size: 28px;
    font-weight: 500;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}

/* ===== Роздільник ===== */

hr {
    max-width: 1200px;
    margin: 0 auto;
    border: 0;
    border-top: 1px solid #ddd;
}

/* ===== Список файлів ===== */

pre {
    max-width: 1150px;
    margin: 0 auto;
    padding: 10px 24px 22px;

    background: white;
    border-radius: 0 0 10px 10px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);

    font-family: "DejaVu Sans Mono", "Courier New", monospace;
    font-size: 15px;
    line-height: 1.8;

    overflow-x: auto;
}

/* ===== Посилання ===== */

pre a {
    color: #1976d2;
    text-decoration: none;
}

pre a:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* ===== Іконки ===== */

pre a::before {
    content: "📄";

    display: inline-block;
    width: 30px;
    margin-right: 4px;

    font-size: 20px;
    vertical-align: -2px;
}

/* Папки */

pre a[href$="/"]::before {
    content: "📁";
}

/* Назад */

pre a[href="../"]::before {
    content: "↩️";
}

/* ===== Архіви ===== */

pre a[href$=".zip" i]::before,
pre a[href$=".rar" i]::before,
pre a[href$=".7z" i]::before,
pre a[href$=".tar" i]::before,
pre a[href$=".gz" i]::before,
pre a[href$=".bz2" i]::before {
    content: "📦";
}

/* ===== PDF ===== */

pre a[href$=".pdf" i]::before {
    content: "📕";
}

/* ===== TXT / LOG ===== */

pre a[href$=".txt" i]::before,
pre a[href$=".log" i]::before {
    content: "📃";
}

/* ===== Word ===== */

pre a[href$=".doc" i]::before,
pre a[href$=".docx" i]::before {
    content: "📝";
}

/* ===== Excel ===== */

pre a[href$=".xls" i]::before,
pre a[href$=".xlsx" i]::before {
    content: "📊";
}

/* ===== PowerPoint ===== */

pre a[href$=".ppt" i]::before,
pre a[href$=".pptx" i]::before {
    content: "📈";
}

/* ===== Зображення ===== */

pre a[href$=".jpg" i]::before,
pre a[href$=".jpeg" i]::before,
pre a[href$=".png" i]::before,
pre a[href$=".gif" i]::before,
pre a[href$=".webp" i]::before,
pre a[href$=".bmp" i]::before,
pre a[href$=".svg" i]::before,
pre a[href$=".ico" i]::before {
    content: "🖼️";
}

/* ===== Відео ===== */

pre a[href$=".mp4" i]::before,
pre a[href$=".mkv" i]::before,
pre a[href$=".avi" i]::before,
pre a[href$=".mov" i]::before,
pre a[href$=".wmv" i]::before,
pre a[href$=".webm" i]::before {
    content: "🎬";
}

/* ===== Музика ===== */

pre a[href$=".mp3" i]::before,
pre a[href$=".wav" i]::before,
pre a[href$=".flac" i]::before,
pre a[href$=".ogg" i]::before,
pre a[href$=".m4a" i]::before {
    content: "🎵";
}

/* ===== EXE / MSI ===== */

pre a[href$=".exe" i]::before,
pre a[href$=".msi" i]::before {
    content: "⚙️";
}

/* ===== ISO / IMG ===== */

pre a[href$=".iso" i]::before,
pre a[href$=".img" i]::before {
    content: "💿";
}

/* ===== APK ===== */

pre a[href$=".apk" i]::before {
    content: "📱";
}

/* ===== HTML ===== */

pre a[href$=".html" i]::before,
pre a[href$=".htm" i]::before {
    content: "🌐";
}

/* ===== CSS ===== */

pre a[href$=".css" i]::before {
    content: "🎨";
}

/* ===== JavaScript ===== */

pre a[href$=".js" i]::before {
    content: "📜";
}

/* ===== Linux ===== */

pre a[href$=".deb" i]::before,
pre a[href$=".rpm" i]::before {
    content: "🐧";
}

/* ===== Диски / образи ===== */

pre a[href$=".vhd" i]::before,
pre a[href$=".vhdx" i]::before,
pre a[href$=".qcow2" i]::before {
    content: "💽";
}

/* ===== Мобільні ===== */

@media (max-width: 700px) {

    body {
        padding: 10px;
    }

    h1 {
        font-size: 23px;
        padding: 16px;
    }

    pre {
        padding: 10px;
        font-size: 14px;
        line-height: 1.7;
    }

    pre a::before {
        width: 28px;
        font-size: 19px;
    }
}