/* Essential variables */
* {
	--bg-main: rgb(54, 61, 56);
	--bg-sec: rgb(65, 82, 71);
	--bg-nav: rgb(41, 43, 42);
	--bg-dark: rgb(42, 49, 44); /* TODO: Make this one better, add accent color */
	--accent: rgb(49, 109, 66);
	--accent-hover: rgb(57, 128, 77);
	--accent-hover-dark: rgb(42, 90, 55);
	--text-main: #ffffff;
	--text-sec: rgb(201, 204, 202);
	--text-accent: rgb(75, 177, 104);
	--text-accent-hover: rgb(81, 196, 114);
	padding: 0;
	margin: 0 0 0 0;
}
/* TODO: Fonts*/

body {
	position:relative;
	background-color: var(--bg-main);
	color: var(--text-main);
	min-height: 100vh;
  margin: 0;	
	font-family: "Nunito Sans", sans-serif;
}

header {
	margin: 0;
	min-height: 50px;
	background-color: var(--bg-sec);
	font-size: max(1.6vh, 16px);

	top: 0;
	left: 0;
	
	overflow: hidden;
}

#headtext {
	cursor: pointer;
	transition-duration: 150ms;
	width: fit-content;
	text-decoration: underline solid #ffffff00;
}

#headtext:hover {
	text-decoration: underline solid #ffffffff;
}

.img_credits {
	font-size: small;
	color: var(--text-sec);
	margin-bottom: 6px;
}

.responsive {
  width: 100%;
  max-width: 300px;
  height: auto;
}

div {
	margin-top: 5px;
	margin-bottom: 5px;
}

img {
	margin: 8px 0 8px 0;
	border-radius: 8px;
	cursor: pointer;
}

footer {
	background-color: var(--bg-dark);
	color: var(--text-sec);
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	left: 0;
	/* min-height: 160px; */
}

footer a {
	margin-top: 14px;
}

footer nav {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

#headtext {
	padding: 10px;
}

h2 {
	margin-bottom: 10px;
}

a {
	color: var(--text-accent);
	text-decoration: underline;
	transition-duration: 150ms;
}

a:hover {
	color: var(--text-accent-hover);
}

.main {
	margin: 1vw 1vw;
}

body::after {
  content: '';
  display: block;
  height: 50px;
  /* Set same as footer's height */
}

#noxlynu {
	color: rgb(166, 139, 231)
	/* Color for NoxlynU's name*/
}

#needenk {
	color:#50e0a4
	/* Color for Needenk's name*/
}

/* Test for links and btn */
/* button {
	background-color: var(--accent);
	color: #ffffff;
	transition-duration: 200ms;
}

button:hover {
	background-color: var(--accent-hover-dark);
} */