/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* AMOEBA.CSS v1.1 */
/* HTML/CSS layout template from https://ribo.zone/free/layouts/ */
/* last updated: june 28, 2026 */

:root {
	--text: #2E3532;
	--bg: #E0E2DB;
	--link: #8B2635;
	--accent: #CFC2C2;
	--secondary: #A9ABA1;
}

@font-face {
	font-family: "terminal"; 
	src: url("fonts/terminal-grotesque_open.woff2") format("woff2");
}
@font-face {
	font-family: "degheest"; 
	src: url("fonts/Director-Regular.woff2") format("woff2");
}

html {
	scroll-behavior: smooth;
	overscroll-behavior: none;
}

body { 
	font-family: "degheest", serif; 
	margin: 0;
	padding: 0;
	background: linear-gradient(to right, var(--accent), var(--bg), var(--bg), var(--bg), var(--bg), var(--bg));
	color: var(--text);
}

* { 
	box-sizing: border-box;
	scrollbar-color: var(--link) var(--secondary);
}

*::-webkit-scrollbar { width: 15px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background-color: var(--link); border: transparent; }

img { max-width: 100% }

nav {
	display: flex;
	flex-wrap: wrap;
	text-align: right;
	justify-content: right;
}

main {
	margin: 10px auto;
	max-width: 60rem;
}

section {
	margin: 2em auto;
	padding: 1em 2em;
	border: 1px dashed var(--secondary);
	outline: 1px dotted var(--secondary);
	outline-offset: 5px;
	max-width: calc(100% - 10px);
}

nav a, .up a {
	color: var(--link);
	display: block;
	border: 1px var(--link) solid;
	margin: 10px;
	padding: 20px 5px 2px 50px;
	text-decoration: none;
	font-size: 30px;
	background-color: rgb(0,0,0,0);
}

hr {
	border: none;
	border-top: 1px solid var(--text);
}

header {
	font-size: 50px;
	margin: 10px;
	display: flex;
	justify-content: space-between;
	font-family: 'terminal';
	font-weight: normal;
	color: var(--link);
	max-width: calc(100% - 20px);
}

header div { margin: 20px 10px 0 20px; text-shadow: 3px 3px var(--secondary); }

h1, h2, h3, h4, h5, h6, p, table, details, cite, pre, blockquote {
	margin: 1rem 0;
}

h1, h2, h3, a { font-family: 'terminal'; font-weight: normal; }

a { color: var(--link); padding: 2px 4px; font-size: 1.25em; }

ul, ol {
	margin: 1rem 0 1rem 1.5rem;
}

dl { margin: 1rem 0; }

dt { 
	background: linear-gradient(to right, var(--text), var(--bg));
	padding: 0.25rem 0.5rem;
	color: var(--bg);
}

dd { padding: 1rem; }

ul ul, ol ol { 
	margin: 0 0 0 2rem;
}

p, table,  ul, ol, dl {
	font-size: 1rem;
	line-height: 1.5;
}

a:hover { 
	background-color: var(--link);
	color:var(--bg);
}

h6 { font-size: 1em; }
h5 { font-size: 1.25em; }
h4 { font-size: 1.5em; }
h3 { font-size: 2.5em; }
h2 { font-size: 3em; }
h1 { font-size: 3.75em; text-align: center; }

blockquote {
	border-left: var(--link) 3px solid;
	padding: 0 1rem;
}

cite { 
	display: block;
	text-align: right;
}

code, pre {
	background-color: var(--text);
	color: var(--bg);
}

details { border: 1px solid; }

code { 
	font-family: 'Courier New', monospace; 
	padding: 2px 4px;
}

details, pre {
	padding: 1em;
}

pre { overflow-x: auto; }

details p { margin: 0.5rem 0 0 2rem; }

table {	border: 3px solid var(--text); margin: 1rem auto; }
tr, td, th { border: 1px solid var(--text); }
td, th { padding: 0.5rem }

figure {  display: table; margin: 1rem; }

figure img { margin: 5px auto; }

figcaption { 
	display: table-caption;
    caption-side: bottom;
    text-align: center;
}

footer { 
	font-size: 0.8em;
	text-align: center; 
	padding: 5px 10px;
	margin: 2rem;
}

.up { position: fixed;
	bottom: 10px; right: 10px; }

.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: 0 auto;
	padding: 0;
	align-items: flex-start;
}

.flex-box section {
	margin: 1em;
	}

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }


@media screen and (max-width: 1270px){
	.up { position: static; width: fit-content; margin: 10px auto; }
}

@media screen and (max-width: 700px){
	header { flex-wrap: wrap; }
	header div { margin: 5px; }
	nav a {
		margin: 5px;
		padding: 15px 5px 2px 30px;
		text-decoration: none;
		font-size: 24px;
	}
	section {
		margin: 1em auto;
		padding: 0.5em 1em;
	}
	ul, ol {
		margin: 1rem 0 1rem 0.5rem;
	}
	ul ul, ol ol { 
		margin: 0 0 0 1rem;
	}
}