@charset "UTF-8";

/* ----- GLOBAL ----- */

* {
	box-sizing: border-box;
	font-family: Museo, sans-serif;
	margin: 0;
	padding: 0;
}

html {scroll-behavior: smooth;}
#frontpage, #kontakt {
	overflow-x: hidden;
	width: 100vw;
	height: 100vh;
}

*::-webkit-scrollbar {
	display: none;
}

/* ----- TYPOGRAPHY ----- */

h1, h2, h3, h4, p, .link {
	color: white;
	height: auto;
	width: 100%;
}

h1 {font-size: 4rem; font-weight: 500}
h2 {font-size: 3rem; font-weight: 500;}
h3 {font-size: 2rem; font-weight: 300;}
h4 {font-size: 1.25rem; font-weight: 300;}
p {font-weight: 300; justify-content: flex-end;}

.link {
	color: white;
	transition: all 0.2s ease-in-out;
}

.link:hover {color: rgb(195,10,50);}

/* ----- GLOBAL HEADER ----- */

.sticky {
	background-color: white;
	box-shadow: 0 0 32px rgba(0,0,0,.20);
	position: fixed;
	z-index: 500;
}

.sticky > .link {color: rgb(195,10,50);}

.sticky nav > .link:hover {color: black;}

.sticky nav svg path {fill: rgb(195,10,50);}

header {
	display: flex;
	justify-content: space-between;
	position: absolute;
	width: calc(100% - 6rem);
	height: auto;
	box-sizing: border-box;
	margin: 0 3rem;
	padding: 1rem;
	z-index: 500;
	transition: all 0.2s ease-in-out;
}

header > .link {
	display: block;
	font-size: 1.5rem;
	line-height: 1.5rem;
	/*margin-left: 1.25rem;*/
	text-decoration: none;
	padding: 12px 0;
	width: auto;
	height: min-content;
	white-space: nowrap;
}

header > .link:hover {color: black;}

header nav {
	display: flex;
	justify-content: flex-end;
	height: min-content;
}

header nav a:not(.link) {
	padding: .5rem;
	width: 3rem;
	height: 3rem;
}

header nav svg {
	transform: all 0.2s ease-in-out;
	width: 2rem;
	height: 2rem;
}

header nav a:hover:not(.link) svg path {fill: black;}

header nav svg path {
	fill: white;
	transition: all 0.2s ease-in-out;
}

header nav > .link {
	color: rgb(195,10,50);
	line-height: 1rem;
	height: min-content;
	margin-left: 1rem;
	text-decoration: none;
	padding: 1rem 0;
	width: auto;
	transition: all 0.2s ease-in-out;
}

header nav > .link:hover {color: white;}

header nav > .active.link {opacity: 50%;}

/* ----- GLOBAL FOOTER ----- */

footer {
	background-color: black;
	display: flex;
	padding: 1.5rem 3rem;
	position: relative;
	height: auto;
	width: 100%;
}

footer > p {
	color: rgba(255,255,255,.5);
	font-weight: lighter;
}

footer > p a {
	color: inherit;
	text-decoration: underline;
	transition: all 0.2s ease-in-out;
}

footer > p a:hover {color: rgba(255,255,255,1);}

footer > .SoMe {
	display: flex;
	column-gap: 1rem;
	height: 2rem;
	width: auto;
}

footer > .SoMe a {
	height: inherit;
	width: 2rem;
}

footer > .SoMe a:hover svg path {fill: rgba(255,255,255,1);}

footer > .SoMe svg {
	width: 2rem;
	height: 2rem;
}

footer > .SoMe svg path {
	fill: rgba(255,255,255,.5);
	transition: all 0.2s ease-in-out;
}

/* ----- GLOBAL BUTTONS ----- */

.button1 {
	border: 1px solid white;
	color: white;
	display: inline-block;
	font-size: 1.2rem;
	height: min-content;
	padding: 12px 1.25rem;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	width: min-content;
	white-space: nowrap;
}

.button1:hover {
	background-color: white;
	color: rgb(195,10,50);
}

