@font-face { font-family: 'Bradford'; src: url("../fonts/BradfordLL-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'Bradford'; src: url("../fonts/BradfordLL-Light.otf") format("opentype"); font-weight: 300; font-style: normal; }

@font-face { font-family: 'BradfordMono'; src: url("../fonts/BradfordMonoLL-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; }

:root { font: 10px/1.3 'Bradford'; --white: #E8E8E8; }

body { margin: 0; background-color: #000; overscroll-behavior: none; color: var(--white); user-select: none; }

html[lang='kl'] [lang='en'], html[lang='kl'] [lang='da'] { display: none; }

html[lang='en'] [lang='kl'], html[lang='en'] [lang='da'] { display: none; }

html[lang='da'] [lang='kl'], html[lang='da'] [lang='en'] { display: none; }

#panel { width: 33.33333333333333%; position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; background: rgba(0, 0, 0, 0.9); z-index: 10; display: none; padding: 100px 60px; box-sizing: border-box; }

#panel.open { display: block; }

#intro { position: absolute; inset: 0 0 0 0; overflow: hidden; background: rgba(0, 0, 0, 0.6); display: none; font: 300 1.8rem/1.6 "Bradford"; letter-spacing: 0.02em; box-sizing: border-box; padding: 0px 120px; }

#intro .left { max-width: 70.5rem; }

#intro h1 { font-size: 3.6rem; }

#intro h2 { font-size: 2.4rem; }

#intro.open { display: flex; justify-items: center; align-items: center; z-index: 20; }

#intro .grid { display: grid; width: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-gap: 0px 20px; justify-items: center; align-items: center; }

#intro ul { margin: 0 0 3em 0; padding: 0; list-style: none; font: 300 1.8rem/1.6 "Bradford"; }

#intro strong { font-weight: 300; }

#intro li + li { margin-top: 1.6em; }

#intro h3 { font: 400 2.0rem/1.6 "Bradford"; margin: 0; }

#intro-btn { position: absolute; left: 20px; top: 20px; width: 60px; height: 0; padding-top: 60px; overflow: hidden; text-transform: uppercase; border-radius: 50%; border: 2px solid var(--white); box-sizing: content-box; z-index: 30; background: rgba(0, 0, 0, 0.8) url("../images/ico-back.svg") no-repeat 45% 50% scroll; background-size: 28px 28px; }

#intro.open + #intro-btn { display: none; }

button.start { display: flex; width: 140px; height: 140px; overflow: hidden; text-transform: none; border-radius: 50%; background: rgba(0, 0, 0, 0.8); box-sizing: content-box; align-items: center; justify-content: center; margin: 0 auto; border: 2px solid var(--white); }

button.start span { text-align: center; font: 400 2.2rem/1 "Bradford"; letter-spacing: 0.02em; color: var(--white); }

button { apperance: none; outline: none; border: none; padding: 0; }

button.close { position: absolute; width: 50px; height: 0; padding-top: 50px; overflow: hidden; background: url("../images/ico-close.svg") no-repeat 50% 50% scroll; background-size: 22px 22px; top: 28px; left: 20px; }

nav.lang { position: absolute; right: 20px; top: 20px; }

nav { display: flex; }

nav button { display: flex; width: 60px; height: 0; padding-top: 60px; overflow: hidden; border: 2px solid transparent; text-transform: uppercase; border-radius: 50%; position: relative; background: none; box-sizing: content-box; }

nav button:after { position: absolute; top: 0px; left: 0px; width: 60px; text-align: center; font: 400 2rem/62px "BradfordMono"; color: var(--white); }

nav button[data-lang=kl]:after { content: "KAL"; }

nav button[data-lang=en]:after { content: "ENG"; }

nav button[data-lang=da]:after { content: "DAN"; }

html[lang='kl'] nav [data-lang=kl], html[lang='en'] nav [data-lang=en], html[lang='da'] nav [data-lang=da] { border: 2px solid white; }

article { font: 300 1.6rem/1.4 "Bradford"; letter-spacing: 0.01em; display: none; }

article.open { display: block; }

h1 { text-transform: uppercase; font: 300 2.8rem/1.2 "Bradford"; letter-spacing: 0.05em; margin: 0; text-align: center; }

h2 { font: 300 2.0rem/1.2 "Bradford"; letter-spacing: 0.05em; margin: 0.6em 0 2em 0; text-align: center; }

p { margin: 1.2em 0; }

figure { margin: 1.2em 0; padding: 0; }

figure img { display: block; width: 100%; height: auto; max-height: 600px; object-fit: contain; }

figure figcaption { font: 300 1.4rem/1.4 "Bradford"; margin: 1em 0 0 0; text-align: center; }

/*# sourceMappingURL=application.css.map */