body {
    font-family: 'Roboto Mono', monospace;
    background-color: #f0f0f0;
    color: #000;
}

.brutalist-window {
    border: 3px solid #000;
    background-color: #fff;
    box-shadow: 8px 8px 0 #000;
}

.form-radio {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #000;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

.form-radio:checked {
    background-color: #000;
}


textarea, select {
    background-color: #fff;
    border: 2px solid #000;
    color: #000;
    font-family: 'Roboto Mono', monospace;
    padding: 0.5rem;
    resize: vertical;
}


textarea::placeholder {
    color: #888;
}


select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.brutalist-input {
    background-color: #fff;
    border: 2px solid #000;
    color: #000;
    font-family: 'Roboto Mono', monospace;
    padding: 0.5rem;
    width: 100%;
}

.brutalist-btn {
    background: #ffff00;
    color: #000;
    border: 3px solid #000;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    box-shadow: 4px 4px 0 #000;
    transition: all 0.1s ease-in-out;
    display: inline-block;
    text-decoration: none;
}

.brutalist-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000;
}

.brutalist-btn:active {
    box-shadow: 0 0 0 #000;
    transform: translate(4px, 4px);
}

.error-msg {
    background-color: #ff5555;
    border: 2px solid #000;
    color: #fff;
    padding: 0.5rem;
    font-weight: bold;
}


.action-btn {
    padding: 0.25rem 0.5rem;
    box-shadow: 2px 2px 0 #000;
}

.action-btn:active {
    box-shadow: 0 0 0 #000;
    transform: translate(2px, 2px);
}


.delete-btn {
    background: #ff5555;
}


.download-btn {
    background: #55aaff;
    text-decoration: none;
}

.logout-btn {
    background: #c0c0c0;
    padding: 0.25rem 0.5rem;
    box-shadow: 2px 2px 0 #000;
    text-decoration: none;
}


.logout-btn:active {
    box-shadow: 0 0 0 #000;
    transform: translate(2px, 2px);
}

.modal-content {
    border: 3px solid #000;
    background-color: #fff;
    box-shadow: 8px 8px 0 #000;
}

.theme-picker {
    transition: opacity 0.3s, max-height 0.3s;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.theme-picker.visible {
    max-height: 200px; /* Adjust as needed */
    opacity: 1;
}