#header {
    --base-size-unit: 1em;

    width: 100vw;
    height: calc(var(--base-size-unit)*4);
    min-height: max-content;

    background: linear-gradient(to right, #D60270, #D60270, #9B4F96, #0038A8, #0038A8);

    position: fixed;
    top: 0;

    color: white;
}

.headerItem {
    width: max-content;
    min-width: calc(var(--base-size-unit)*5);
    height: calc(100% - calc(var(--base-size-unit)/8));

    box-sizing: border-box;

    background-color: rgba(255, 255, 255, 0.5);
    border-radius: calc(var(--base-size-unit)/8);

    float: left;

    padding-top: calc(var(--base-size-unit)/4);
    padding-bottom: calc(var(--base-size-unit)/4);
    padding-left: calc(var(--base-size-unit)/2);
    padding-right: calc(var(--base-size-unit)/2);

    margin-top: calc(var(--base-size-unit)/16);
    margin-bottom: calc(var(--base-size-unit)/16);
    margin-left: calc(var(--base-size-unit)/8);
    margin-right: calc(var(--base-size-unit)/8);

    text-align: center;
    font-size: calc(var(--base-size-unit)*2);
    font-weight: bold;
}