:root {
    --primary-color: #3498db; /* Button color */
    --hover-color: #2980b9; /* Button hover color */
    --background-gradient: linear-gradient(45deg, #ff8a00, #e52e71); /* Background gradient */
    --container-bg: rgba(0, 0, 0, 0.8); /* Container background */
    --textarea-bg: #ffffff; /* Textarea background */
    --text-color: #333; /* Text color */
    --list-item-bg: #34495e; /* List item background */
    --list-item-hover-bg: #2c3e50; /* List item hover background */
    --text-color-light: #ffffff; /* Light text color */
}

body {
    font-family: 'Arial', sans-serif;
    background: var(--background-gradient);
    margin: 0;
    padding: 20px;
    color: var(--text-color-light);
}

header {
    background-image: url('/clipboardblueline.png');
    background-size: cover;
    background-position: center;
    height: 100px; /* Ensure consistent header height */
    display: flex;
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Center vertically */
    padding: 0 1rem;
}

.heading {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.heading::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 100%;
    height: 0.3rem;
    background-color: orange;
    z-index: -1;
}