@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* ---------- CSS Variables - Colors & Sizing ---------- */
:root {
	--background: black;

	--font: "Roboto Condensed";
	--text-shadow: 2px 2px 5px black;
	--font-color: #ffffff;
	--faint-text: #696969;
	--font-tiny: 80%;
	--font-very-tiny: 50%;

	--h1: #ffffff;
	--h2: #dfdfdf;
	--h3: #c6c6c6;

	--link-default: #6e5a71;
    --link-hover: #2d1530;

	--textarea: #2b2b2b;
	--textarea-border: #e3e3e3;

	--border-color: #2d1530;
}

/* ---------- Generic Styles - Applies to ALL ---------- */
body {
	background-color: var(--background);
	font-family: var(--font), serif;
	color: var(--font-color);
	line-height: 150%;
	font-weight: normal;
	text-shadow: var(--text-shadow);
}

/* ---------- Default Elements ---------- */
p { 
	margin-top: 16px;
	margin-bottom: 16px;
	font-size: 18px;
	text-align: justify;
}

a {
	text-decoration: none;
	color: var(--link);
	transition: 0.3s;
}

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

hr {
	margin: 3% 0 ;
	opacity: 0.2;
}

table {
	border-collapse: collapse;
	padding: 0px;
}

th {
	border: 2px, solid, var(--border-color);
	text-align: left;
	padding: 10px;
}

td {
	border: 2px, solid, var(--border-color);
	text-align: left;
	padding: 10px;
}

tr:first-child {
	background-color: #281830;
}

/* ---------- Headings ---------- */
h1 {
	color: var(--h1);
	font-size: 40px;
	font-weight: bold;
	margin-top: 25;
	margin-bottom: 25;
}
  
h2 {
	color: var(--h2);
	font-size: 30px;
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 30px;
}
  
h3 {
	color: var(--h3);
	font-size: 22px;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom: 25px;
}  

/* ---------- Alignment ---------- */
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.left {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.right {
	text-align: right;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Classes for Font Weight ---------- */
.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

/* ---------- Classes for Image Rendering ---------- */
.pixelated {
	image-rendering: pixelated;
}

.smooth {
	image-rendering: smooth;
}

/* ---------- Container + Wrapper + etc ---------- */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
}

.container div {
    width: 700px;
}

.wrapper {
	width: 200px;
	gap: 40px;
	padding: 20px;
	margin: 0 auto;
	top: 0px;
}

footer {
	margin-top: 20px;
}

/* ---------- For SVGs ---------- */
.filter-white {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(127deg) brightness(206%) contrast(101%);
}

.main {
	padding: 0px 10px;
}

.links {
	display: flex;
	gap: 16px;
}

.centerimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.notfound {
    margin-top: 70px;
}

::selection { color:rgba(255, 255, 255, 1); background:  var(--border-color);}