@property --test{
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
:root{
	--test:100dvh;
	--dvh: 100dvh;
    --sy: 0;
    --page: calc( var(--sy) / var(--dvh) );
    font-family: 'MuseoModerno', 'Italiana', Serif;
    font-size: min(calc(100dvw/110),calc(100dvh / 60));
    font-weight:300;
    --dominant-color: #fff;
    --dominant-contrast: black;
    --main-background: #181818;
    --toast-message-bk: #181818;
    --toast-message-fg: #ffffff;
    --primary-tint: color-mix( in srgb, var(--dominant-color) 75%, white);
    --primary-shade:#434343;
    --dialog-border-color-tint-1: silver !important;
    --logo-tint: var(--primary-tint);
    --logo-shade:var(--primary-shade);
}

.logo-tint{
	fill:var(--logo-tint);
}


html, body{
	margin:0;
	padding:0;
	overflow:hidden;
	height:100dvh;
	width :100dvw;
}

body{
	overflow: hidden;
	position:absolute;
	-height: 100dvh;
	-width: 100dvw;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	touch-action: none;
	pointer-events: all;
}

a{
	cursor:pointer;
	font:inherit;
	color:inherit;
	text-decoration:none;
}
a:focus{
    outline:none;
}

.showroom button, .showroom dialog footer button{
    font-family:lato;
    font-weight:300;
    cursor:pointer;
    padding: 0.625rem 1.25rem;
    border: 0.1rem solid var(--dominant-contrast);
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1rem;
}
.showroom button[disabled]:not(.cancel){
	background:gray;
}

.showroom button:not(.cancel){
    background-color: var(--dominant-color);
    color: var(--dominant-contrast);
    border-color: transparent;
    background-color: var(--main-background);
    color: white;
    background: black;
}

.showroom button:not(.cancel):hover {
    background-color: #ffffff;
    color: black;
	border-color: var(--dominant-color);
}
.showroom button.cancel:hover{
	border-color:black;
}
.showroom button[data-icon]{
	border-color:black;
	background:white;
	color:black;
}
.showroom button[data-icon]:hover {
    background-color: black;
    color: white;
    border-color: var(--dominant-color);
}
.showroom button[data-icon].selected::before{
	font-variation-settings: 'FILL' 1;
}

figure{
	padding:0;
	margin: 0;
}
.content{
	height: 100dvh;
	box-sizing:border-box;
	text-align: left;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	font-family: 'Lato', sans-serif;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

.content > *{
    flex-grow:1;
    display : flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content > :where(.left,.right){
	height:33dvh;
}

.content > .middle{
	/* height: 66.6dvh; */
	display : flex;
	align-items: center;
	align-self: flex-start;
	flex-basis: 33dvw;
	flex-grow: 0;
	justify-content: flex-end;
	padding-block-end: 3rem;
	/* margin-bottom: 9rem; */
	margin-top: 33.3dvh;
}
.content:nth-child(3) > .middle{
	display: flex;
	justify-content: center;
}

header.row aside h1, .content div > h1{
	text-align:center;
	font-size: 2rem;
	font-weight:400;
	font-family: 'MuseoModerno';
	position:relative;
	letter-spacing:0.3rem;
}
header.row aside h1{
	background: black;
	/* visibility: hidden; */
	display: none;
}
header.row aside p, .content p{
	text-align:center;
	font-size:1.2rem;
	font-weight: 300;
	font-family: lato;
	max-width: 80ch;
}
header.row aside h2, .content div > h2{
	font-family: 'Lato';
	font-weight: 300;
}

.gallery{
	overflow:hidden;
	position: fixed;
	top:0;
	left:0;
	z-index: 0;
	pointer-events:none;
	width: 100%;/*calc(100dvw - 1rem);*/
}
body.details-on-display .gallery{
	width:100dvw;
}
.row {
	--rel-h: calc( var(--index) + 2 - var(--page) );
	font-size: calc( var(--rel-h) * 33.3dvh );
	height :1em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	background: transparent;
	position: relative;
	align-items: center;
	z-index: 10;
}


.row :where(.left,.right){
	width:100%;
	height: 100%;
	overflow: visible;
	display: flex;
	flex-direction: column;
	justify-content: center;
	--spacing: calc( (var(--dvw)/(7 * 0.666 * var(--dvh) )) * 1em );
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
}

.row :where(.left,.right) *{
	pointer-events:all;
}
.row section > figure{
	margin:0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	--preview-width : 512;
	--preview-height: 512;
	height: calc(100% - 2rem);
	margin-top: 4rem;
	cursor:pointer;
	background:transparent;
	pointer-events: visible;
}

.row :where(.left,.right) figure canvas{
	height: 100% !important;
	width : auto !important;
	background: transparent;
	touch-action: none;
	/*filter: brightness(1.15) saturate(1.35);*/
}

.row section > figure figcaption{
	font-size: 1rem;
	order: -1;
	/* color: white; */
	opacity: calc( clamp(0,1,var(--rel-h)));
	position: relative;
	max-height: 3em;
}
.row figcaption h1{
	margin:0;
	font-family: 'MuseoModerno';
	font-weight: 300;
	font-size:160%;
}
.row figcaption h1 small{
	font-size:60%;
}
.row figcaption h2{
	position:absolute;
	right:0;
	margin:0;
	font-family:lato;
	font-size:110%;
	font-weight:300;
}
div:has(>blockquote){
	max-width: 50ch;
	background: #f8f8f8E0;
	padding:0.5ch;
	border-radius:0.5ch;
}
blockquote{
	font-style: italic;
	display: inline;
	margin: 0;
	line-height: 1.4em;
}
blockquote::before {
    content: '\0201C';
}
blockquote::after {
    content: '\0201D';
}	
blockquote + small{
	display:inline;
	margin-left:1ch;
}

.row .left{
	align-items: flex-end;	
}
.row .right{
	align-items: flex-start;
}
.row .left figure{
	margin-right: var(--spacing);
}
.row .right figure{
	margin-left : var(--spacing);
	overflow: visible;
}


.row:first-child{
	visibility:hidden;
}


.content.last{
	--rel-h : calc(var(--index) + 2 - var(--page));
	-z-index : 0;
	-position: relative;
}
.content.last div.left{
	flex-grow:10;
}
.content.last div.middle{
	display: flex;
	align-items: flex-end;
	flex-basis: 15dvw;
	flex-shrink: 0;
}
.content.last div.middle *{
	text-align:right;
}

.content.last div.right{
	z-index: 1;
	position:relative;
	height: 100dvh;
	/* top   : calc( 100dvh - var(--rel-h) * 100dvh ); */
	opacity  :  var(--rel-h);
	margin-top: 1rem;
	display: flex;
	align-items: flex-start;
	flex-basis: 35dvw;
	padding-left: 2rem;
	overflow: hidden;
	justify-content: center;
}
.content.last div.right img{
	max-height: 80dvh;
}

header.row{
	z-index: 100;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
}

header.row > h1{
	font-family: 'MuseoModerno';
	font-family: 'MuseoModerno';
	font-size: calc( var(--rel-h) * 20dvh );
	font-weight:100;
	position: absolute;
	bottom: 0.2em;
	margin: 0;
	line-height: 1em;
	/* background: #404040; */
	/* color: black; */
	z-index: 2;
	letter-spacing: 0.1ch;
	transform: translateX(0.1em);
}

article > header nav{
	position: absolute;
	bottom: calc( (1 - clamp(0, 1, var(--rel-h))) * -2.3rem );
	background: black;/* var(--primary-tint);*/
	width:100%;
	pointer-events:all;
	height: 2.3rem;
	z-index: 2;
	/* border-bottom: 6px solid black; */
	box-sizing: border-box;
	/* text-align: center; */
	display: flex;
	justify-content: space-between;
}

:root.main-content-in-view article > header nav{

}

article.gallery > header > nav > a{
	visibility:hidden;
}
article > header menu{
	font-family: lato, 'MuseoModerno';
	font-weight: 300;
	font-size:1rem;
	line-height: 2rem;
	display: flex;
	margin: 0;
	color: white;
	list-style-type:none;
	padding:0;
}
article > header menu a{
	color: inherit;
	text-decoration:none;
}
article > header nav > menu > li::before{
	content:'|';
	margin:0 1ch;
}
article > header menu li:first-of-type::before{
	content:'';
}
article > header menu  a{
	outline:none;
}
article > header menu  a{
	display:inline-block;
	box-sizing:border-box;
	border:1px solid transparent;
	/* overflow: hidden; */
}
article > header menu  a:hover{
	border-bottom:1px solid var(--primary-tint);
}
article > header menu  a:target, body:has(dialog.basket[open]) article > header menu a#favorites{
	color: var(--primary-tint);
}
body:has(dialog.basket[open]) article > header menu a:not(#favorites){
	color:inherit;
}

article > header menu li:has(menu){
	/* position: relative; */
}
article > header menu a#favorites{
	/* display:inline-flex; 
	flex-direction: row;
	align-items: center;*/
}
article > header menu a#favorites:after{
	/* content:'\025BE'; */
}
article > header menu a[data-icon]:before{
	line-height:1em;
	padding:0;
	width:auto;
	order: 2;
	padding-left: 0.4ch;
}

