/* Root */
:root 
{
	/* Dark mode */
	--dark-bg: #0d0d0d;
	--dark-text: #ffdab9;
	--dark-link: black;
	--dark-link-bg: #f08080;
	--dark-title: #f08080;
	--dark-quote-border: #fbc4ab;

	/* Light mode */
	--light-bg: #ffdab9;
	--light-text: #0d0d0d;
	--light-link: white;
	--light-link-bg: white;
	--light-title: white;
	--light-quote-border: white;

	/* Default mode */
	--bg-color: var(--dark-bg);
	--text-color: var(--dark-text);
	--link-color: var(--dark-link);
	--link-bg-color: var(--dark-link-bg);
	--title-color: var(--dark-title);
	--quote-border: var(--dark-quote-border);
	--switch-icon: var(--dark-switch-icon);
	--switch-text: var(--dark-switch-text);
}

/* Body */
body
{
	color: var(--text-color);
	background-color: var(--bg-color);

    margin: 2vh auto;
    max-width: 80vw;
}

/*
	HEADER
*/

/* Navbar */
nav ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;

	display: flex;
	justify-content: space-between;
}

nav a 
{
	padding: 0.1rem 1rem;
    margin: 0rem 0.3rem;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

	background-color: var(--link-bg-color);
    color: var(--link-color); 
}

nav a:hover 
{ 
    color: var(--link-bg-color);
	background-color: var(--bg-color);
	border: 1px solid var(--link-bg-color);
}

/* 
	MAIN
*/

main h1, main h2, main h3, main h4 
{
	color: var(--title-color);
}

main h1
{
	text-align: center;
	text-transform: uppercase;
}

main a 
{
	color: var(--link-bg-color);
}

/* Date for link */
main li a + p 
{
	display: inline;
	margin: 1vw;

	font-size: small;
}

/* Blockquote */
main blockquote 
{
	padding-left: 1vw;

	background-color: var(--link-bg-color);
	color: var(--link-color);
	border-left: 2px solid var(--quote-border);
}

/*
	FOOTER
*/

footer 
{
	text-align: center;
}

footer li
{
	display: inline;
}

footer li a 
{
	padding: 0.1rem 1rem;
    margin: 0rem 0.3rem;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

	background-color: var(--link-bg-color);
    color: var(--link-color); 
}