/*
 __  __ _          
|  \/  (_)___  ___ 
| |\/| | / __|/ __|
| |  | | \__ \ (__ 
|_|  |_|_|___/\___|
                                          
*/
.navname:hover::after {
  content: 'oper';
}
/* content */
body {
	margin: 2rem auto;
	font-family: Comfortaa, sans-serif;
	width: fit-content;
	max-width: 94%
}
.content {
	padding: 1rem 3rem;
	line-height: 1.6em;
	width: fit-content;
}
ul, ol {
	padding: 1em 1em 1em 2.7em;
	border-radius: 1em;
	/*width: fit-content;*/
}
/* banners */
.banner {
	padding: 3rem;
	border-radius: 1rem;
}
.header {
	border-radius: 1rem;
}
.who {
	text-align: center;
	margin-bottom: 1rem;
}
.jpel {
  transition-property: color;
  transition-duration: 2s;
}
.figlet {
	font-family: Fira Mono, monospace;
	font-weight: bolder;
	width: fit-content;
	margin: auto;
}
/* links */
a {
	text-decoration: none;
  transition-property: color;
  transition-duration: 0.5s;
}
.go {
	
}
/* headings */
h1 {
	font-size: 6rem;
	line-height: 1.2em;
}
h2 {
	font-size: 1.9rem;
	line-height: 1.8em;
}

/*
 _   _             _                
| \ | | __ ___   _| |__   __ _ _ __ 
|  \| |/ _` \ \ / / '_ \ / _` | '__|
| |\  | (_| |\ V /| |_) | (_| | |   
|_| \_|\__,_| \_/ |_.__/ \__,_|_|   
                                    
*/
.navbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem;
	border-radius: 1rem;
	font-size: 1.6rem;
	line-height: 4.5rem;
	font-weight: bolder;
}

.navbtn {
	padding: 1rem;
	border-radius: 0.7rem;
	margin: 0 0.2rem;
}
.navname-container {
	align-self: flex-start;
	/*border-style: solid;*/
	padding-right: 1rem;
}
.nav-container {
	text-align: right;
	align-self: flex-end;
	/*border-style: solid;*/
}
.navname {
	font-size: 1.8rem;
	margin: 0 0.5rem;
}


/*
 _____           _       
|  ___|__  _ __ | |_ ___ 
| |_ / _ \| '_ \| __/ __|
|  _| (_) | | | | |_\__ \
|_|  \___/|_| |_|\__|___/
                         
*/
@font-face {
  font-family: Comfortaa;
  src: url(/font/Comfortaa-Regular.otf);
}
@font-face {
  font-family: Comfortaa;
  src: url(/font/Comfortaa-Bold.otf);
	font-weight: bolder;
}
@font-face {
  font-family: Comfortaa;
  src: url(/font/Comfortaa-Light.otf);
	font-weight: lighter;
}

@font-face {
  font-family: Fira Mono;
  src: url(/font/FiraMono-Regular.otf);
}
@font-face {
  font-family: Fira Mono;
  src: url(/font/FiraMono-Bold.otf);
	font-weight: bolder;
}
/*
  ____      _                      
 / ___|___ | | ___  _   _ _ __ ___ 
| |   / _ \| |/ _ \| | | | '__/ __|
| |__| (_) | | (_) | |_| | |  \__ \
 \____\___/|_|\___/ \__,_|_|  |___/
                                   
*/
/* Light mode */
@media (prefers-color-scheme: light) {
	:root {
    --deep-inset: #e6e6e6;
    --inset: #fbfbfb;
		--background: #fff;
		--foreground: #000;
		--accent: #04d;
		--link: #5a3;
		--secondary: #74d;
  }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
    --deep-inset: #111;
    --inset: #1b1b1b;
		--background: #222;
		--foreground: #eee;
		--accent: #09f;
		--link: #9f5;
		--secondary: #95f;
  }
}

body {
	background: var(--background);
	color: var(--foreground);
}
a {
	color: var(--accent);
}
a:hover {
	color: var(--link);
}
.deep-inset, .navbar, .header, .banner {
	background: var(--deep-inset);
}
.inset, .navbtn, ul, ol {
	background: var(--inset);
}
.jpel {
	color: var(--accent);
}
.jpel:hover {
	color: var(--secondary);
}