article > header menu menu{
	display:flex;
	flex-direction: row;
	position: absolute;
	z-index: 5;
	visibility: hidden;
	padding: 2rem;
	flex-wrap: wrap;
	grid-gap: 3rem;
	/* border:1px solid white; */
	border-top:none;
	left: 0;
	right: 0;
	width: auto;
	justify-content: center;
	background: var(--main-background);
	border-bottom: 1px solid var(--dominant-color);
	/* height: 66dvh; */
	/* border: 2px solid red; */
	/* background: green; */
}

header.row aside{
	content:'';
	display:block;
	background:var(--primary-tint);
	width:100%;
	height:2em;
	position:absolute;
	top:100%;
	z-index:1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: white;
	align-items: center;
	background-image: url(img/main.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
	background-size: contain;
}

header.row aside p{
	max-width: 80ch;
	background: black;
	margin-bottom: 1em;
}

footer.content .middle{
	background-color: var(--primary-tint);
	color: white;
	flex-grow: 20;
	background-color: var(--main-background);
}




/*
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&
	icon_names=add,animated_images,animation,arrow_back,arrow_forward,bolt,check,close,colors,contrast,delete,early_on,edit,
	favorite,fullscreen,fullscreen_exit,more_vert,music_note,refresh,settings,toggle_off,toggle_on,tune,wb_sunny
*/
/*
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/lib/res/icons.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
	src: url(/lib/res/icons100.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
	src: url(/lib/res/icons200.woff2) format('woff2');
}
*/

/*
	https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..40,100..400,0..1,0..200&icon_names=add,animated_images,animation,arrow_back,arrow_forward,bolt,check,close,colors,contrast,delete,early_on,edit,favorite,fullscreen,fullscreen_exit,more_vert,music_note,refresh,schedule,settings,shopping_cart,toggle_off,toggle_on,tune,wb_sunny
*/
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 400;
  src: url(/web/res/material_symbols.woff2) format('woff2');
}


