:root {
    --green-deep: #0F2A1D;
    --green-mid: #375534;
    --green-light: #beffc2;
    --green-lighter: #70fda3;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--green-deep);
    color: var(--green-light);
    display: grid;
    min-height: 100vh;
    max-width: 100vw;
    margin: 0;
}

body {
    display: flex;
    gap: 12px;
    min-width: 70vw;
    padding: 12px;
}

main {
    margin-inline: auto;
}

a {
    color: var(--green-lighter)
}

blockquote {
    color: var(--green-lighter);
    font-style: italic;

    &:before {
        padding-right: 5px;
        content: ">>";
    }
}

.flower {
    flex: 0 0 70px;
    /* size */
    padding: 64px 0 32px;
    /* height of flower and pot (keeps the stem aligned) */

    background-color: var(--green-light);

    mask-image: url(/assets/img/flower_pot.svg), url(/assets/img/flower_stem.svg), url(/assets/img/flower_head.svg);
    mask-position: bottom, bottom, top;
    mask-repeat: no-repeat, repeat-y, no-repeat;
    mask-origin: border-box, content-box, border-box;
    mask-clip: border-box, content-box, border-box;
}

@media screen and (max-width: 500px) {
    .flower {
        display: none;
    }
}