@import "UrlColoring.css";

@font-face {
    font-family: Ubuntu Mono;
    font-style: normal;
    font-weight: 100 800;
    src: url(/UbuntuMono[wght].woff2) format("woff2-variations");
}

:root {
	/*This is based off of the Matcha-Dark colorscheme*/
    --fg_color: #d4cad4;
	--text_color: #cbcacb;
	--bg_color: #221b24;
	--base_color: #2e222e;
	--insensitive_base_color: #2e152e;
	--theme_unfocused_base_color: #32253e;
	--selected_bg_color: #5D4A8E;
	--selected_bg_color2: #483875;
	--selected_bg_color_hover: #7D4A8E;
	--selected_disabled_bg_color: #301845;
	--selected_fg_color: #ffffff;
	--fg_color: #d4cad4;
	--fg_color2: #cacbcb;
	--text_color: #b9abb6;
	--bg_color: #221b24;
	--bg_color2: #221820;
	--bg_color3: #1E181F;
	--bg_color_dark: #18061A;
	--bg_color_light: #302534;
	--bg_color_light2: #2A1B30;
	--base_color: #2b222e;
	/*font-size: 20p0.;*/
}

a[href^="#"],a[href^="/"]{
	color: var(--selected_bg_color);
}
*{
	margin: 0px;
	/*Did not steal some of these fonts from mclo.gs trust*/
	font-family: 'Ubuntu', 'Ubuntu Mono', 'JetBrains Mono', system-ui, sans-serif, monospace;
	
	background: inherit;
	text-decoration: none;
	color: inherit;
}
body {
	background: var(--base_color);
	color: var(--fg_color);
	margin-left: 1em !important;
	margin-right: 1em !important;
}
code {
	background: var(--bg_color2);
	color: var(--text_color);
	border: 1px;
    border-style:solid;
	border-color: var(--bg_color_dark);
	font-family: 'Ubuntu Mono', 'JetBrains Mono', monospace;
	&.code-section {
		background: var(--bg_color3);
	    display:block;
		border: 2px;
	}
}

.jumped_to{
	transition-property: background-color;
	transition-duration: 200ms;
	color: var(--selected_fg_color) !important;
	background-color: var(--selected_bg_color) !important;
}
small, small > *, sub, sub > *{
	font-size: 0.7em !important;
}
hr{ margin-top: 0.4em !important; }
s{ text-decoration: line-through; }
.IMGLIST{ display:table; }
.navibar:hover{ max-height: 4em; }

.navibar, .dir{
	padding: 2px;
	margin-left: 3px;
	margin-right: 3px;
	text-align: center;
	
	background: var(--bg_color2);
	border: 3px;
	border-style: solid;
	border-color: var(--bg_color3); 
}
.scrollable{ overflow-y:auto; }

.dir{
	border: 3px;
	border-left: 2px;
	border-right: 2px;
	border-style: solid;
	border-color: var(--bg_color2); 
	&:hover{
		color: var(--selected_bg_color);
		border-color: var(--selected_bg_color);
	}
}
button:hover,input:hover{
	
	color: rgb(255,100,255);
	border-color: var(--selected_fg_color); 
	background: var(--selected_bg_color); 
}
.dirtext {
	text-align: center;
	border-bottom: 0px;
}

.img {
	max-width: 49%;
	max-height: 450px;
	min-width: 150px;
	min-height: 150px;
	border-style: solid;
	border: 0.2em;
	border-color: rgb(100,0,100,0.3); 
	&:hover { background-color: var(--selected_bg_color); }
}
.pixel {
	max-width: 50%;
	max-height: 50%;
	/*max-height: 450px;*/
	/*min-width: 20%;*/
	min-height: 3.5em;
	image-rendering: pixelated;
}
.warn{ color: #D94757; }

h1{
	text-align: center;
	/*color: ;*/
	width: 100%;
	max-height: 30%;
	background: var(--bg_color);
	border: 0.2em;
	border-style: solid;
	border-color: var(--bg_color); 
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
h2, h3{
	padding-top: 0.4em;
	padding-bottom: 0.2em;
	border-bottom: 1px;
	border-color: var(--bg_color); 
}
.centered{
	justify-items: center;
	display: grid;
	/*width: 100%;*/
	/*max-height: 30%;*/
}
td, th {
	padding-bottom: 0.2em;
	border: 0;
	border-left: 3px;
	border-bottom: 3px;
	border-style: solid;
	border-color: var(--bg_color); 
}
li {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.icon{
	width: 1em;
	height: 1em;
}
.centered_content{
	justify-content: center;
	display: grid;
}
.inline{display:inline;}
.block{display:block;}