:root {
    --theme-bg: rgb(74,74,74);
    --theme-fg: rgb(219,219,219);

    --theme-accent: rgb(160,128,123);

    --flower-margin: 10px;
}

@media (min-width: 768px) {
    :root {
        --flower-margin: 75px;
    }
}

html {
    background-color: var(--theme-bg);
    color: var(--theme-fg);
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    font-size: 18pt;
}

body {
    min-height: 100dvh;
    margin: 0;

    scrollbar-gutter: stable;
    background-image: url(assets/handmadepaper.png);
    /*background-blend-mode: overlay;*/

    display: flex;

    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.layout {
    /*min-height: 100dvh;*/

    /*
    display: grid;
    grid-template-columns: 30dvw 20dvw 20dvw 30dvw;
    grid-template-rows: repeat(4, 25dvh);

    grid-template-areas: 
    "floral-l . . ."
    ". text-left text-right floral-r "
    ". text-left text-right ."
    ". . . floral-b";
    */
}

.text-left {
    grid-area: text-left;
}
.text-right {
    grid-area: text-right;
}

.floral-r {
    /*grid-area: floral-r;*/
    top: var(--flower-margin);
    right: var(--flower-margin);

    display: none !important;
}
.floral-l{
    top: var(--flower-margin);
    left: var(--flower-margin);
}
.floral-l > img{
    transform-origin: top left;
}
.floral-b{
    bottom: var(--flower-margin);
    right: var(--flower-margin);
}
.floral-b > img{
    transform-origin: bottom right;
}

.floral > img {
    transform: scale(0.65);
    pointer-events: none;
}
.floral {
    display: block;
    
    position: absolute;
}



@media (min-width: 768px) {

    body {
        min-height: 100dvh;
        
        flex-direction: row;
    }
}

/* --- BUTTONS --- */

a.button {
    background-color: var(--theme-accent);
    color: var(--theme-fg);
    text-decoration: none;
    cursor: pointer;

    padding: 5px;
    border-radius: 5px;
}

a.button svg {
    fill: var(--theme-fg);
}