@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #008080; /* Windows 95 teal */
    font-family: 'VT323', monospace;
    overflow: hidden;
}

.defrag-container {
    width: 80vw;
    height: 70vh;
    margin: 5vh auto;
    background: #fff;
    border: 4px solid #dfdfdf;
    border-right-color: #000;
    border-bottom-color: #000;
    box-shadow: inset 4px 4px 0 #000, inset -4px -4px 0 #dfdfdf;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    gap: 2px;
}

.block {
    width: 20px;
    height: 30px;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.empty { background: #fff; }
.unoptimized { background: #0000ff; border-color: #ccc; }
.optimized { background: #ff0000; border-color: #000; }
.active { background: #00ff00; }
.bad { background: #ffff00; }

.ui-panel {
    width: 80vw;
    margin: 0 auto;
    background: #c0c0c0;
    border: 4px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    padding: 10px 20px;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}