:root {
        --red: #bc0001;
        --dark-grey: #373441;
        --blue: #00027c;
        --pinkish: #f6d5d5; 
    }

    html {
        background: repeating-linear-gradient(
            0deg,
            var(--red) 0px,
            var(--red) 2px,
            transparent 2px,
            transparent 100px
        ),
        repeating-linear-gradient(
            30deg,
            var(--red) 0px,
            var(--red) 2px,
            transparent 2px,
            transparent 100px
        );
    }

    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Full viewport height */
    }

    main {
        box-sizing:border-box;
        background-color: white;
        padding: 1rem;
        border: 2px solid var(--dark-grey);
        max-width: 32rem;
        font-family: 'Verdana', sans-serif;
        max-height: 80vh;

        .main__content {
            overflow: auto;
            max-height: 25vh;
        }

        a.disabled {
        pointer-events: none;
        text-decoration: none;
        color: var(--dark-grey);
        cursor: default;
        }

        /* Posts styles and handling */

        .main__content__post {
            padding-right: 4rem;
            padding-left: 4rem;

            h2{
                text-align: center;
            }
        }

        .main__content__post, #return-button {
            font-family: monospace;
            display: none; /* Hide by default */
        }

        .main__content__post:target{
            display: block; /* Show when targeted */
        }

        /*Hide the post list when a post is targeted */
        .main__content__post:target ~ #post-list {
        display: none;
        }

        .main__content__post:target ~ #return-button {
        display: block;
        }

    }

    #navbar {
        display: flex;
        justify-content: space-around;

        width: 100%;
    }