*,
*::after,
*::before {
    box-sizing: border-box;

    font-family: sans-serif;
}

*::-webkit-scrollbar {
    width: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0;
    height: 100vh;

    backdrop-filter: grayscale(100%) blur(8px);

    &#blog-html {
        background-image: url("../media/images/maxresdefault.jpg");
    }
}

main {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 8px;

    width: 800px;
    height: 96vh;
}

/* editor (QUILL) */
#editor {
    overflow: hidden;
}

/* entries */
#entries-wrapper {
    background: whitesmoke;
    border: black 5px solid;

    overflow-y: scroll;
}

article {
    box-sizing: content-box;
    position: relative;
    padding: 20px 0;
    margin: 0 20px;

    max-height: 500px;

    border-top: grey 4px double;

    overflow-y: hidden;

    &:first-of-type {
        border-top: none;
    }
}

article .expand-toggle {
    display: none;


    &.display {
        cursor: pointer;

        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: end;

        padding-right: 10px;

        width: 100%;
        height: 20px;

        background: white;
        filter: invert(80%);

        &:hover {
            filter: invert(70%);
        }
    }
}


article.expanded {
    max-height: none;
}

/* PAGINATION */
#pagination-wrapper {
    display: flex;
    gap: 5px;
    justify-content: center;

    & > .current {
        filter: invert(80%);
    }
}