html {
    font-family: var(--default-font-family);
    box-sizing: border-box;
    background-color: var(--footer-white);
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
    margin: 0;
}

/* default */
body {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
    .main-container {
        background-color: var(--white);

        li::marker {
            color: var(--chill);
        }
    }
}


header {
    background-image: url("../img/background_grain_opt.png");
}

#header-container {
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top-bar {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--default-pad);
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: space-between;
        
        a, details {
            display: flex;
            align-items: center;
            
            padding: 0 8px;
            
            background: none;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        a:hover, details:hover {
            border-color: rgba(255, 255, 255, 0.4);
        }
        
        a:active, details:active {
            border-color: white;
        }
        
        a.active {
            border-color: white;
        }
        
        details {
            position: relative;
            
            > summary {
                list-style: none;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                cursor: pointer;
            }
            
            > summary::marker {
                display: none;
            }
            
            nav {
                position: absolute;
                top: 100%;
                right: 0;
                
                margin-top: 14px;
                min-width: max-content;
                
                ul {
                    background-image: url(../img/background_grain_opt.png);
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }
            }

        }        
        .top-right {
            margin-left: var(--default-pad);
            display: flex;
            flex-flow: row-reverse wrap;
            gap: calc(var(--menu-height) / 4);
            > a, > details {
                height: var(--menu-height);
            }
            .initial-zoomed {
                color: var(--zoomed-color);
                font-size: var(--font-size-regular-no-zoom);
            }
            
            .initial-unzoomed {
                color: var(--unzoomed-color);
                font-size: calc(var(--font-size-regular-no-zoom) * var(--zoomed-font-zoom));
            }
        }
        
        .top-left {
            padding: var(--home-button-vertical-pad) var(--home-button-horizontal-pad);
            p {
                font-size: var(--font-size-big);
                line-height: var(--font-size-big);
                margin: 0;
                font-weight: 900;
                display: var(--home-button-text-display);
            }
            img {
                height: 19px;
                margin: 0 var( --home-button-text-margin) 0 0;
            }
        }

    }
    
    .header-title {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: var(--header-title-top-padding) var(--default-pad) var(--header-title-bottom-padding) var(--default-pad); 
        h1 p {
            font-size: var(--font-size-small);
            line-height: var(--line-height-small);
            opacity: 0.5;
            font-style: italic;
            font-weight: normal;
        }
        svg {
            height: 36px;
            width: 36px;
            fill: var(--happy);
            stroke: var(--happy);
            stroke-width: 0px;
        }
    }

    hr {
        background-color: var(--happy);
    }


}

main {
    flex: 1;
    padding: var(--default-pad);
    margin: 0 auto;

    img {
        width: 100%;
        display: block;
        height: auto;
        border-radius: var(--normal-radius);
        box-shadow: var(--shadow);
    }
}

footer {
    padding: var(--default-pad);
    width: 100%;
    max-width: 1400px;
    margin: var(--default-pad) auto 0 auto;
    display: flex;
    flex-direction: var(--footer-flex-direction);
    align-items: var(--footer-flex-align);
    gap: var(--default-pad);
    nav {
        order: 1;
        width: 100%;
        ul {
            list-style-type: none;
            display: flex;
            flex-direction: var(--footer-flex-direction);
            padding: 0;
            gap: var(--footer-flex-gap);
        }
        ul:last-child {
            a {
                color: var(--grey);
                font-size: var(--font-size-small);
                line-height: var(--line-height-small);
            }
        }
    }
    > div {
        white-space: nowrap;
        display: flex;
        align-items: center;
        color: var(--grey);
        order: 3;
    }
    > a {
        img {
            height: 65px;
        }
        order: var(--footer-logo-order);
    }
}

a {
    text-decoration: none;
    color: inherit;
}

hr {
    width: 29px;
    height: 6px;
    border: none;
    margin: 64px auto;
    margin-top: 48px;
    margin-bottom: var(--default-pad);
    background-color: var(--relax);
}

svg {
    fill: var(--white);
    stroke: var(--white);
    stroke-width: 0px;
}

.columns-3 {
    display: grid;
    column-gap: var(--gutterwidth);
    row-gap: var(--gutterwidth);
    grid-template-columns: repeat(min(var(--max-columns),3), 1fr);
}

.columns-2 {
    display: grid;
    column-gap: var(--gutterwidth);
    row-gap: var(--gutterwidth);
    grid-template-columns: repeat(min(var(--max-columns),2), 1fr);
}

.text-container {
    max-width: 768px;
    a {
        text-decoration: underline;
        color: var(--relax);
    }
}


h1 {
    font-size: var(--font-size-jumbo);
    line-height: var(--line-height-jumbo);
    white-space: nowrap;
}

h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}

h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
}

h1,
h2,
h3,
h4,
h5,
h6,
.jumbo {
  font-weight: 900;
  margin-bottom: var(--line-height-regular);
}

h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child),
.jumbo:not(:first-child) {
  margin-top: var(--line-height-regular);
}

mark {
    background: none;
}

mark.green {
    color: var(--peace);
}

mark.orange {
    color: var(--stress);
}

mark.red {
    color: var(--pain);
}

mark.gray {
    color: var(--fun);
}



.dels-text {
    p {
        margin-bottom: var(--line-height-regular);
    }

    a {
        color: var(--relax);
        text-decoration: underline;
        border-bottom: none;
    }

    li {
        margin-bottom: var(--dels-li-bottom-margin);
        padding-left: 8px;
    }
}