.button2 {
	background-color: white;
	border: 1px solid white;
	color: rgb(195,10,50);
	display: inline-block;
	font-size: 1.2rem;
	height: min-content;
	padding: 12px 1.25rem;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	width: min-content;
	white-space: nowrap;
}

.button2:hover {
	background-color: transparent;
	color: white;
}

/* ----- GLOBAL SECTIONS STYLING ----- */

section {
	width: 100vw;
	height: 100vh;
	position: relative;
}

/* ---------- INDIVIDUAL PAGE STYLING ---------- */
/* ----- Frontpage: Section 1 ----- */

#frontpage .section1 {
	background-color: rgb(195,10,50);
	display: flex;
}

#frontpage .section1 .left, .section1 .right {
	width: 50%;
	height: 100%;
}

#frontpage .section1 .left {
	box-sizing: border-box;
	padding: 3rem;
}

#frontpage .section1 .left > * {z-index: 100;}

#frontpage .section1 .left #content {
	display: block;
	height: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 75%;
}

#frontpage .section1 .left #content h1 {
	line-height: 4.25rem;
	margin-bottom: 1.5rem;
}

#frontpage .section1 .left #content > span {
	display: flex;
	flex-direction: row;
	column-gap: 3rem;
	height: auto;
	width: 100%;
}

#frontpage .section1 .right {
	background: url("Resources/Imgs/ice_skating.jpg") no-repeat center center;
	background-size: cover;
}

#frontpage .section1 .right:after {
	position: absolute;
	z-index: 1;
	width: 50%;
	height: 100%;
	content: '';
	background: linear-gradient(to bottom, rgba(195,10,50,0), rgba(0,0,0,.5));
}

/* ----- Frontpage: Section 2 ----- */

#frontpage .section2 {
	height: auto;
	padding: 3rem;
}

#frontpage .section2 h2 {
	color: rgb(195,10,50);
	margin-top: 80px;
	margin-bottom: 3rem;
	text-align: center;
}

#frontpage .section2 article {
	border: 1px solid rgba(0,0,0,.5);
	box-shadow: 0 0 16px rgba(0,0,0,0);
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
	min-height: 320px;
	height: auto;
	width: 100%;
	transition: all 0.2s ease-in-out;
}

#frontpage .section2 article:hover {
	box-shadow: 0 0 32px rgb(0,0,0,.10);
	border-color: rgb(195,10,50);
}

#frontpage .section2 article .img {
	background-size: cover !important;
	min-height: min-content;
}

#frontpage .section2 #placering .img {background: url("Resources/Imgs/central_placering.png") no-repeat center center;}
#frontpage .section2 #knudepunkt .img {background: url("Resources/Imgs/Ringsted_Station.jpg") no-repeat center center;}
#frontpage .section2 #initiativer .img {background: url("Resources/Imgs/arena.jpg") no-repeat center center;}
#frontpage .section2 #vaekst .img {background: url("Resources/Imgs/hockey.jpg") no-repeat center center;}

#frontpage .section2 article div {
	padding: 1.5rem 3rem;
	height: auto;
	width: 50%;
}

#frontpage .section2 article div h3 {
	color: rgb(195,10,50);
	margin-bottom: .5rem;
}

#frontpage .section2 article div p {color: black;}

/* ----- Kontakt: Header styling ----- */

#kontakt header nav > .link {color: white;}
#kontakt header nav > .link:hover {color: black;}

#kontakt section.section1 {
	background-color: rgb(195,10,50);
	display: flex;
	justify-content: space-between;
}

#kontakt section.section1 .left, #kontakt section.section1 .right {
	padding: 3rem;
	position: relative;
	width: 50%;;
	height: 100%;
}

#kontakt section .left aside {
	background-color: white;
	padding: 1.5rem 3rem;
	width: 100%;
	height: auto;
}

#kontakt section .right #contact-form {
	position: absolute;
	width: calc(100% - 6rem);
	height: auto;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-oz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#kontakt section #contact-form ::placeholder {color: rgba(255,255,255,.25);}
#kontakt section #contact-form :-ms-input-placeholder {color: rgba(255,255,255,.25);}
#kontakt section #contact-form ::-ms-input-placeholder {color: rgba(255,255,255,.25);}

