:root {
	--bg-color: #eff1f5;
	--fg-color: #4c4f69;
	--accent: #1e66f5;
	--outline: #d20f39;
	--bg-color2: #bcc0cc;

	--dbg-color: #24273a;
	--dfg-color: #cad3f5;
	--daccent: #8aadf4;
	--doutline: #ed8796;
	--dbg-color2: #494d64;
}

@media (prefers-color-scheme:light) {
	html, body {
		width: 95%;
	    margin: auto;
	    background-color: var(--bg-color);
	    color: var(--fg-color);
	}
	a {
		color: var(--accent);
	}

    a:hover {
	    text-decoration: underline 2px var(--accent);
    }

    header {
	    border-bottom: solid 2px var(--accent);
	    padding-bottom: 10px;
	    text-align: center;
    }

    main {
	    padding-bottom: 10px;
    }

    footer {
	    border-top: solid 2px var(--accent);
	    padding-top: 10px;
	    text-align: center;
	    margin: auto;
    }

    .footer-separator {
		width: 75%;
		border-color: var(--accent);
		background-color: var(--accent);
	}

    nav {
	    margin-bottom: 10px;
    }

    nav span {
	    text-align: center;
	    margin: auto;
	    text-decoration: none;
	    color: var(--fg-color);
	    border: solid 2px var(--accent);
	    padding: 5px;
	    border-radius: 10px
	}

    nav span a {
	    text-decoration: none;
    }

    nav span a:hover {
	    text-decoration: underline 2px var(--accent);
    }

    .front-matter {
        background-color: var(--bg-color2);
        border-radius: 15px;
        padding: 10px;
    }


    .post-tags {
        padding: 10px;
    }
    
	.post-tags a {
        padding: 5px;
    }


    blockquote {
	    border-left: solid 2px var(--accent);
	    padding-left: 5px;
    }

	aside {
		width: 85%;
		border: solid var(--accent) 1px;
		border-radius: 10px;
		padding: 10px;
		margin: auto;
	}

	#avatar,img {
		width: 50%;
		margin: auto;
		text-align: center;
		padding: 10px;
	}
	#avatar img {
		border: solid var(--outline) 2px;
		border-radius: 100%;
	}
	button {
		background-color: var(--accent);
		color: var(--dfg-color);
		padding: 10px;
		border-radius: 10px;
		font-size: 100%;
	}
}

@media (prefers-color-scheme:dark) {
	html, body {
		width: 95%;
		margin: auto;
		background-color: var(--dbg-color);
		color: var(--dfg-color);
	}
	a {
		color: var(--daccent);
	}

	a:hover {
		text-decoration: underline 2px var(--daccent);
	}

	header {
		border-bottom: solid 2px var(--daccent);
		padding-bottom: 10px;
		text-align: center;
	}

	main {
		padding-bottom: 10px;
	}

	footer {
		border-top: solid 2px var(--daccent);
		padding-top: 10px;
		text-align: center;
		margin: auto;
	}

	.footer-separator {
		width: 75%;
		border-color: var(--accent);
		background-color: var(--accent);
	}

	nav {
		margin-bottom: 10px;
	}

	nav span {
		text-align: center;
		margin: auto;
		text-decoration: none;
		color: var(--dfg-color);
		border: solid 2px var(--daccent);
		padding: 5px;
		border-radius: 10px
	}

	nav span a {
		text-decoration: none;
	}

	nav span a:hover {
		text-decoration: underline 2px var(--daccent);
	}

	.front-matter {
        background-color: var(--dbg-color2);
        border-radius: 15px;
        padding: 10px;
    }

    .post-tags {
        padding: 10px;
    }
    .post-tags a {
        padding: 5px;
    }

	blockquote {
		border-left: solid 2px var(--daccent);
		padding-left: 5px;
	}

	aside {
		width: 85%;
		border: solid var(--daccent) 1px;
		border-radius: 10px;
		padding: 10px;
		margin: auto;
	}

	#avatar,img {
		width: 50%;
		margin: auto;
		text-align: center;
		padding: 10px;
	}
	#avatar img {
		border: solid var(--outline) 2px;
		border-radius: 100%;
	}
	button {
		background-color: var(--daccent);
		color: var(--fg-color);
		padding: 10px;
		border-radius: 10px;
	}
}