/* Dette er CSS variabler
Jeg bruker variabler sånn at jeg ikke må drive å bytte på verider overalt */
:root {
	--navbar-color: rgb(36, 36, 36);
	--info-div-color: rgba(30, 30, 30, 0.75);
	--shadow-color: rgba(20, 20, 20, 0.75);
}

a {
	color: orange;
}

body {
	background-image: url("medie/bilder/nokotan_background.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed; /* Denne CSS komandoen gjør at bakgrunnen sitter stille */
	background-size: cover;

	/* Disse er bare her sånn at navbaren rekker ut til kantene av siden */
	margin: 0px;
	padding: 0px;

	font-family: sans-serif;
}

#cover-art {
	display: block;

	margin-left: auto;
	margin-right: auto;

	width: 100%;

	border-radius: 10px;

	box-shadow: 0px 5px 5px rgb(20, 20, 20);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--navbar-color);

	box-shadow: 0px 3px 10px 1px var(--shadow-color);

	top: 0;
	position: sticky;

	z-index: 10;
}

.info-div {
	color: white;
	background-color: var(--info-div-color);

	padding: 20px;

	margin: auto;
	margin-bottom: 20px;

	margin-top: 30px;

	width: 50%;

	border-radius: 10px;

	box-shadow: 0px 0px 5px var(--shadow-color);

	backdrop-filter: blur(7.5px);

	z-index: 0;
}

.headers {
	text-align: center;

	margin-top: 10px;
}

.navlinks {
	list-style: none;
	display: flex;
	gap: 10px;
}

.navlinks a {
	text-decoration: none;
	color: white;
	font-size: 16px;
	transition: color 0.1s;

	transition: 0.2s;
}

.navlinks a:hover {
	color: orange;

	font-size: 20px;
}

#logo {
	height: 30px;
}

.social-links {
	width: 50px;

	transition: 0.5s;
}

.picture-context {
	font-size: 10px;

	margin-top: 5px;

	color: grey;
}

.info-section-image {
	border-radius: 10px;

	width: 100%;

	box-shadow: 0px 5px 5px 1px var(--shadow-color);
}