/*Leylijne newsletter*/
@import 'normalize.css';
@import 'cscroll.css';

body
{
    & header
    {
        font-family: var(--poller);
        background: rgb(var(--white));
        margin: 0 auto;
        padding: 60px 120px;
        max-width: 1080px;
        width: 100%;
        display: flex;
        place-items: start;
        place-content: start space-between;

        @media all and (width < 1000px)
        {
            padding: 40px 60px;
        }

        @media all and (width < 641px)
        {
            padding: 20px;
        }

        & img
        {
            height: 72px;

            @media all and (width < 641px)
            {
                height: 48px;
            }
        }

        & a
        {
            &:hover
            {
                background-color: transparent;
            }
        }
    }
    
    & article
    {
        font-family: var(--fira);
        background: rgb(var(--white));
        margin: 0 auto;
        max-width: 1080px;
        width: 100%;
        display: flex;
        place-items: start;
        place-content: center;
        flex-wrap: wrap;

        & h1,
        & h2,
        & h3,
        & h4,
        & p,
        & ul,
        & ol
        {
            width: 100%;
            max-width: 840px;
            position: relative;
            z-index: 2;

            @media all and (width < 1000px)
            {
                max-width: calc(100% - 120px);
            }

            @media all and (width < 641px)
            {
                max-width: calc(100% - 40px);
            }
        }

        & h1
        {
            margin: 0 0 40px -24px;

            @media all and (width < 1000px)
            {
                margin: 0 0 20px -20px;
            }
        }

        & h2
        {
            margin: 0 0 -60px;
            display: flex;
            place-items: start;
            place-content: start;
            flex-wrap: wrap;

            @media all and (width < 1000px)
            {
                margin: 0 0 -40px;
            }

            @media all and (width < 641px)
            {
                margin: 0 0 -20px;
            }

            & span
            {
                font-size: 48pt;
                margin: 0 0 -20px;
                width: 100%;

                @media all and (width < 1000px)
                {
                    font-size: 24pt;
                }

                @media all and (width < 641px)
                {
                    font-size: 16pt;
                    margin: 0 0 -8px;
                }
            }
        }

        & h3
        {
            margin: 0 0 30px;
        }

        & section
        {
            margin-top: 30px;
            width: 100%;
            display: flex;
            place-items: start;
            place-content: center;
            flex-wrap: wrap;
        }

        & img
        {
            margin: 0 0 40px;
            max-width: 100%;
            position: relative;
            z-index: 1;
        }

        & ul,
        & ol
        {
            margin-left: 20px;
            margin-top: 10px;

            @media all and (width < 641px)
            {
                margin-left: 0;
                max-width: calc(100% - 80px);
            }

            & li
            {
                line-height: 125%;
            }
        }

        & a
        {
            background-color: rgb(var(--darkyellow));

            &:hover
            {
                background-color: rgb(var(--yellow));
            }
        }
    }

    & footer
    {
        background: rgb(var(--white));
        padding: 20px 120px 20px;
        margin: 0 auto;
        max-width: 1080px;
        width: 100%;
        display: flex;
        place-items: start;
        place-content: start;
        flex-wrap: wrap;

        @media all and (width < 1000px)
        {
            padding: 20px 60px 20px;
        }

        @media all and (width < 641px)
        {
            padding: 20px;
        }

        & hr
        {
            border: none;
            border-top: 1px solid rgb(var(--darkgray));
            margin: 20px 0;
            width: 100%;
        }

        & img
        {
            display: block;
            height: 36px;
        }

        & a
        {
            font-weight: 700;
            text-decoration: underline;

            &:hover
            {
                background-color: rgb(var(--yellow));
            }

            &.unsubcribe
            {
                font-size: 12pt;
                margin-left: auto;
            }
        }

        & small
        {
            font-size: 12pt;
            line-height: 24px;
            display: block;

            @media all and (width < 641px)
            {
                margin: 0 0 20px;
            }
        }

        & section
        {
            display: flex;
            place-items: end;
            place-content: start space-between;
            width: 100%;

            @media all and (width < 641px)
            {
                flex-wrap: wrap;
            }
        }
    }
}