@font-face {font-family:'OpenSans';font-display:auto;font-style:normal;font-weight:300;src:url('/fonts/OpenSans-Regular.woff2') format('woff2'),url('/fonts/OpenSans-Regular.ttf') format('truetype')}
:root{--colorbg:#ffcd00;--colorhover:#ff0000}

html, body{scroll-behavior:smooth !important;hyphens:auto}

a{background:#666;padding:0 12px;color:#fff;white-space:nowrap;font-weight:100;border-radius:8px;text-decoration:none;transition:color 0.5s ease-in}
a:hover {background:var(--colorhover);color:#000}
.background {position:absolute;display:flex;justify-content:center;filter:grayscale(40%) brightness(70%)}
.background img {min-width:100%;object-fit:cover}
body{font-family:'OpenSans', Sans;background:#eee;line-height:1.5em;font-size:max(1.2vw,18px);margin:0}
.buttons {margin:40px 0;display:flex;gap:40px;justify-content:center}
.buttons a {padding:20px;line-height:1em}
details {font-weight:100;color:#333}
.dummy {flex:2 1 auto}
.emptybutton {background:#0000;border:1px solid var(--colorbg)}
footer {min-height:700px}
footer div {margin:0 auto;width:80vw}
.foreground {position:absolute;color:#fff;margin:0 auto;line-height:1.5em;display:flex;justify-content:center;gap:40px}
.foreground div, .foreground h1 {width:min(70vw, 800px);font-weight:700}
.foreground > div{padding-top:min(240px,20vw)}
.galery {flex-direction:column}
.galery .images img {margin:0;width:44vw;height:unset}
h1, h2{font-size:1.8em;margin-top:0;line-height:1.5em;margin-bottom:40px;hyphens:none}
h1 .highlight {padding:7px 20px}
header{margin:0;padding:0;height:60vw;width:100vw;text-align:center;overflow:hidden}
header>div {width:100vw;height:75vw}
header .subtext {color:#fff}
.highlight {background:var(--colorbg);color:#000;padding:2px 20px;border-radius:8px;padding:2px 10px;box-decoration-break:clone}
.images img {border-radius:9px;object-fit:cover;object-position:0% 80%;width:min(40vw,500px);height:min(30vw,375px);/*margin-top:20px;*/}
.images {display:flex;gap:10px;flex-wrap:wrap}
.inset {margin:40px;border-radius:10px;margin:60px;padding:60px;flex-direction:column}
.inset>div{display:flex;padding:0}
.inset img {width:min(40vw,300px);height:min(30vw,225px);margin-top:10px}
nav {position:fixed;top:0;background:#fff6;border-radius:8px;border:1px solid #000;transition:all 0.5s ease-in;height:3vw;padding:10px 2vw;margin:2vw 60px;width:calc(96vw - 120px);display:flex}
nav, .images img{box-shadow:0px 5px 20px -15px #000}
nav div {display:flex;gap:20px;align-items:center;width:100%}
nav img {width:40px}
nav a {background:none;color:#000;font-weight:700}
section {display:flex;background:#fff;margin:80px 0px;padding:min(15vw,200px) min(1vw,40px);position:relative}
section>div, .inset>div>div, details {padding:0 4vw}
.small {background:#fff;font-size:14px;height:20px;margin-top:10px}
.subtext {color:#333;font-weight:100 !important;margin-top:20px}
summary {margin:20px 0}
#switch {display:none}
ul {padding-left:5vw}

@media only screen and (max-width:1000px){
    .inset {margin:40px 0px;padding:40px 0px}
    nav{margin:2vw 0;width:calc(100vw - 40px)}
    .galery .images img{width:min(40vw,500px);height:min(30vw,375px)}
    }

@media only screen and (max-width:600px){
    body{font-size:4vw}
    nav{background:#0000;border:0;box-shadow:unset}
    nav div{background:#fff;height:40vh;flex-direction:column;display:none;border-radius:8px;border:1px solid #000;box-shadow:0px 5px 20px -12px #000}
    .dummy{display:none}
    .small {background:#0000}
    #switch:checked~div{display:flex}
    section, section>div{flex-direction:column}
    section>.images{flex-direction:row}
    .images img {width:44vw;height:33vw}
    header {height:160vw}
    header > div {height:unset}
    h1,h2{font-size:1.3em}
    .background img {height:200vw}
    .buttons {flex-direction:column}
    }

@media (prefers-color-scheme:dark) {
    body, .small{background:#444;color:#fff}
    section{background:#000}
    .subtext, details{color:#fff}
    nav, .images img {box-shadow:0px -5px 20px -14px #f00, 0px 5px 20px -14px #ffed00}
    }