@font-face {
    font-family: TanMeringue;
    src: url(./fonts/tan_meringue.woff2);
}

:root {
    --light-color: #F7F6F0;
    --primary-color: #9BADB8;
    --accent-color-light: #D0D7AB;
    --accent-color-dark: #838867;

    --middle-col-width: 100vw;
    --side-col-width: 0;
    --lily-max-width: calc(var(--middle-col-width) * 0.25);
    --lily-pos: absolute;
    --lily-pos-value: 16px;
    --lily-top-value: 16px; /* better value here? */
    --lily-opacity: 30%;

    --header-font-size: clamp(1.75rem, 4vw + 1rem, 3.2rem);
    --header-ampersand-margin: clamp(1.75rem, 4vw + 1rem, 3.2rem);
}

@media (min-width: 768px) {
    :root {
        --middle-col-width: 64vw;
        --side-col-width: calc((100vw - var(--middle-col-width)) / 2);
        --lily-max-width: calc(var(--side-col-width) * 0.9);
        --lily-pos: static;
        --lily-pos-value: auto;
        --lily-top-value: auto;
        --lily-opacity: 100%;
    }
}

* {
    font-family: Verdana, sans-serif;
}

body {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.fancy-font {
    font-family: TanMeringue, Verdana, sans-serif;
    font-weight: 100;
    font-size: var(--header-font-size);
}

.side-col {
    background-color: var(--light-color);
    color: var(--primary-color);
    width: var(--side-col-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-col {
    justify-content: start;
}

.right-col {
    justify-content: end;
}

.middle-col {
    background-color: var(--primary-color);
    color: var(--light-color);
    width: var(--middle-col-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.middle-col-header {
    width: var(--middle-col-width);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.middle-col-header > * {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.middle-col-header-left {
    flex: 1;
    justify-content: end !important;
    align-items: center;
}

.middle-col-header-right {
    flex: 1;
    justify-content: start !important;
    align-items: center;
}

.middle-col-header-center {
    flex: 0;
    margin-left: var(--header-ampersand-margin);
    margin-right: var(--header-ampersand-margin);
    justify-content: center;
    align-items: center;
}

.middle-col > img.divider {
    width: var(--middle-col-width);
    height: auto;
}

.lily {
    width: var(--lily-max-width);
    height: auto;
    position: var(--lily-pos);
    left: auto;
    top: auto;
    right: var(--lily-pos-value);
    bottom: var(--lily-pos-value);
    opacity: var(--lily-opacity);
}

.lily.lily-upside-down {
    transform: rotate(180deg);
    left: var(--lily-pos-value);
    top: var(--lily-top-value);
    right: auto;
    bottom: auto;
}