* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #1a1712;
    color: #d8cfc0;
    font-family: "Courier New", monospace;
    font-size: 2.2vmin;
}

#frame {
    max-width: 70vw;
    min-height: 100vh;
    margin: 0 auto;
    background: #221e18;
    border-left: 0.3vmin solid #6b5d45;
    border-right: 0.3vmin solid #6b5d45;
    padding: 2vmin;
}

h1 {
    text-align: center;
    color: #e8dcc0;
    background: #2e2a22;
    border: 0.2vmin solid #6b5d45;
    padding: 1.2vmin;
    text-transform: uppercase;
    letter-spacing: 0.5vmin;
    font-weight: normal;
}

h2 {
    color: #c9a86a;
    border-bottom: 0.15vmin solid #6b5d45;
    font-weight: normal;
    letter-spacing: 0.15vmin;
}

a {
    color: #c9a86a;
    text-decoration: underline;
}

a:visited {
    color: #a68a54;
}

a:hover {
    background: #c9a86a;
    color: #1a1712;
    text-decoration: none;
}

hr {
    border: none;
    border-top: 0.15vmin solid #6b5d45;
}

.box {
    border: 0.15vmin solid #6b5d45;
    background: #1f1c16;
    padding: 1.2vmin;
    margin: 1.6vmin 0;
    line-height: 1.5;
}

.counter {
    text-align: center;
    font-size: 0.6em;
    color: #6b6155;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 0.15vmin solid #6b5d45;
    padding: 0.6vmin;
}

/* folder listing */
.ls-row {
    display: flex;
    gap: 1.2vmin;
    align-items: center;
    padding: 0.4vmin 0;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 0.1vmin dotted #443c30;
}

.ls-row:hover {
    background: #2a251d;
}

.ls-date {
    color: #8a7c60;
    width: 12ch;
}

.ls-name {
    color: #d8cfc0;
}

folder-item {
    display: block;
}

/* image grid */
.images {
    font-size: 0;
    padding: 1vmin 0;
}

.images img {
    width: 25%;
    display: inline-block;
    filter: sepia(0.15);
}