:root {
	--color-white: #f5edf0;
	--color-gray: #3d3545;
	--color-darkgray: #252130;
	--color-black: #1d1b21;
	--color-red: #b5123b;

	--color-cyan: #38b0fa;
	--color-magenta: #cf2678;
	--color-yellow: #dbd053;

	--color-green: #AFE3C0;
	--color-pink: #D1235A;
	--color-quiet: #A9A7B4;
}

/* Fonts in Use */
    @font-face {
        font-family: Pixel; 
        src: url('orange\ kid.ttf');
    }
    @font-face {
        font-family: Forcedsquare; 
        src: url('FORCED\ SQUARE.ttf');
    }
    @font-face {
        font-family: conthrax; 
        src: url('conthrax-sb.otf');
    }
    @font-face {
        font-family: coolvetica; 
        src: url('coolvetica\ rg.otf');
    }
/*----------------------------------*/

body {
	background-color: var(--color-black);
	/* cursor: url("img/Cursor.png"), auto; */
	font-family: 'pixel', sans-serif;
}

::selection {
	color: var(--color-cyan);
	background: var(--color-gray);
}

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

a:hover {
	color: var(--color-pink);
}

/* MAIN PAGE INFORMATION */
    main {
        color: var(--color-white);
        font-size: 25px;
        text-align: center;
        scrollbar-width: none;
        overflow-y: auto;
        overflow-x: hidden;   
    }

    #blogMain p {
        margin: 10px;
        text-align: left;
    }

    main i {
        color: var(--color-cyan);
        text-shadow: 4px 4px var(--color-gray);
    }

    small {
        font-size: 20px;
        color: var(--color-quiet);
    }

    .container {
        text-align: center;
        align-items: center;
        margin: 20px;
    }

/* Resources Page CSS */
	#resPg p {
		text-align: left;
		align-items: left;
		justify-content: left;
	}

	#resPg ul {
		text-align: left;
	}

	#resPg li {
		margin: 15px 0;
	}

    #resPg details > summary {
        padding: 20px;
        font-family: "conthrax";
        background-color: var(--color-darkgray);
        color: var(--color-cyan)
    }

    #resPg details:open > summary {
        background-color: var(--color-magenta);
        color: var(--color-black);
    }

    .subdeet {
        width: 300px;
        margin: auto;
        position: relative;

    }

/* NAVIGATION */
    nav {
        font-size: 20px;
        text-align: center;
    }


/* FOOTER */
    footer {
        font-family: 'conthrax', monospace;
        text-align: center;
        text-shadow: 1px 1px var(--color-red);
        color: var(--color-white);
        font-size: 12px;
        padding-top: 50px;
        position: relative;
    }

    footer a {
        color: var(--color-cyan);
    }