/* xterm colors */
/*
primary 
#000000
#cd0000
#00cd00
#cdcd00
#0000ee
#cd00cd
#00cdcd
#e5e5e5

secondary
#ffffff
#00ffff
#ff00ff
#5c5cff
#ffff00
#00ff00
#ff0000
#7f7f7f
 */


/* for those based GNU icecat users not sending media queries */
/* aka default css */
p, li{
	font-family: serif;
}

body{
	background-color: white;
	color: black;
	font-family: sans-serif;
}

hr{
	border: 0;
	border-bottom: 1px dashed;
}

a{
	color: #5c5cff;
}

.navbar{
	text-align: center;
	font-variant-caps: small-caps;
	font-family:  monospace;
}

.navtitle, .navlink{
	text-decoration: none;
	color: #5c5cff;
	font-family:  monospace;
}

img{
	display: block;
	max-width: 60%;
	max-height: 60vh;
}

img.portfolio{
	margin: 5% 0;
	max-width: 80%;
}

img.about{
	margin: 0 auto;
	max-width: 50%;
}

img.resources, img.posts{
	max-width: 60%;
	margin: 2% 0;

}

pre, code{
	font-family: monospace;
}

code{
	font-size: 14px;
}

pre{
	border: 1px solid black;
	padding: 1%;
	overflow: auto;
	font-size: 12px;
}

.example{
	border: 1px solid black;
	padding: 1%;
}

div.example > * {
	all: revert;
}

blockquote{
	font-style: italic;
	border-left: solid 3px black;
	padding-left: 1%;
}

table, th, td{
	text-align: left;
	border: 1px solid black;
	border-collapse: collapse;
}

.rsl{
	font-size: 150%;
}

.rsl>*{
	text-decoration: none;
}

.nil{
	display: none;
}

.game{
	background-color: #e5e5e5e5;
}

/* dark scheme */
@media(prefers-color-scheme: dark){
	p{
		font-family: serif;
	}

	body{
		background-color: black;
		color: white;
		font-family: sans-serif;
	}

	a{
		color: #5c5cff;
	}

	.navbar{
		text-align: center;
		font-variant-caps: small-caps;
		font-family: monospace;
	}

	.navtitle, .navlink{
		text-decoration: none;
		color: #5c5cff;
		font-family: monospace;
	}

	pre, code{
		font-family: monospace;
	}	

	code{
		font-size: 14px;
	}


	pre{
		border: 1px solid white;
		padding: 1%;
		overflow: auto;
		font-size: 12px;
	}

	.example{
		border: 1px solid white;
		padding: 1%;
	}

	div.example > *{
		all: revert;
	}


	blockquote{
		font-style: italic;
		border-left: solid 3px white;
	}
		
	table, th, td{
		text-align: left;
		border: 1px solid white;
		border-collapse: collapse;
	}

	.game{
		background-color: #111111;
	}

}

#changelog>*{
	font-family: sans-serif;
}

/* light scheme */
@media(prefers-color-scheme: light){
	p{
		font-family: serif;
	}

	body{
		background-color: white;
		color: black;
		font-family: sans-serif;
	}

	a{
		color: #5c5cff;
	}

	.navbar{
		text-align: center;
		font-variant-caps: small-caps;
		font-family: monospace;
	}

	.navtitle, .navlink{
		text-decoration: none;
		color: #5c5cff;
		font-family: monospace;
	}

	pre, code{
		font-family:  monospace;
	}

	code{
		font-size: 14px;
	}

	pre{
		border: 1px solid black;
		padding: 1%;
		overflow: auto;
		font-size: 12px;
	}

	.example{
		border: 1px solid black;
		padding: 1%;
	}

	div.example > * {
		all: revert;
	}

	blockquote{
		font-style: italic;
	}

	table, th, td{
		text-align: left;
		border: 1px solid black;
		border-collapse: collapse;
	}

	.game{
		background-color: #e5e5e5e5;
	}
}


/* responsive */
*{
	box-sizing: border-box;
}

[class*="col-"]{
	float: left;
	padding: 15px;
} 

.row::after{
	content: "";
	clear: both;
	display: table;
}

/* For mobile phones: */
[class*="col-"]{
	width: 100%;
}

@media only screen and (min-width: 600px){
	/* For tablets: */
	.col-s-1{width: 8.33%;}
	.col-s-2{width: 16.66%;}
	.col-s-3{width: 25%;}
	.col-s-4{width: 33.33%;}
	.col-s-5{width: 41.66%;}
	.col-s-6{width: 50%;}
	.col-s-7{width: 58.33%;}
	.col-s-8{width: 66.66%;}
	.col-s-9{width: 75%;}
	.col-s-10{width: 83.33%;}
	.col-s-11{width: 91.66%;}
	.col-s-12{width: 100%;}
}

@media only screen and (min-width: 768px){
	/* For desktop: */
	.col-1{width: 8.33%;}
	.col-2{width: 16.66%;}
	.col-3{width: 25%;}
	.col-4{width: 33.33%;}
	.col-5{width: 41.66%;}
	.col-6{width: 50%;}
	.col-7{width: 58.33%;}
	.col-8{width: 66.66%;}
	.col-9{width: 75%;}
	.col-10{width: 83.33%;}
	.col-11{width: 91.66%;}
	.col-12{width: 100%;}
}

/* navbar */
nav{
	display: flex;
	justify-content: space-between;
	padding: 1%
}

/* footer */
.footer{
	text-align: center !important;
	font-family: monospace;
}

/* push footer down */
.content{
	min-height: 100vh;
}

.badge{
	display: inline-block;
}
.idea{
	display: block;
	margin: 0 auto;
	padding: 1%;
	margin: 1% auto 0 auto; 
	border-bottom: solid 1px #00cdcd;
}