@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Onest:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }

body {

    background-color: #101010;

    & header {

        padding: 15px;

        & h1 {
            color: #F9F9F9;
            transition: letter-spacing 600ms ease-in-out;
        }

        & :is(h1, a) {
            text-decoration: 1px underline #1C5BC1;
        }

        & h1:hover {
            letter-spacing: 2px;
        }

        & cite {
            font-style: normal;
        }

        & :is(small, a) {
            color: #8f8f8f;
        }

        & a:hover {
            color: #1C5BC1;
        }
    }

    & main {
        display: flex;
        flex-direction: column;
    }
}


[data-pagination="wrapper"] {

    margin: 15px auto;
    user-select: none;
    -webkit-user-select: none;

    display: flex;
    align-items: center;

    & button[type="button"] {

        margin: 5px;
        border-radius: 50%;
        background-color: transparent;
        outline: none;
        border: 1px solid #F9F9F9;
        color: #F9F9F9;
        transition: color 200ms, border-color 200ms;

        & [class="material-symbols-outlined"] {
            font-size: 2rem;
        }
    }

    & button[type="button"]:hover {
        color: #1C5BC1;
        border-color: #1C5BC1;
        cursor: pointer;
    }

    & .page {
        color: #F9F9F9;
        font-weight: bold;
        border: 1px solid #F9F9F9;
        margin: 5px;
        padding: 10px 15px;
        border-radius: 7px;
        transition: color 200ms, border-color 200ms;
    }

    & .page:hover:not(.page.active) {
        color: #1C5BC1;
        border-color: #1C5BC1;
        cursor: pointer;
    }

    & .page.active {
        color: #F9F9F9;
        background-color: #1C5BC1;
        border-color: #1C5BC1;
    }
}

[data-person="wrapper"] {

    border: 1px solid #8f8f8f;
    border-radius: 7px;
    margin: 15px auto;
    color: #F9F9F9;
    padding: 5px;
    max-width: 50%;

    & [data-person="description"] {

        color: #8f8f8f;
        font-size: 1.5rem;
        font-weight: bold;

        & small {
            font-size: .7rem;
            margin: 0;
        }
    }
}