.header {
    display: flex;
    align-items: center;
    padding: var(--spacing-unit) var(--spacing-unit);
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.header img.logo {
    height: 40px;
    margin-right: var(--spacing-unit);
}

.main-content {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}

.footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: var(--spacing-unit);
    text-align: center;
}

h1 {
    color: var(--primary-color);
    font-size: 28px;
    margin-bottom: 20px;
}