body, ul, li, h1, h2, h3 { /* removes default browser css */
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                display: flex;
                flex-direction: column;
                background-color: #000000;
                font-family: monospace;
                font-weight: 500;
            }

            /* COMPONENTS */
            .text {
                color: #202a44;
                font-size: 20px;
            }

            .content {
                display: flex;
                flex-direction: column;
                overflow-y: scroll;
                align-items: center;
            }

            /* HEADERS */
            .site-header { 
                color: #faf8e5;  
                border-radius: 10px;
                text-align: center;
                padding: 10px;
                margin: auto;
            }

            /* NAVIGATION COMPONENTS */
            .top-nav-button {
                display: flex;
                flex-direction: row;
                justify-content: center;
                background-color: transparent;
                text-decoration: none;
                font-size: 20px;
                color: #faf8e5;
                padding: 5px; 
                cursor: pointer;
            }

            .top-nav-button:hover {
                color: #a12d47;
            }

            /* NAVIGATION */ 
            .top-nav {
                display: flex;
                justify-content: center;
                border-radius: 10px;
                width: 90%;
                padding: 5px;
                margin: auto;
            }
            
            /* LAYOUT */
            .middle {
                display: flex;
                justify-content: center;
            }