@media (prefers-color-scheme: dark)
{
  :root {
  	--text: #e0def4;
  	--base: #191724;
	--surface: #26233a;
  }
}
	
@media (prefers-color-scheme: light)
{
  :root {
  	--text: #575279;
  	--base: #faf4ed;
	--surface: #fffaf3;
  }
}

* {
	margin: 0;
	padding: 0;
	color: var(--text);
	text-decoration: none;
}
		  
li
{
	list-style-type: '✨';
	color: transparent;
	text-shadow: 0 0 0 var(--text);		
}
		  
html {
	background: var(--base);
	overflow: hidden;
}

body {
	padding: 20px;
	display: grid;
	grid-template-areas: 	"header header" 
  							"nav main"
  							"footer footer";
  	grid-template-columns: minmax(200px,300px) minmax(0, 100%);
  	grid-template-rows: minmax(40px, 60px) minmax(0, 75vh) minmax(40px, 60px);
	column-gap: 20px;
}
				

header {
	grid-area: header;
	display:flex;
	flex-direction: row;
	justify-content:center;
	border: 2px double var(--surface);							  
}

header div {
	text-align:center;
  	font-size: 20px;
	white-space: nowrap;
	overflow: hidden;
}

main {
	grid-area: main;
  	border: 2px double var(--surface);
	overflow-y: scroll;
}

nav {
	grid-area: nav;
  	border: 2px double var(--surface);
	overflow-y: scroll;
}

nav ul {
	padding: 20px;
  	border: 2px ridge var(--surface);
}

footer{
	grid-area: footer;
	text-align: center;
	border: 2px double var(--surface);
}
		  
div {

}

.title {
	font-size: 18px;
}

.webring {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
		
.webring img {
}