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

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

	--line-width: 10px;
}

* {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;}

body {background: #FAF3E8; padding: 40px; display: grid; grid-template-columns: 240px 1fr; gap: 54px; min-height: 100vh;}

.Button {font-size: 40px; line-height: 60px; cursor: pointer; padding: 10px 0 0 0; text-transform: uppercase; text-decoration: none; font-family: var(--font-bebas); display: inline-flex; align-self: center;}
a.Button:not([href]) {cursor: default;}@font-face {
  font-family: "Matter";
  src: local("Matter Regular"), local("Matter-Regular"), url("/Grace/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("/Grace/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("/Grace/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;
}:root {
	--padding: 25px;
}

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 {display: grid; gap: 24px 50px; grid-template-columns: 1fr 35.3%; grid-template-rows: auto auto 1fr auto; padding-bottom: 0;}
.Invitation {align-self: stretch; font-size: 30px; line-height: 35px;}
.Invitation p {margin-bottom: 40px;}
.SideText {border-top: var(--line-width) solid var(--red); padding-top: 20px;}
.SideText p {font-size: 22px; line-height: 28px;}
.SideButton {width: 100%;}
.Buttons {display: flex; gap: 10px;}
.Buttons .Button::after, .ABtn::after {content: url('data:image/svg+xml,<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.0607 13.0607C25.6464 12.4749 25.6464 11.5251 25.0607 10.9393L15.5147 1.3934C14.9289 0.807611 13.9792 0.807611 13.3934 1.3934C12.8076 1.97919 12.8076 2.92893 13.3934 3.51472L21.8787 12L13.3934 20.4853C12.8076 21.0711 12.8076 22.0208 13.3934 22.6066C13.9792 23.1924 14.9289 23.1924 15.5147 22.6066L25.0607 13.0607ZM0 12V13.5H24V12V10.5H0V12Z" fill="%23FAF3E8"/></svg>'); display: grid; place-content: center; width: 44px; height: 44px; background: var(--red); font-size: 0; line-height: normal; transform: translateY(5px); margin-left: 12px;}
.SideButtonBox {display: flex; justify-content: space-between; gap: 10px; border-top: var(--line-width) solid var(--red); padding-top: var(--padding); padding-bottom: var(--padding); align-self: end;}
.SideButtonBox img {max-height: 50px; max-width: 30%; width: auto; height: auto;}
#Logo img {max-width: 100%; height: auto;}

.Panels {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; padding-bottom: var(--padding); border-top: var(--line-width) solid var(--red); padding-top: var(--padding);}
.Panels h2 {grid-column: span 4; margin-bottom: 0;}
.Panels a {display: flex;}
.Panels img {width: 100%; height: auto; border: 1px solid var(--red); transition: border-color 0.2s;}
.Panels a:hover img {border-color: var(--brown);}

@media (max-width: 1670px) {
	h1 {font-size: 90px; line-height: 80px;}
	.Invitation {font-size: 26px; line-height: 32px;}
}
@media (max-width: 1500px) {
	body {padding: 30px;}
}
@media (max-width: 1400px) {
	body {gap: 34px;}
	.Button {font-size: 50px; line-height: 50px;}
	.Buttons .Button::after, .ABtn::after {width: 36px; height: 36px;}
}
@media (max-width: 1300px) {
	h1 {font-size: 70px; line-height: 60px;}
	h2 {font-size: 40px; line-height: 40px;}
	.Invitation {font-size: 23px; line-height: 28px;}
	.SideText p {font-size: 20px; line-height: 26px;}
}
@media (max-width: 1200px) {
	:root {
		--line-width: 9px;
		--padding: 24px;
	}
	body {grid-template-columns: 220px 1fr;}

	.Button {font-size: 40px; line-height: 40px; padding-top: 4px;}
	.Buttons .Button::after, .ABtn::after {width: 30px; height: 30px;}
}
@media (max-width: 1100px) {
	h1 {font-size: 60px; line-height: 52px;}
	h2 {font-size: 30px; line-height: 30px;}
	.Invitation {font-size: 20px; line-height: 25px;}
	.SideText p {font-size: 18px; line-height: 24px;}
}
@media (max-width: 1023px) {
	:root {
		--line-width: 6px;
		--padding: 12px;
	}
	body {grid-template-columns: 140px 1fr; padding: 14px;}

	.Panels {grid-template-columns: 1fr 1fr;}
	.Panels h2 {grid-column: span 2;}
}
@media (max-width: 800px) {
	:root {
		--line-width: 5px;
	}
	.DesktopOnly {display: none !important;}

	.MainCont {border-top: none;}
	.MainCont > div:empty {display: none;}
	body {padding: 30px; gap: 22px;}
	body, .MainCont {grid-template-columns: 1fr;}
	.Button {font-size: 30px; line-height: 33px;}
	.Buttons .Button::after, .ABtn::after {width: 22px; height: 22px; content: url('data:image/svg+xml,<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5372 6.97787C12.8297 6.68543 12.8297 6.2113 12.5372 5.91886L7.77167 1.1533C7.47924 0.860864 7.0051 0.860864 6.71266 1.1533C6.42022 1.44574 6.42022 1.91988 6.71266 2.21231L10.9487 6.44836L6.71266 10.6844C6.42022 10.9769 6.42022 11.451 6.71266 11.7434C7.0051 12.0359 7.47924 12.0359 7.77167 11.7434L12.5372 6.97787ZM0.0263672 6.44836V7.1972H12.0077V6.44836V5.69953H0.0263672V6.44836Z" fill="%23FAF3E8"/></svg>');}
	.SideButton {border-top: none;}
	h1 {font-size: 75px; line-height: 70px; margin-bottom: 24px;}
	h2 {font-size: 30px; line-height: 32px;}
	.Invitation p {margin-bottom: 20px;}
	.Invitation p:last-child {margin-bottom: 0;}

	h1 {order: 1;}
	.Invitation {order: 2;}
	.Panels {order: 3;}
	.Buttons {order: 4;}
	.SideText {order: 5; transform: translateY(-24px);}

	body > div:first-child {display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding-top: 0; padding-bottom: 0; border-top: none; border-bottom: none;}
	body > div:first-child > * {border-top: var(--line-width) solid var(--red); border-bottom: var(--line-width) solid var(--red); padding-top: 10px; padding-bottom: 7px;}
	.LogosM {display: flex; flex-direction: column; align-items: end; justify-content: right; gap: 10px;}
	.LogosM img {width: auto; height: 27px;}

	.Panels {margin-top: 20px; margin-bottom: 20px;}
}
@media (min-width: 801px) {
	.MobileOnly {display: none !important;}

	#Logo {position: relative;}
	#Logo::after {position: absolute; content: ''; left: 0; bottom: calc((var(--padding) + var(--line-width)) * -1); width: 100%; height: var(--line-width); background: var(--red);}

	.FirstLine {min-height: 50px;}
	h1, .Invitation {max-width: 750px;}
}