.material-symbols-outlined, *[data-icon]::before{
  font-family: 'Material Symbols Outlined';
  font-weight: 200;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

*[data-icon]::before{
	content: attr( data-icon );
	/* font-size: 1.6rem; */
	line-height: 3rem;
	width  :3rem;
	display:inline-block;
	text-align: center;
}

.content  ul{
	display:flex;
	list-style-type:none;
	padding:0;
	/* background: transparent; */
	/* width: fit-content; */
}
.content ul li.widget {
    --s: 0.7rem;
    --c: 2rem;
    border-radius:1rem;
    aspect-ratio:1/1;
    width : 6rem;
    height: 6rem;
    /* display: inline-block; */
    margin:0 1rem;
    --main-background: #000;
    background: var(--main-background);
    --alpha: 0.4;
    font-family: system-ui;
    box-sizing: border-box;
    -webkit-user-select: none;
	user-select: none;
    touch-action: none;
}
.content ul li.widget:where(.kelvin,.color) > div::before{
	color: white;
	font-size: 0.8em;
}
body:has(.content ul li.widget.dragging:where(.kelvin,.color)){
	cursor: ew-resize;	
}

:root[data-active-preset-class='solidWhite'] .content .widget.kelvin > div{
    box-shadow: 0 0 5vmin 0.2vmin var(--color);
}
:root[data-active-preset-class='solidWhite'] .content .widget.kelvin > div::before{
	color: var(--color);
	color: white;
}

:root[data-active-preset-class='solidColor'] .content .widget.color > div{
    box-shadow: 0 0 5vmin 0.2vmin var(--dominant-color);
}
:root[data-active-preset-class='solidColor'] .content .widget.color > div::before{
	/* color: var(--dominant-color); */
	/*color: white;*/
}

:root[data-active-preset-class='solidColor'] .content .widget.spatial-animation li.selected{
    box-shadow: 0px 0px 5vmin 0.2vmin var(--dominant-color);
}

:root:not([data-active-preset-class='solidColor']) .content .widget.spatial-animation{
    --dominant-color:white;
}
.content ul li.widget:where(.kelvin,.color) {
	cursor:pointer;
}
.content ul li.widget:where(.kelvin,.color) > div::before{
	margin-top: -1.9rem;
}
.content ul li.widget:where(.kelvin,.color) > svg{
	--w   : calc(30*var(--c));
	width : var(--w);
	height: var(--w);
	left: 50%;
	top : calc( 50% - calc(0.5*var(--w)));
	left: calc( 50% - calc(0.5*var(--w)));
	top: 50%;
	transform-origin: center;
	transform: rotate(89.75deg);
	opacity: var(--alpha);
	opacity: 0.9;
}	
.content ul li.widget:where(.kelvin,.color).dragging > div{
	z-index:3;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid white;
	box-sizing: border-box;
	background-color: var(--color);
	color:white;
}

.content ul li.widget:where(.kelvin) > svg{
	transform: rotate( calc(var(--angle) - 0deg));
}

.content ul li.widget:where(.kelvin,.color) > svg *{	
	vector-effect: non-scaling-stroke;
	stroke-width: calc(3*var(--c));
}

.content ul li.widget.spatial-animation li{
	padding:0;
}

.content ul li.widget.spatial-animation{
    aspect-ratio:4/1;
    width:auto;
    height:6rem;
    background:none;
}
.content ul li.widget.spatial-animation > figure{
    display:none;
}
.content ul li.widget.spatial-animation > menu{
    visibility:visible;
    margin:0;
    padding:0;
    position:relative;
    top : auto;
    left: auto;
    list-style-type:none;
    border-radius:1rem;
    overflow:hidden;
    z-index: 0;
    grid-column-gap:1rem;
    height: 6rem;
    display: flex;
    overflow: visible;
    justify-content: center;
}
.content ul li.widget.spatial-animation > menu li{
	border-radius:inherit;
	box-sizing:border-box;
	padding:1rem;
	aspect-ratio:1;
	flex-grow:0;
	flex-shrink:2;
	flex-basis: 5rem;
}
.content ul li.widget.spatial-animation > menu :where(li[data-type='0'],li[data-type='2'],li[data-type='3']){
	display:none;
}

.content ul li.widget.schedule {
	width: 11rem;
	height: 6rem;
	color: white;
	padding: 0 1rem;
	box-sizing: border-box;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.content ul li.widget.schedule.turn-on{
}

.content ul li.widget.schedule *{
	margin:0;
}
.content ul li.widget.schedule :where(h2,h3){
	font-weight: 400;
	font-size  :0.85rem;
	line-height: 1.5rem;
	text-align: center;
}

.content ul li.widget.schedule main h1{
	font-weight:500;
	filter: drop-shadow(2px 2px 4px var(--dominant-color));
}

.content ul li.widget.special{
	color:white;
	overflow:visible;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	text-align: center;
	cursor: pointer;
}

.content ul li.widget.special:has(.switch){
	width:7rem;
}
figure.clock {
    width: 8rem;
    height: 8rem;
    padding: 0;
    margin: 0;
    position: relative;
    box-sizing:border-box;
    border-radius: 50%;
    color: white;
}
figure.clock figcaption{
	position:absolute;
	bottom:-1rem;
	color:black;
}
.clock :where(ol,ul){
    padding:0;
    margin: 0;
    position: absolute;
	width:100%;
	height:100%;
	box-sizing:border-box;
}
.clock .markers{
    list-style-type:none;
    text-align: center;
}
.clock .markers li{
	position:absolute;
	left: 50%;
	top: 0;
	transform: rotate( calc( var(--i) * 30deg) ) translateX(-50%);
	transform-origin: 0rem 4rem;
	border: 1px solid;
	border-radius:100%;
	height: 0.4rem;
	background: currentColor;
	box-shadow: 0 0 6px 3px var(--primary-shade);
}
.clock .markers li:nth-of-type(3n+1){
	-height:0.6rem;
}
.clock .pointers{
	list-style-type:none;
}

.clock .pointers li{
	position:absolute;
	left: 50%;
	top: 0;
	transform:  rotate( var(--a) ) translateX(-50%) translateY(calc(4rem - 100%));
	transform-origin: 0rem 4rem;
	border: 1px solid;
	height: 3rem;
	background: currentColor;
	box-shadow: 0 0 7px 3px var(--primary-shade);	
}

.clock .pointers li.hours{
	--a: calc( var(--t) * 30deg);
	height:2.4rem;
	animation-duration: calc(12 * 60 * 60s);
	animation-timing-function: linear;	
}
.clock .pointers li.minutes{
	--a: calc( var(--t) * 1turn );
	height:3rem;
	animation-duration: calc(60 * 60s);	
	animation-timing-function: linear;	
}
.clock .pointers li.seconds{
	--a: calc( var(--t) * 60turn );
	height:3.5rem;
	animation-duration: 60s;
	animation-timing-function: steps(60);
}

.animated.clock .pointers li{
	animation-name: clock-ani;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.clock:not(.animated) li.seconds{
	display:none;
}

@keyframes clock-ani{
	0%{
		transform:  rotate( calc( var(--a) + 0deg ) ) translateX(-50%) translateY(calc(4rem - 100%));
	}
	100%{
		transform:  rotate( calc( var(--a) + 360deg ) ) translateX(-50%) translateY(calc(4rem - 100%));
	}
}



.content ul.scheduled-presets {
    display: block;
    height : 6rem; 
    width  : 13rem;
    overflow:hidden;
    position:relative;
}
.content ul.scheduled-presets li{
    position:absolute;
    transition:1s;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
	animation-play-state: running;
}

.content ul.scheduled-presets.turn-on li.turn-off{
    animation-name:disappear-to-top;
}
.content ul.scheduled-presets.turn-on li.turn-on{
    animation-name:appear-from-bottom;
}
.content ul.scheduled-presets.turn-off li.turn-off{
    animation-name:appear-from-bottom;
}
.content ul.scheduled-presets.turn-off li.turn-on{
    animation-name:disappear-to-top;
}
@keyframes appear-from-bottom{
	from{
		top:120%
	}
	to{
		top:0%;
	}
}
@keyframes disappear-to-top{
	from{
		top:0%;
	}
	to{
		top:-120%;
	}
}

.content#c_contact .middle, .content#c_faq .middle{
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
}
.content#c_contact .middle{
	min-height: 100dvh;
    height: auto;
    position:relative;
    color: var(--dominant-contrast);
    color: white;
}

.content#c_contact .left{
	display:none;
}
.content#c_faq{
	display: flex;
}

