:root {
    --bg-clr    	: #14151D;
    --font-clr  	: white;
    --title-clr 	: #B6C5E0;
    --accent    	: #8F9FBB;
    --font-size	: calc(1rem + (.5vw / 5));
}

@media (prefers-color-scheme:light) {
    :root {
        --bg-clr    	: #f3f0ff;
        --font-clr  	: black;
        --title-clr 	: #400080;
        --accent    	: #a662a8;
    }
}

[saved-theme="light"] {
    --bg-clr    	: #f3f0ff;
    --font-clr  	: black;
    --title-clr 	: #400080;
    --accent    	: #a662a8;
}

html, body {
    background: var(--bg-clr);
    color: var(--font-clr);
    font-size: var(--font-size);
}

h1, h2, h3, h4, h5, h6, strong { color: var(--title-clr) }

a { color: var(--accent); }
a:hover{ color: var(--font-clr); }

main {
    width: 80%;
    margin: 2em auto;
    text-align: center;
}

ul {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    padding: 0;
}

/* Darkmode */
.darkmode {
	 /*float: right;*/
	 text-align: right;
	 margin-right: 1em;
	 padding: 1em;
	 min-width: 30px;
	 position: relative;
}
.darkmode svg:hover {
	cursor: pointer;
}

@media all and (max-width: 450px) {
	 .darkmode {
		 padding: 1em;
	}
}
 .darkmode > .toggle {
	 display: none;
	 box-sizing: border-box;
}
 .darkmode svg {
	 opacity: 0;
	 position: absolute;
     width: 35px;
     height: 35px;
     right: 0px;
     top: 10px;
     fill: var(--accent2);
	 transition: opacity 0.1s ease;
}
 .toggle:checked ~ label > #dayIcon {
	 opacity: 0;
}
 .toggle:checked ~ label > #nightIcon {
	 opacity: 1;
}
 .toggle:not(:checked) ~ label > #dayIcon {
	 opacity: 1;
}
 .toggle:not(:checked) ~ label > #nightIcon {
	 opacity: 0;
}