/* CSS Reset */
* {box-sizing: border-box; margin:;}
body {display: flex; flex-direction: column; min-height: 100vh; padding: 0 clamp(1rem, 5vw, 3rem) 1rem; color: #222;
}
body > * {--layout-spacing: max(8vh, 3rem); --max-width: 70ch; width: min(100%, var(--max-width)); margin-left: auto; margin-right: auto;}
p {text-wrap: pretty;}
main {margin-top: /*var(--layout-spacing);*/}
footer {margin-top: auto; padding-top: var(--layout-spacing);}
footer p {padding-top: 12px; color: var(--color-secondary);
}
:is(h1, h2, h3) {line-height: 1.2;}
:is(h2, h3):not(:first-child) {margin-top: 2em;}
article * + * {margin-top: 1em;}
img:not([alt]) {outline: 2px solid red;}
/* End CSS Reset */

/* 10 Oxenfreenite Palette https://lospec.com/palette-list/oxenfreenite */
:root {
  --color-background: #111a24;
  --color-ausen: #102e58;
  --color-border: #111a24;
  --color-accent: #0b4f55;
  --color-background-footer: #83b5b5;
  --color-primary: #99dde6; 
  --color-secondary: #f3fbfc;
  }

.skip-to-main-content-link {position: absolute; left: -9999px; z-index: 999; padding: 1em; background-color: black; color: white; opacity: 0;}
.skip-to-main-content-link:focus {left: 50%; transform: translateX(-50%); opacity: 1;}

html, body {background-color: var(--color-background); color: var(--color-primary); font-family: monospace; font-size: 16px;}
* {font-size: 106%; line-height: 1.5;}
h1, h2 {font-size: clamp(1rem, 4vw, 3rem); color: var(--color-primary);}
a {color: var(--color-primary); text-decoration: none;}
li {list-style-type: none;}
.mirror {width: 77%; margin: auto; color: var(--color-primary);}
.ausen {width: 77%; margin: auto; padding: 24px 48px; background-color: var(--color-ausen); color: var(--color-primary);} 
/* display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 20ch)), 1fr));}
/* .ausen {  width: min(100vw - 3rem, var(--container-max, 80ch) ); margin-inline: auto;} */
header ul li a {display: block;}
.swaagat {border: 24px solid var(--color-border); margin: 24px 0; padding: 48px; height: auto;}
/* JIVA-carousel */
:root {--carousel-width: 238px; --carousel-height: 168px; /* calc(0.7 * var(--carousel-width));*/  --carousel-padding: 0px;}
@media (max-width: 479px) {:root {--carousel-width: 95vw;}}
.viewport {width: ; margin: ; display: flex; flex-direction: column; align-items: center;}
.carousel-frame {background: var(--color-border); padding: 0 24px 24px 24px; width: 100%; /* calc(var(--carousel-width) + (2 * var(--carousel-padding)));  height: ;/*  calc(var(--carousel-height) + (2 * var(--carousel-padding))); }
.carousel {width: 100%; /* var(--carousel-width);  height: 100%; /* var(--carousel-height); */}
.scroll {display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; width: 100%; height: 100%;}
ul.scroll {margin: 0; padding: 0 0 24px 0; list-style: none;}
.scroll-item-outer {width: 100%; height: 100%; margin-right: 10px;}
.scroll-item {width: var(--carousel-width); height: 100%;}
.scroll-item > img {object-fit: contain; width: 100%; height: 100%; /* filter: sepia(1); */}
@supports (scroll-snap-align: start) { /* modern scroll snap points */ .scroll {scroll-snap-type: x mandatory;}
 .scroll-item-outer {scroll-snap-align: center;}
}
@supports not (scroll-snap-align: start) { /* old scroll snap points spec */ .scroll {-webkit-scroll-snap-type: mandatory; scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 0 50%; scroll-snap-destination: 0 50%; -webkit-scroll-snap-points-x: repeat(100%); scroll-snap-points-x: repeat(100%);}
.scroll-item-outer {scroll-snap-coordinate: 0 0;}}

nav .mainmenu {display: inline;}
nav a {border-block-end: 4px solid var(--border-color, transparent); color: var(--text-color); display: inline-block; margin-block-end: 0.5rem; margin-inline-end: 0.5rem; padding: 0; text-decoration: none;}
nav a span {text-transform:uppercase;}
nav a:where(:hover, :focus) {border-block-end: 4px solid white;}
main {padding: 48px 24px;}
main > img.logo {shape-outside: circle(); float: left; margin: 1em 1em 1em 0;}
main > p, main > ol li {line-height: 1.5;} 
main {line-height: 1.5; padding: 48px;}
main ul li {list-style-type: none;}
main > img.alisa {float: left; margin-right: 1rem; border: 24px var(--color-border);}
dl {border: 7px solid black; padding: 24px;}
dl > dt {float: left; width: 30rem;}
dl dd {margin-bottom: 12px;}
details {margin-bottom: 12px;}
footer {background-color: var(--color-accent); color: var(--color-secondary); padding: 48px; border: 24px solid var(--color-border);}
footer > p .desna {text-align: right;}