.content#c_faq .middle{
    background: var(--main-background);
    color: white;
    height: 100dvh;
    align-self: flex-start;
    flex-basis: 100dvh;
    display: flex;
    margin: 0;
}

.content#c_faq .middle::before {
    content: 'illúmea';
    -position: relative;
	font-family: 'MuseoModerno';
	font-size  :  20dvh ;
	font-weight:  100;
	margin: 0;
    -margin-top:-20dvh;
	line-height: 1em;
    text-align:center;
    color:black;
    display:block;   
	background:white;
	width:100%;
	display:none;
}
.content#c_faq .middle dl{
	display: grid;
	grid-template-columns: repeat(auto-fill,64ch);
	grid-auto-rows: max-content;
	grid-gap:1rem;
	width: 100%;
	text-align:left;
	font-family:lato;
	justify-content: space-evenly;
}
.content#c_faq .middle dt{
	font-weight:bold;
}
.content#c_faq .middle dd{
	margin:0;
}

.content#c_faq {
	min-height: 100dvh;
	height: auto;
	background: var(--main-background);
}
.content#c_faq .middle{
	height: fit-content;
}

body.details-on-display {
	overflow:hidden;
}
body.details-on-display .content{
	visibility:hidden;
}

article.details, article.gallery{
	animation-name:var(--aname);
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-play-state: running;
	min-height: 100dvh;
}

