* {
    margin: 0;
    padding: 0;
}

:root {
    color-scheme: dark;
    font-family: 'Consolas', monospace;

    --footer-link-color: #999;
    --footer-link-color-hover: #fff;
    --footer-link-icon-color: #999;
    --footer-link-icon-color-hover: #fff;

    --color-yellow: #d6b914;
    --color-yellow-hover: #f0d618;
    --color-green: #7ee787;
    --color-blue: #58a6ff;
    --color-purple: #b458ff;
    --color-cyan: #78d9ec;
    --color-red: #e24141;

    --color-light-gray: #747d88;

    --logs-background-color: #161b22;
    --logs-border-color: #30363d;
    --logs-shadow: 0 8px 30px #0000004d;

    --logs-color: #747d88;
    --logs-font-size: 14px;
    --logs-line-height: 1.8;

    --logs-border-bottom: 1px solid #ffffff1a;
}

body {
    padding: 20px;
}

footer {
    padding-block: 50px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;

    ul.example-links {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;

        @media (width <=700px) {
            flex-direction: column;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: var(--footer-link-color);
            font-size: 12pt;
            letter-spacing: 2px;

            display: flex;
            align-items: center;
            gap: 10px;
        }

        a:hover {
            color: var(--footer-link-color-hover);
        }

        a::before {

            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;

            mask-size: cover;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/book.svg");

            background-color: var(--footer-link-icon-color);
        }

        a:hover::before {
            background-color: var(--footer-link-icon-color-hover);
        }

        a[href^="https://github.com/"]::before {
            mask-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/github.svg");
        }

        a[href^="https://codepen.io/"]::before {
            mask-image: url("https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/code-slash.svg");
        }
    }

    p.author {
        text-align: center;
        font-size: 12pt;
        letter-spacing: 2px;
        color: var(--footer-link-color);

        a {
            color: var(--color-yellow);
            text-decoration: none;

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