#kontakt section #contact-form label {color: white;}

#kontakt section #contact-form input,
#kontakt section #contact-form textarea,
#kontakt section #contact-form button {height: auto; width: 100%;}

#kontakt section #contact-form input,
#kontakt section #contact-form textarea {
	border: 1px solid white;
	background-color: transparent;
	color: white;
	cursor: not-allowed;
	margin: .5rem 0 1rem 0 ;
	padding: 1rem;
	resize: none;
	transition: all 0.2s ease-in-out;
}

#kontakt section #contact-form input:hover,
#kontakt section #contact-form textarea:hover {border-color: black;}

#kontakt section #contact-form button {
	border: 1px solid white;
	background-color: white;
	color: rgb(195,10,50);
	cursor: not-allowed;
	font-size: 1.25rem;
	padding: .5rem 1rem;
	transition: all 0.2s ease-in-out;
}

/* #kontakt section #contact-form button:hover {
	background-color: transparent;
	color: white;
	cursor: pointer;
} */

/* ----- MEDIA QUERIES ----- */

@media screen and (max-width: 768px) {
	#frontpage .section1 .left #content h1 {
		font-size: 3rem;
		line-height: 3.25rem;
	}
	
	h2 {
		font-size: 2.5rem;
		margin-bottom: 2.75rem;
	}
}

@media screen and (max-width: 720px) {
	
	h3 {font-size: 1.5rem;}
	
	.button1, .button2 {font-size: 1rem;}
	
	#frontpage .section2 #placering, #frontpage .section2 #initiativer {
		flex-direction: column;}
	#frontpage .section2 #knudepunkt, #frontpage .section2 #vaekst {
		flex-direction: column-reverse;
	}
	
	#frontpage .section2 article .img {height: 25vh;}
	
	#frontpage .section2 article div {width: 100%;}
}

@media screen and (max-width: 640px) {
	#frontpage .section1 .left #content h1 {
		font-size: 2.5rem;
		line-height: 2.75rem;
	}
}

@media screen and (max-width: 540px) {
	header {
		width: 100%;
		margin: 0;
		padding: 1rem 3rem;
	}
	
	#frontpage .section1 .left #content {
		width: calc(100% - 6rem);
		text-align: center;
	}
	
	#frontpage .section1 .left #content h1 {
		font-size: 2rem;
		line-height: 2.25rem;
	}
	
	#frontpage .section1 .left #content > span {justify-content: space-between;}
	
	#frontpage .section2 h2 {
		font-size: 2rem;
		margin-bottom: 2rem;
	}
	
	#frontpage .section2 {padding: 0;}
	
	#frontpage .section2 article {border: none;}
	
	#frontpage .section2 article > div {padding: 0 3rem 1.5rem 3rem;}
}

@media screen and (max-width: 420px) {
	
	p {font-size: .9rem;}
	
	#frontpage .section1 .left {padding: 2rem;}
	
	#frontpage .section1 .left #content {width: calc(100% - 4rem);}
	
	#frontpage .section1 .left #content h1 {
		font-size: 1.75rem;
		line-height: 2rem;
	}
	
	header {padding: 1rem 2rem;}
	
	header.sticky {
		background-color: transparent;
		box-shadow: none;
		position: absolute;
	}
	
	header.sticky > .link {color: white;}
	
	header.sticky nav svg path {fill: white;}
	
	header nav {display: none;}
	
	#frontpage .section2 article > div {padding: 0 2rem 1rem 2rem;}
	
	footer {padding: 1rem 2rem;}
	
	footer p {font-size: .8rem;}
	
	footer > .SoMe {height: 1.5rem;}
	
	footer > .SoMe a {width: 1.5rem;}
	
	footer > .SoMe svg {width: 1.5rem; height: 1.5rem;}
}

@media screen and (max-width: 340px) {
	.button1, .button2 {font-size: .9rem;}
}

@media screen and (max-width: 320px) {
	#frontpage .section2 h2 {font-size: 1.75rem;}
	
	#frontpage .section1 .left #content > span {
		column-gap: 0;
		justify-content: center;
	}
	
	.button1 {display: none;}
}