Cream coloured cards UI for Mastodon

    :root {
        --headingbg: rgb(244, 244, 255);
        --bodybg: #fffaf5;
    }
    body {
        text-shadow: 2px 2px 6px rgb(0 0 0 / 10%);
        font-family: opendyslexic;
    }

    body.system-font {
        font-family: opendyslexic;
    }

    body.app-body.layout-single-column {
        background-color: var(--bodybg);
    }

    .status__content__text,
    .detailed-status {
        line-height: 1.5em;
    }

    @media screen and (min-width: 890px) {


        article,
        .detailed-status__wrapper,
        .status-reply.status--in-thread, .compose-panel,
        .modal-root__modal {
            margin: 3em 1em;
            border: 1px solid rgb(135, 135, 249);
            border-radius: 15px;
            box-shadow: 0px 4px 5px rgba(0, 0, 0, .14), 0px 1px 10px rgba(0, 0, 0, .12), 0px 2px 4px rgba(0, 0, 0, .2);
            overflow: hidden;
            transition: all .15s;
            background: white;;
        }

        article * {
            transition: all .15s;
        }

        article .status, .detailed-status {
            padding: 0;
        }

        article .status__action-bar,
        .status__content {
            padding: 10px 1rem;
        }

        article .status__wrapper.collapsed header {
            box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
        }

        article header,
        .detailed-status__display-name {
            background: rgb(244, 244, 255);
            margin: 0;
            padding: 10px 14px;
        }

        article aside {
            width: 100%;
            background: rgb(244, 244, 255);
        }

        .compose-panel {
            background: transparent;
            padding: 1rem;
            margin-top: 100px;
        }

        .compose-panel textarea {
            max-height: 25vh;
        }

        .search {
            margin-bottom: 32px;
            position: absolute;
            top: .25rem;
            left: 0;
        }

        .columns-area__panels__pane__inner {
            width: unset;
            height: unset;
        }

        .tabs-bar__wrapper {
            background-color: var(--bodybg);
        }

        .column-header {
            border: 0;
        }

        .detailed-status__wrapper {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
        }

        .detailed-status__meta__line {
            padding: 8px 1rem;
        }

        .status-reply.status--in-thread {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
            margin-top:0;
        }

        .status-reply.status--in-thread.status--first-in-thread {
            border-radius: 15px;
          border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
            margin-top: 1rem;
        }

        #tabs-bar__portal {
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            background-color: var(--headingbg);

            animation-name: scroll-shadow;
            animation-duration: 1ms;
            animation-direction: alternate;
            animation-timeline: scroll(block root);
        }

        .column>.scrollable {
                border: none;
        }

        .status__content.status__content--with-action {
            width: unset;
        }

        .boost-modal__container {
            overflow: auto;
        }

        .modal-root__modal {
           box-shadow: 0px 4px 50px rgba(0, 0, 0, .5), 0px 1px 50px rgba(0, 0, 0, .4), 0px 2px 54px rgba(0, 0, 0, .5);
             animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

    }

    @keyframes scroll-shadow {
        0% {
            border-radius: 15px;
            border: 1px solid rgba(135, 135, 249,1);
            box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0);
        }
        1% {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border: 1px solid rgba(135, 135, 249,0);
            box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
        }
        99% {
            box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
        }
        100% {
            box-shadow: 0px 8px 3px 0px rgba(0, 0, 0, 0.5);
        }
    }

    @keyframes fade {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }



    .graze-toot-container.site h2,
    .graze-toot-container.site h1,
    .graze-toot-container.site  {
        color: black;
    }