html {scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #b4b4b4 rgba(0, 0, 0, 0)} :root {--wid: 85%; --back: rgb(255, 249, 201); --col: #5c5c5c; --main-color: #ffe580; --box: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); --rad: 5px; --size: clamp(1.2em, 1.5vw, 12em); --bord: 4px solid var(--main-color)}
body {margin: 0; font-family: 'Candara', serifenlose; color: var(--col); background-color: var(--back); text-align: center} 
.body {overflow: hidden} ::selection {background-color: var(--main-color)} *, ::before, ::after {box-sizing: border-box}
header {aspect-ratio: 16/9} header img {position: fixed; left: 0; top: 40px; z-index: -1; max-width: 100%; animation: 1s new linear} 
nav {top: 0; padding-block: 0.4em; font-weight: bold; background-color: var(--main-color); box-shadow: var(--box)}
nav li {list-style: none} nav a {display: block; text-decoration: none; color: inherit; padding: 0.2em 0.7em; border-radius: var(--rad)} 
img, a, button {cursor: pointer}
main, footer {background-color: inherit; padding: 1em 0}
a:not(nav a) {color: #3f5a9b; font-weight: bold} 
h1 {font-size: clamp(2em, 2.2vw, 26em); margin: 1.5em auto} h2, h3 {font-size: clamp(1.5em, 2vw, 24em); margin-block: 1.5em 0.5em; letter-spacing: 0.1em}
main li, p {width: var(--wid); margin: 0.8em auto; line-height: 185%; font-size: var(--size)} li {text-align: initial}
ul:not(main > ul) {padding-left: 0}
figure {display: inline-block; margin: auto} main img {max-width: 60%; box-shadow: var(--box); margin-block: 1em}
figcaption {font-size: var(--size)}
.gall, .toto {margin: 2em auto 0}
.gall img {max-width: 100%; margin-block: initial}
.soso {overflow: hidden; position: relative; margin: 1%} 
.soso figcaption {position: absolute; bottom: 0; width: 100%; background: rgba(245, 222, 179, 0.9); padding-block: 0.5em; color: initial} 
.list {display: flex; flex-wrap: wrap; margin: 2em auto; width: var(--wid)}
.list ul {margin: 1em auto; border-radius: var(--rad); border: var(--bord)}
.list ul :first-child {font-weight: bold}
table {display: inline-table; border-collapse: collapse; border: var(--bord); font-size: var(--size)}
td, th {border: 1px solid var(--main-color); padding: 1em}
a[href="#top"] div {position: fixed; bottom: 2em; right: 1em; width: clamp(2.2em, 2.5vw, 6.2em); opacity: 0.8; border-radius: var(--rad); background: url(images/transparent.png) no-repeat center/cover var(--col)}
a[href="#top"] div, button {aspect-ratio: 1}
a img {border-radius: 50%; transition: all 1s}
.strong {font-weight: bold; font-size: 1.3em; margin-block: 2em}
footer p {padding-top: 1em; border-top: 1px solid black}

.Box {position: fixed; top: 0; z-index: 2; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8)}
.Box figure {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)} .Box figcaption {font-size: var(--size); color: white}
.Box img {max-height: 90vh; max-width: calc(100vw - 10px); border: 2px white solid} 

.renew {animation: 0.5s new linear} 
@keyframes new {from {opacity: 0} to {opacity: 1}} 
.remove {animation: 0.5s back linear}
@keyframes back {100% {opacity: 0}}

button {width: clamp(3.5em, 3vw, 10em); position: absolute; top: 0.8em; right: 0.8em; background: url(images/closer.png) no-repeat center/cover white; border-radius: 50%}
button[class] {top: 50%; background-image: url(images/transparentb.png)}  
.left {left: 0.8em; right: initial; transform: rotate(-90deg)}
.right {transform: rotate(90deg)}