@font-face {
    font-family: 'JetBrainsMonoNL';
    src: url('/static/fonts/JetBrainsMonoNLNerdFontPropo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrainsMonoNL';
    src: url('/static/fonts/JetBrainsMonoNLNerdFontPropo-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Nerd Font';
    src: url('/static/fonts/UbuntuNerdFont-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Nerd Font';
    src: url('/static/fonts/UbuntuNerdFont-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

*
{
	box-sizing: border-box;
}

html
{
	padding: 0;
	margin: 0;
	background-color: #000;
	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2348814f' fill-opacity='0.15'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
	/* background-image: url("/static/backgrounds/lain.jpg"); */
	background: linear-gradient(0deg,rgb(0, 0, 0) 0%, rgb(57, 10, 10) 100%), url("https://kek.ms/static/wireframe1.png");
	background-blend-mode:luminosity;
	background-position: top;
	background-size: cover;
	font-family: system-ui, Arial;
	box-sizing:border-box;
}


h1, h2, h3, h4, h5, h6, ul[role='navigation']
{
	font-family: 'JetBrainsMonoNL', Arial;
	font-weight:600;
}

h1, h2, h3
{
	font-family:'Ubuntu Nerd Font': Arial;
}

body
{
	padding: 0;
	margin: 0px auto;
	/* max-width:100ch; */ /* ch for width, ex for height */
	width:100%;
	text-align:center;
	background:unset;
	min-height:100vh;
	min-width:100vh;
}

nav
{
	display:flex;
	flex-direction:column;
	padding:10px;
	color:#fff;
	max-width:80ch;
}

nav ul[role='navigation']
{
	list-style-type:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
}

nav ul[role='navigation'] li a
{
	cursor: pointer;
	background:unset;
	padding:1ch;
}

nav ul[role='navigation'] li.dir a
{
	background:rgba(34, 45, 89, 0.5);
}

nav ul[role='navigation'] li.page 
{
	color:#cecf9c;
}

nav ul[role='navigation'] li:hover
{
	background:rgba(50,50,50,0.5);
}

nav ul[role='navigation'] li a
{
	display:block;
	text-decoration:none;
	color:#ffd000;
}

main
{
	text-align:left;
	margin:20px auto;
	max-width:84ch;
	min-height:30ch;
	min-width:50vh;
	padding:2ch;
	background-image:url("/static/xp_titlebar_recolor.png"), linear-gradient(0deg,rgba(19, 6, 6, 0.57) 0%, rgb(22, 24, 31) 100%);
	background-repeat:no-repeat;
	background-size:100% auto;
	align-self:center;
	color:#fff;
	/* border: 2px solid #2c00ff; */
	border: 2px solid #ff0000;
	border-top:unset;
	border-radius:8px;
	padding-top:0;
	display:flex;
	flex-direction:column;
}

main a
{
	color:#ffd000;
}

.window-title
{
	display:block;
	margin-left:10px;
	margin-top:6px;
}

.window-title h1
{
	font-size:18px;
	margin:0;
	padding:0;
}

@media(max-width:1279px)
{
	body
	{
		min-width:unset;
		max-width:400px;
	}
	main
	{
		background-image:url("/static/xp_titlebar_small_recolor.png"), linear-gradient(0deg,rgba(19, 6, 6, 0.57) 0%, rgb(22, 24, 31) 100%);
		background-size:100% auto;
		min-width:unset;
		max-width:unset;
		width:100%;
	}
}

.socials
{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}

.socials > *
{
	width:40;
	height:40;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
	margin-top:5px;
}