@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	font-family: "JetBrains Mono", monospace;
	font-optical-sizing: auto;
	font-style: normal;
}

body {
	background: #0F0D0F;
	display: flex;
	align-items: center;
	flex-direction: column;
	color: white;
}

a {
	color: #40FFD6;
	text-decoration: none;
}

a:hover {
	color: #F06E93;
}


div#wrapper {
	width: 468px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100px;
	gap: 30px;
}

img#avatar {
	width: 150px;
	border-radius: 100%;
	border: 5px solid #fff;
	box-shadow: 5px 5px 10px #00000066;
}

h1#main_title {
	color: #40FFD6;
}

span#subtitle {
	color: #ddd;
	font-size: 10px;
}

div#navbar {
	width: 100%;
	border-bottom: 1px solid #40FFD6;
	padding-bottom: 5px;
}

div#navbar ul {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	justify-content: space-between;
}

div#navbar ul li a {
	padding: 10px 0;
	color: #fff;
	font-weight: bold;
}

div#navbar ul li a.active {
	color: #40FFD6;
}

div#navbar ul li a:hover {
	color: #F06E93;
}

main {
	width: 85%;
	padding-bottom: 10px;
	text-align: justify;
	font-size: 14px;
	line-height: 2;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Hides scrollbar for Chrome, Safari, and Opera */
.silent-scroll::-webkit-scrollbar {
	display: none;
}

main p {
	margin-bottom: 20px;
}

footer {
	width: 100%;
	border-top: 1px solid #99999922;
	margin-top: -30px;
	text-align: center;
}

footer a {
	color: #777;
	font-size: 8px;
}

hr {
	margin: 20px 0px;
}

section {
	border-bottom: 1px solid #FFFFFF22;
	margin: 10px 0px;
}

input[type=text] {
	background: #000;
	color: #ddd;
	width: 100%;
	padding: 15px;
	border: none;
	margin-bottom: 5px;
	border-radius: 5px;
	outline: none;
}

input[type=password] {
	background: #000;
	color: #ddd;
	width: 100%;
	padding: 15px;
	border: none;
	margin-bottom: 5px;
	border-radius: 5px;
	outline: none;
}

input[type=submit] {
	padding: 10px 50px;
	background: #012625;
	color: white;
	border: none;
	outline: none;
	border-radius: 5px;
}

input[type=submit]:hover {
	background: #025956;
	cursor: pointer;
}


textarea {
	background: #000;
	color: #ddd;
	border-radius: 5px;
	padding: 15px;
	border: none;
	outline: none;
}

/* =====================================
 * MOBIL-ENDRINGER (Gjelder kun skjermer under 768px)
 *
*/

@media (max-width: 520px) {
	div#wrapper {
		width: 90%;
	}
}