article.details {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100dvw;
    height: 100dvh;
    background: white;
    overflow: auto;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    scroll-behavior: smooth;
    scroll-snap-type: block mandatory;
    justify-content: flex-end;
}

@media (orientation: portrait){
	:root{
		font-size:calc(100dvh / 80);
	}
	header.row > h1{
		font-size:calc(100dvw / 5);
	}
	.row:first-of-type, header.row {
		font-size: calc( var(--rel-h) * 33dvh );
	}
	article > header menu{
		font-size: min(2rem, calc(100dvw / 28));
	}
	.row,.gap{
		--rel-h: calc( var(--index) + 2 - var(--page) );
		font-size: calc( var(--rel-h) * 20dvh );
		height: 1em;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		background: transparent;
		position: relative;
		z-index: 10;
		align-items: center;
		justify-content: flex-start;
		-border:1px solid red;
		-box-sizing:border-box;
	}	
	.gap{
		font-size: calc( var(--rel-h) * 40dvh );
	}
	.row .right{
		align-items:center;
		display: flex;
		flex-direction: column;
		align-content: center;
		flex-basis: 100%;
		height: 33%;
		justify-content: flex-end;
	}
	.row .left{
		display: none;
	}
	.row .left > figure, .row .right > figure{
		margin-left: 0;
		margin-right:0;
		margin-top: 0;
	}
	.content{
		flex-direction:column;
	}
	.content > .left{
		flex-basis:25%;
	}
	.content > .right{
		flex-basis:50%;
	}
	
	.content > .middle{
		margin: 0;
		flex-basis: 25%;!;!i;!;
		flex-direction: row;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		grid-column-gap: 1em;
		padding: 0 1em;
		align-content: center;
	}
	.content > .middle :where(h1,h2,p){
		flex-basis:100%;
		text-align: center;
	}
	.content.last div.left{
		flex-grow: 0;
	}
	.content.last div.right {
	    background: white;
	    margin: 0;
	    align-items: center;
	}	
	.content.last div.right img {
		height:100%;
		
	}

	.content#c_contact{
		height:auto;
	}
	.content#c_contact .left{
		display:block;
	}
	
	.content#c_contact .middle{
	    position: relative;
	    margin-block-start: 2rem;
	}

}




