/* Custom CSS */
body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #1c1c1c; /* Dark background */
}

.container {
    background-color: hwb(0 20% 79% / 0.474); /* Set container background to pure black */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); /* Shadow for depth */
}

.header .plus {
    font-size: 24px; /* Control the size of the plus sign */
}

.header .preview {
    font-size: 14px;
    color: #bbb; /* Lighter gray for preview text */
}

.footer-item {
    padding: 15px 0; /* Add more padding for footer items */
    font-size: 14px;
}

.footer-item .date {
    font-size: 12px;
    color: #666;
}

.footer-item .status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.footer-item .status.green {
    background-color: #00ff00;
}

.footer-item .status.gray {
    background-color: #777;
}

.footer-item .status.yellow {
    background-color: #ffcc00;
}

.counter {
    font-size: 12px;
    color: #aaa;
    text-align: right;
    margin-top: 5px;
}

#spinner {
    width: 15px;
    height: 15px;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: spin 1s infinite linear;
}

#logo {
    width: 150px;
    height: 60px;
    left: -30px;
}

/* #spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s infinite linear;
} */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}