/* Server wide constants */
:root {
	/* --background: #fff; */
	--background: #cb995d;
	--text: #000;
	--link: #5D8FCB;
	--highlight: #f2902b;
	/* CONSTANTS */
	--transition-time: 0.5s;
}

* {
	padding: 0; margin: 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* --background: #232323; */
		--background: #cb995d;
		--text: #e6e6e6;
		/* --highlight: #F35D22; */
		--highlight: #ff802c;
		--link: #5EA5F6;
		--fill: #5a5a5a;
		--disencouraged: #383838;
	}
}

html, body {
	height: 100%;
	width: 100%;
	overflow: scroll;

	display: flex;
	flex-direction: column;
	scroll-behavior: smooth;
}

body > * {
	flex-shrink: 0;
}

body {
	/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
	font-family: sans-serif;
	background-color: var(--background);
	width: 100vw;
}

.button{
	background-color: #f2902b66;
	color: white;
	border: 5px solid #f2902b;
	border-radius: 24px;
	font-weight: bold;
	text-decoration:none;
	box-shadow: 10px 10px 10px #000000bb;
	padding: 0.8rem 1.2rem;
	text-align: center;
	transition: transform var(--transition-time) ease-in-out;
}

.button:after {
	content: " >";
}

.button:hover {
	border: 5px solid white;
	transform: scale(1.01);
}

a {
	color: var(--link)a; /* This error makes links take the color of whats around them lol */
}

main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background-color: #303030;
	color: white;
}

.basic {
	width: min(786px, 100%);
	padding-inline: calc(50% - 786px/2);
	margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 8px;
}

.button {
	margin: 1rem;
}

p { 
	align-self: center;
	width: min(768px, auto);
	padding: 1rem;
	font-size: 1rem;
}

h1 {
	font-size: 24px;
	padding: 4px;
	border-bottom: 1px dashed grey;
	text-align: center;
	margin: 4px 0;
}

#main > * {
	flex-shrink: 0;
}

.tr { /* table right */
	text-align: right;
	padding: 0.5rem;
}

.tl { /* table left */
	text-align: left;
	padding: 0.5rem;
}

ul, ol {
	max-width: 90%;
	margin: auto;
	padding: 1rem;
}