.gallery > header > h1 img{
    display:block;
    position:absolute;
    width: 0.51em;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    bottom: 0.15em;
    left: 0.05em;
}

@media (max-aspect-ratio: 3/2) {
	:root{
		font-size:calc(100dvh / 80);
	}
	header.row > h1{
		font-size:calc(100dvw / 5);
	}
}


.row > figure  {
    height: 100%;
    width:100%;
    overflow:hidden;
}

.row > figure  > img{
    object-fit: cover;
    height:100%;
    width:100%;
    position:absolute;
}

dialog.photo-toast {
    display: flex;
    align-items: center;
    gap:1em;
}
dialog.photo-toast img{
    height:6em;
	width:6em;
	object-fit:cover;
}

.gallery.loading{
	--page:0;
}
.gallery.loading > header.row > h1::before{
    display:block;
    position:absolute;
    height: 100%;
    left: -5%;
    width:20%;
    background: white;
    content:'';
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,100%) 50%, 
        rgba(255,255,255,0) 100%
    );
    animation-name:page-loading-animation;
    animation-duration: 2.5s;
    animation-play-state: running;
    animation-iteration-count: infinite;
}
@keyframes page-loading-animation{
    from{
        left:-10%;
    }
    to{
        left:90%;
    }
}

#copyrightNotice {
	background:black;
	color:white;
	display: flex;
	justify-content: space-between;
	padding-inline:1em;
	padding-top:5pt;
	height: auto;
	overflow: hidden;
	transition: bottom 0.3s;
	font-size: 90%;
	position:fixed;
	flex-direction: row;
	flex-wrap: nowrap;
	bottom:-1.1lh;
	left:0;
	right:0;
	overflow:clip;
	/*bottom: calc( clamp(1.1lh, calc( 100dvh - 1px*var(--sy)) , 2lh)*-1);*/
}

#copyrightNotice > nav{
	display:flex;
}
#copyrightNotice > nav a:not(:last-child)::after{
	content:'|';
	margin-inline:1ch;
}

#copyrightNotice > *{
	color:inherit;
	position:relative;
	z-index:101;
}
#copyrightNotice:hover{
	bottom: 0 !important;
}