:root {
    --index-primary-bgc: #0a0908; /* black */
    --index-alt-bgc: #191919; /* gunmetal */
    --index-primary-font: #f8f9fa; /* white */
    --index-primary-header: #1E90FF; /* dodger blue */
    --index-primary-header-hover: #b4cee7; /* grey blue */
    --index-alt-font: #ffff3f; /* highlighter yellow */
    --index-alt-font-hover: #fafac1; /* grey yellow */
    --index-primary-borders: #720026; /* dark red */
    --outline:  #71706e; /* dark silver */

    --prex-primary-bgc: #212529;
}

body {
    background: linear-gradient(135deg, #00000055 25%, transparent 25%) -40px 0/ 80px 80px, linear-gradient(225deg, #000000 25%, transparent 25%) -40px 0/ 80px 80px, linear-gradient(315deg, #00000055 25%, transparent 25%) 0px 0/ 80px 80px, linear-gradient(45deg, #000000 25%, #191919 25%) 0px 0/ 80px 80px;
    text-align: center;
    font-family: "Raleway", sans-serif;
    font-size: 24px;
    color: var(--index-primary-font);

    header {
    
    h1, a{
            color: var(--index-primary-header);
            text-decoration: none;
            font-size: 48px;

            &:hover {
                color: var(--index-primary-header-hover);
            }
        }

    p {
            color: #9f86c0;
        }
    }

    main {
        text-align: left;
        padding-left: 25%;
        padding-right: 25%;

        @media (max-width: 768px) {
            padding: 0;
        }
    }

    fieldset {
        border: none;
        padding: 0;
        margin: 0;
        label {
            font-size: 24px;
        }
    }
}