* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #000000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    image-rendering: pixelated;
    font-size: 2.2vmin;
}

#frame {
    max-width: 70vw;
    min-height: 100vh;
    margin: 0 auto;
    background: #000033;
    border-left: 0.4vmin double #00ff00;
    border-right: 0.4vmin double #00ff00;
    padding: 1.6vmin;
}

h1 {
    text-align: center;
    color: #ffff00;
    background: #aa0000;
    border: 0.4vmin outset #ff5555;
    padding: 0.8vmin;
    text-transform: uppercase;
    letter-spacing: 0.4vmin;
}

h2 {
    color: #00ffff;
    border-bottom: 0.3vmin dashed #00ffff;
}

a {
    color: #ff00ff;
}

a:visited {
    color: #8800ff;
}

a:hover {
    background: #ffff00;
    color: #000000;
}

hr {
    border: none;
    border-top: 0.3vmin dotted #00ff00;
}

.box {
    border: 0.3vmin ridge #888888;
    background: #111111;
    padding: 1vmin;
    margin: 1.6vmin 0;
}

.blink {
    animation: blink 0.8s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

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

marquee {
    color: #ff5555;
}

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

td,
th {
    border: 0.2vmin solid #00ff00;
    padding: 0.6vmin;
}

/* ls -lh style folder listing */
.ls-row {
    display: flex;
    gap: 1.2vmin;
    align-items: center;
    padding: 0.3vmin 0;
    cursor: pointer;
    white-space: nowrap;
}

.ls-perm {
    color: #666666;
    width: 12ch;
}

.ls-date {
    color: #00ffff;
    width: 12ch;
}

.ls-name {
    color: #00ff00;
}


folder-item {
    display: block;
}

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

.images img {
    width: 25%;
    display: inline-block;
}