:root {
	/*
	--bgc-lt: #211d1c;
	--bgc-dk: #181d21;
	--fgc-main: whitesmoke;
	--fgc-link: #b8d2e3;
	--fgc-cold: #2385ac;
	--fgc-hot:  #e28e36;
	*/
	--bgc-dk:  #141414;
	--bgc-mdk: #1e1e1e;
	--bgc-mlt: #252525;
	--bgc-lt:  #595959;
	
	--fgc-main: #f5f5f5;
	--fgc-link: #87b3cf;
	--fgc-icy:  #b8d2e3;

	--fgc-cold: #469cd2;
	--fgc-cool: #87b3cf;
	--fgc-warm: #cfa184;
	--fgc-hot:  #d27c46;

}
html {
	height: 100%;
	background: radial-gradient(circle at top right, var(--bgc-mdk), var(--bgc-dk) 40%) no-repeat;
	background-color: var(--bgc-dk);
}
body {
	font-family: 'Inter', sans-serif;
	font-feature-settings: 'calt' 1, 'cv08' 1;
	font-size: 1.3em;
	line-height: 1.4;
	margin: auto; 
	max-width: 800px;
	overflow: scroll;
	color: var(--fgc-main);
}
@supports (font-variation-settings: normal) {
	body {
		font-family: 'InterVariable', sans-serif;
	}
}

a {text-decoration:none}
a:link {color: var(--fgc-link) !important; }
a:visited {color: var(--fgc-link) !important;}
a:hover {color: var(--fgc-cold) !important;}
a:active {color: var(--fgc-cold) !important;}

h1,h2,h3,h4 {
	color: var(--fgc-cold);
}
h1 {font-size: 2.0em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.4em;}

.button-row {
	display: block;
	text-align: center;
	margin-top: 5%;
	a {
		display: inline-block;
	}
	div {
		display: inline-block;
		height: 6em;
		width: 6em;
		align-content: center;
		vertical-align: middle;
		background-color: #292a2f;
		margin: 0px 1.2em 0.4em 0px;
		border: 2px solid var(--fgc-hot);
		box-shadow: 0px 0px 3px 3px;
		border-radius: 15px;
		color: var(--fgc-hot);
		font-size: 1.5em;
	}
	img {
		display: block;
		margin: auto;
		height: 64px;
		width: 64px;
		mask-image: radial-gradient(closest-side, black, transparent); /* must override */
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-composite: exclude;
		mask-position: center;
		background: linear-gradient(var(--fgc-hot), var(--fgc-cold));
	}
	div:hover {
		border: 2px solid var(--bgc-mdk);
		box-shadow: var(--fgc-cool) 0px 0px 3px 3px;
		background-color: var(--bgc-mdk);
		img {
			background: var(--fgc-hot);
		}
	}
}

/* Regular ul list */
ul {
	li {
		list-style-type: none;
	}
	li:before {
		content: "•";
		color: var(--fgc-hot);
		display: inline;
		margin-right: 0.4em;
	}
}

/* ul list used in a menu */
ul.menu {
	padding-left: 0px;
	li {
		list-style-type: none;
		display: inline;
	}
	li:first-child:before {
		content: none;
	}
	li:not(:first-child):before {
		content: "•";
		color: var(--fgc-hot);
		margin-right: 0.4em;
	}
}