:root {
	--sand: #FAF3E8;
	--red: #E8472D;
	--brown: #471C0E;

	--font-color: var(--brown);

	--line-width: 10px;

	--padding: 25px;
	--side-width: 284px;
	/*--side-width: 16.43vw;*/
	--side-gap: calc(var(--padding) * 2);

	--text-size: 20px;
	--text-line-height: 150%;
	--text-block-margin: 35px;
}

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

body, html {scroll-behavior: smooth; overflow-x: clip;}

body, a, input, select, button, textarea {font-family: var(--font-matter); font-weight: normal;}
body, a {color: var(--font-color);}

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-family: var(--font-bebas);}
h1 {font-size: 120px; line-height: 100px;}
h2 {font-size: 50px; line-height: 50px; margin-bottom: 24px;}
h3 {font-size: 30px; line-height: 30px; margin-bottom: var(--padding);}

body {background: #FAF3E8; padding: calc(var(--padding) * 2); display: grid; grid-template-columns: var(--side-width) 1fr; gap: 0 var(--side-gap); min-height: 100vh;}

.Text, .Text :is(p, li, td, th) {font-weight: normal; font-size: var(--text-size); line-height: var(--text-line-height);}
.Text :is(p, ul, ol, table):not(:last-child) {margin-bottom: var(--text-block-margin);}
.Text :is(p, ul, ol) {max-width: max(90%, 500px);}
.Text img {width: 100%; height: auto;}
.Text table {text-align: left; border-collapse: collapse; width: 100%;}
.Text :is(td, th) {padding: 12px 0; vertical-align: top;}
.Text th {font-family: var(--font-bebas); font-weight: normal; font-size: 30px; line-height: 100%;}
.Text th strong {color: var(--red);}
.Text tr:not(:last-child) :is(td, th) {border-bottom: calc(var(--line-width) / 2) solid var(--red);}
.Text :is(ul, ol) {padding-left: 10px;}
.Text ul {padding-left: 40px;}
.Text ul li {list-style: none; position: relative;}
.Text ul li::before {content: ''; background: var(--brown); width: 10px; height: 10px; left: -24px; top: 13px; position: absolute; border-radius: 100%; display: inline-block; vertical-align: middle;}
.Text .MediaGallery {display: flex; gap: var(--line-width);}
.Text .MediaGallery .MediaItem {display: flex;}

@media (min-width: 641px) {
	.AllowOverlook :is(.MediaGallery, table) {width: calc(100% + var(--side-gap) + var(--side-width)); margin-left: calc(-1 * var(--side-gap) - var(--side-width));}
	.AllowOverlook table :is(td, th):first-child {width: calc(var(--side-gap) + var(--side-width));}
	.AllowOverlook table td {vertical-align: bottom;}
}

.Button {
	--height: 44px;
	--color: var(--brown);
	--color-alt: var(--red);
}
.Button {font-family: var(--font-bebas); font-weight: normal; font-size: 25px; line-height: 100%; height: var(--height); padding: 0 15px 0 15px; background: linear-gradient(to top, var(--color-alt) 0%, var(--color-alt) 50%, var(--color) 50%, var(--color) 100%); background-size: 100% 200%; background-position: 0 0; color: white; text-decoration: none; display: inline-flex; align-items: center; padding-top: 3px; position: relative; transform: translateX(calc(var(--height) + 4px)); transition: background-position 0.3s ease;}
.Button:hover {background-position: 0 100%;}
.Button::before {background: linear-gradient(to top, var(--color-alt) 0%, var(--color-alt) 50%, var(--color) 50%, var(--color) 100%); background-size: 100% 200%; background-position: 0 0; height: var(--height); width: var(--height); content: url('data:image/svg+xml,%3Csvg width=%2226%22 height=%2223%22 viewBox=%220 0 26 23%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M25.0607 12.1066C25.6464 11.5208 25.6464 10.571 25.0607 9.98524L15.5147 0.439297C14.9289 -0.14649 13.9792 -0.14649 13.3934 0.439297C12.8076 1.02508 12.8076 1.97483 13.3934 2.56062L21.8787 11.0459L13.3934 19.5312C12.8076 20.117 12.8076 21.0667 13.3934 21.6525C13.9792 22.2383 14.9289 22.2383 15.5147 21.6525L25.0607 12.1066ZM0 11.0459V12.5459H24V11.0459V9.5459H0V11.0459Z%22 fill=%22%23FAF3E8%22/%3E %3C/svg%3E'); display: grid; place-content: center; line-height: 0; position: absolute; left: 0; top: 0; transform: translateX(-100%); margin-left: -4px; transition: background-position 0.3s ease;}
.Button:hover::before {background-position: 0 100%;}
a.Button:not([href]) {cursor: default;}
.Button:has(+ br) {margin-bottom: 4px;}

.GoBtn {
	--color: var(--red);
	--color-alt: var(--brown);
}
.GoBtnBox {margin-top: auto;}

.ButtonsGridBox {max-width: min(300px, 100%) !important;}
.ButtonsGridBox .Button:not(.GoBtn) {width: calc(100% - var(--height) - 4px);}

body > * {padding-top: var(--padding); padding-bottom: var(--padding); border-top: var(--line-width) solid var(--red); border-bottom: var(--line-width) solid var(--red);}
.MainCont {padding-bottom: 0; grid-column: 2; border-top: none; border-bottom: none;}

@media (min-width: 801px) {
	.MainCont {display: grid; gap: var(--padding); grid-template-columns: 1fr 1fr;}
}

@media (max-width: 1200px) {
	:root {
		--side-width: 220px;
		--line-width: 9px;
		--padding: 18px;

		--text-size: 18px;
		--text-line-height: 150%;
	}

	.Text ul li::before {width: 8px; height: 8px;}
	h2 {font-size: 40px; line-height: 40px; margin-bottom: 18px;}
}

@media (max-width: 1100px) {
	:root {
		--side-width: 200px;
		--line-width: 8px;
		--padding: 18px;

		--text-size: 18px;
		--text-line-height: 150%;
	}
}

@media (max-width: 1000px) {
	:root {
		--side-width: 160px;
		--line-width: 7px;
		--padding: 10px;

		--text-size: 16px;
		--text-line-height: 125%;
		--text-block-margin: 25px;
	}

	.Text th {font-size: 24px;}
	.Text :is(td, th) {padding: 8px 0;}
	.Text ul {padding-left: 20px;}
	.Text ul li::before {width: 6px; height: 6px; top: 8px; left: -15px;}

	h2 {font-size: 30px; line-height: 30px; margin-bottom: 18px;}
	.Button {
		--height: 36px;
		font-size: 20px; padding: 2px 10px 0 10px;
	}
}

@media (max-width: 640px) {
	:root {
		--side-width: 110px;
		--line-width: 5px;
	}
	.DesktopOnly {display: none !important;}
	.MainCont {grid-column: span 2;}
}
@media (min-width: 641px) {
	.MobileOnly {display: none !important;}
}@font-face {
  font-family: "Matter";
  src: local("Matter Regular"), local("Matter-Regular"), url("/Preview/Projects/Kodanska/Design/Fonts/Matter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: local("Matter Bold"), local("Matter-Bold"), url("/Preview/Projects/Kodanska/Design/Fonts/Matter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
	font-family: "Bebas";
	src: local("Bebas Regular"), local("Bebas-Regular"), url("/Preview/Projects/Kodanska/Design/Fonts/BebasNeue-Regular.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
  --font-matter: "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --font-bebas: "Bebas", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}.HeaderMain {display: flex; flex-direction: column; justify-content: space-between; position: relative;}
#Nav {display: flex;}
#Nav a {font-family: var(--font-bebas); text-decoration: none; font-size: 35px; line-height: 100%; padding: 10px 10px 5px 10px;}
.BigHeading {font-size: 65px; line-height: 60px; font-family: var(--font-bebas); transform: translateY(8px);}

#Logo {display: flex;}
#Logo img {width: 100%; height: auto;}

.BurgerMenu {display: none;}

@media (max-width: 1200px) {
	.HeaderMain nav a {font-size: 30px;}
	.BigHeading {font-size: 50px; line-height: 50px; transform: translateY(6px);}
}

@media (max-width: 1000px) {
	.HeaderMain nav a {font-size: 24px;}
	.BigHeading {font-size: 30px; line-height: 30px; transform: translateY(6px);}
}

@media (max-width: 800px) {
	.BurgerMenu, .CloseMenuBtn {
		--size: calc(var(--line-width) * 3 + var(--line-width));
	}
	.BurgerMenu {display: flex; flex-direction: column; justify-content: space-between; width: var(--size); height: var(--size); cursor: pointer; position: absolute; right: 0; top: 0; padding-top: var(--line-width); z-index: 2;}
	.BurgerMenu::before, .BurgerMenu::after {content: ''; display: block; width: 100%; height: var(--line-width); background: var(--red);}

	.HeaderMain #Nav {display: none;}
	.Menu {position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; transition: height 0.3s ease; border: none !important; background: var(--red); padding: 0; z-index: 2;}
	#Nav {flex-direction: column; padding: calc(var(--padding) * 2) 0; gap: var(--padding);}
	#Nav a {padding: 0 calc(var(--padding) * 2); font-size: 55px; color: var(--sand);}
	#Nav .LangLink {margin-top: 150px; font-size: 30px; width: 50px; height: 50px; display: grid; place-content: center; background: var(--sand); margin-left: calc(var(--padding) * 2); color: var(--brown); padding-top: 3px;}
	.Menu #Nav::before, .Menu #Nav::after {content: ''; display: block; width: calc(100% - var(--padding) * 4); margin-left: calc(var(--padding) * 2);}
	.Menu #Nav::before {border-bottom: var(--line-width) solid var(--sand); margin-bottom: calc(var(--padding) + var(--line-width));}
	.Menu #Nav::after {border-top: var(--line-width) solid var(--sand); margin-top: calc(var(--padding) + var(--line-width));}
	#Nav a.Active {color: var(--brown);}

	.MenuOpen .Menu {height: var(--height, 100vh);}
	.CloseMenuBtn {position: absolute; right: calc(var(--padding) * 2); top: calc(var(--padding) * 2 + var(--line-width) + 4px);}
	.CloseMenuBtn svg {width: var(--size); height: var(--size);}
	.CloseMenuBtn path {stroke-width: var(--line-width); stroke: var(--sand);}
}

@media (min-width: 801px) {
	#Nav {justify-content: space-between; max-width: min(800px, calc(100% - 70px)); margin-top: -10px; margin-left: -10px;}
	#Nav:has(a.Active:first-child) {margin-left: 0;}
	#Nav a {background: linear-gradient(to top, var(--red) 0%, var(--red) 50%, transparent 50%, transparent 100%); background-size: 100% 200%; background-position: 0 0; transition-property: background-position, color, transform; transition-duration: 0.3s;}
	#Nav :is(a:hover, a.Active) {background-position: 0 100%; color: var(--sand); transform: translateY(-5px);}
	#Nav .LangLink {position: absolute; right: 0; background: var(--red); transform: translateY(-5px);}
}

@media (max-width: 640px) {
	.BigHeading {grid-column: span 2; border-top: none; font-size: 48px; line-height: 43px; transform: none; padding-top: calc(var(--padding) * 2); padding-bottom: calc(var(--padding) * 4);}
}article {padding-bottom: var(--padding);}
article:not(:last-child) {border-bottom: var(--line-width) solid var(--red);}

article img {max-width: 100%; height: auto;}
.Article .Image {margin-bottom: 20px; display: flex;}
.Article h3 {margin-bottom: 0;}
.Article h3 a, .Article time {font-weight: bold; text-decoration: none;}
.Article h3 a, .Article time, .Article .Text {font-size: var(--text-size);}
.Article .Text {margin-bottom: 20px; margin-top: 5px;}
.Article .MoreBtn {margin-bottom: var(--text-block-margin);}

@media (min-width: 801px) {
	article {display: flex; flex-direction: column;}
}

@media (max-width: 640px) {
	.Article + .Article {display: none;}
	.Article .GoBtnBox {padding-top: var(--text-block-margin);}
	article h2 {padding-top: var(--padding); margin-bottom: var(--padding);}

	.MainCont {padding-top: 0;}
}