*, html {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			text-transform: lowercase;
		}

		heart::before{
			content: "♥";
			color: var(--accent);
		}

		h1 {
			margin: 0 auto 0.5em;
			font-size: 2.4em;
		}
		h2 { color: var(--accent-dark); 
		font: bold 2em'Inconsolata';}
		summary { color: var(--accent); }
		details[open] {
			padding-bottom: 3em;
			border-bottom: var(--border-size) var(--border-style) rgb(240, 142, 72);
			margin-bottom: 2em;
		}
		main, #resources, footer {
			padding: 1em;
			width: 60em;
			margin: 0 auto;
		}
		summary:hover, details[open] > summary { color: rgb(210, 84, 30); }
		em { color: rgb(233, 102, 46); }
		#toc { padding: 0 1em; }
		#resources .category:first-child { margin-top: 0; }
		#resources .category {
			margin: 5em 0;
			padding: 2.5em;
			border: 2px solid var(--accent);
			border-radius: 20px;
		}

		h2{
			margin-bottom: 1em;
		}
		#start {
			margin-top: 10em !important;
			margin-bottom: 10em !important;
		}
		#start h2 {
			color: rgb(240, 142, 72);
		}
		footer {
			padding: 1em;
			text-align: center;
		}
		totop {
			display: block;
			position: fixed;
			bottom: 0;
			right: 0;
			background: var(--light-background);
			padding: 1em;
			border-top-left-radius: 30px;
			border-top: 2px solid var(--accent);
			border-left: 2px solid var(--accent);
		}
		#theme-toggle {
			background: #fff;
			border: 2px solid rgb(240, 142, 72);
			cursor: pointer;
			font: inherit;
			padding: 10px;
			color: var(--accent);
			border-radius: 10px;
		}
		#theme-toggle:hover {
			background: var(--accent-light)!important;
			color: var(--accent-dark);
		}

		.user-dark body, .user-dark #blurb, .user-dark #toc, .user-dark #resources, .user-dark main, .user-dark div {
			background: #23272a !important;
			color: #e0e0e0 !important;
		}
		.user-dark main, .user-dark #resources, .user-dark footer {
			border-left: var(--border-size) var(--border-style) #23272a;
			border-right: var(--border-size) var(--border-style) #23272a;
		}
		.user-dark body { background: var(--dark-background) !important; }
		.user-dark a { color: var(--accent); }
		.user-dark a:hover, .user-dark a:focus, .user-dark a:active { color: rgb(240, 142, 72); box-shadow: none;}
		.user-dark summary:hover, .user-dark details[open] > summary { color: rgb(232, 95, 31) !important; }
		.user-dark footer { color: #aaa !important; }
		.user-dark li::marker { color: var(--accent-light); }
		.user-dark h2 { color: var(--accent-light); }
				.user-dark #theme-toggle{
			background: #23272a;
		}
		.user-dark totop{
			background: var(--dark-background);
		}

		.user-dark mark {
			background: var(--accent-dark);
			color: var(--light-background);
		}
		
		.user-light body, .user-light #blurb, .user-light #toc, .user-light #resources, .user-light main, .user-light div {
			background: #fff !important;
			color: #222 !important;
		}
		.user-light main, .user-light #resources, .user-light footer {
			border-left: var(--border-size) var(--border-style) var(--accent-light);
			border-right: var(--border-size) var(--border-style) var(--accent-light);
		}
		.user-light body { background: #fff url('resources-bg.webp') !important; }
		.user-light a { color: var(--accent) !important; }
		.user-light a:hover, .user-light a:focus, .user-light a:active { color: rgb(240, 142, 72) !important; box-shadow: none;}
		.user-light summary:hover, .user-light details[open] > summary { color: rgb(232, 95, 31) !important; }
		.user-light footer { background: #fff; color: #555 !important; }
		.user-light li::marker { color: var(--accent-dark); }
		.user-light h2 { color: var(--accent-dark); }
		.user-light #theme-toggle{
			background: #fff;
		}

		@media (prefers-color-scheme: dark) {
			body {
				background: var(--dark-background);
				color: #e0e0e0;
			}
			a:link, a:visited { color: var(--accent); }
			a:hover, a:focus, a:active {
				color: rgb(240, 142, 72) !important;
				text-decoration-color: var(--accent-light) !important;
				box-shadow: none;
			}
			footer { background: #23272a; color: #aaa; }
			#blurb, #toc, #resources, main, div {
				background: #23272a;
				color: #e0e0e0;
			}
		}

		@media (max-width: 900px) {
			*, html{
				-webkit-text-size-adjust: none;
			}
			main, #resources, footer {
				width: 98vw;
				max-width: 100vw;
			}

			h1 {
				font-size: 2em;
			}
			h2 {
				font-size: 1.4em;
			}
		}

		@media (max-width: 600px) {

			*, html{
				-webkit-text-size-adjust: none;
			}
			main, #resources, footer {
				width: 100vw;
				padding: 1em 0.5em;
			}
			footer{
				padding-bottom: 2em;
			}
			#resources .category {
				padding: 1em;
				margin: 3em 0;
				border-radius: 10px;
			}
			h1 {
				font-size: 1.3em;
			}
			h2 {
				font-size: 1.5em;
			}
			#theme-toggle {
				font-size: 1em;
				padding: 0.5em;
				top: 0.5em;
				right: 0.5em;
			}
			#toc {
				padding: 0 0.2em;
			}
			footer {
				font-size: 0.9em;
			}
			totop {
				padding: 0.5em;
				font-size: 1em;
			}
			#theme-toggle span{
				display: none;
			}
		}