html, body {padding:0;margin:0;background:#fff;}

h1 {text-align:center;}
a {text-decoration:none;}

#header {
    background: #fff;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 75px;
    margin-top: 0px;
}
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.
The original version of this stylesheet and the associated (x)html
is available at https://www.cssplay.co.uk/menu/cssplay-masonry-for-images-and-text.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* calculate the hight of each aside element */
@property --y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0; 
}

@property --h {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0; 
}

aside {
  overflow: auto;
  position: relative;
  --h:calc(1/(1 - var(--y)));
  timeline-scope: --cy;
  animation: y linear;
  animation-timeline: --cy;
  animation-range: entry 100% exit 100%; 
}
aside:before {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;  
  view-timeline: --cy block;
}
@keyframes y {to{--y:1}}

/* grid layout styles */

main p, main h1 {margin:10px;}
main p  {font: 500 16px / 20px 'Raleway', sans-serif; color: #141415;}
main h1  {font: 600 20px / 22px 'Raleway', sans-serif; color: #141415;}

main {margin:10px auto; width:95%; max-width:1500px;
  display: grid;
  justify-content:center;
  /*grid-template-columns: repeat(auto-fill, 300px);*/
  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows:    repeat(auto-fit, minmax(300px, 1fr));
  
  grid-auto-flow:dense;
  grid-gap: auto;
}

aside
 {
  grid-row-end: span var(--h);
  text-align: justify;
  margin-left:5px;
  margin-bottom:auto;
  align-self: start;
}
aside img {
	display:block; padding:0; margin:0 auto;
	box-sizing:border-box; border-radius:8px;
	width: calc(100% - 20px);
}

#pics {
	border:2px solid rgb(0, 60, 160); 
	padding:4px; 
	border-radius:12px;
	margin-bottom: 5px;
	background:#fff;
}

#to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
}

#to-end {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 100;
}
/* ================================================================ 
Änderung auf Button-Aufrufe
=================================================================== */
@keyframes adjust-position {
	0% {margin-left:0;}
	100% {margin-left:var(--scroller);}
}

/* popover styles */
::backdrop {background: #000;}
.popover {border:0; padding:0; width:99%; height:99vh; background:#000;}
/*.popover img {display:block; width:100%; height:100vh; object-fit:contain; object-position: center; margin:1vh auto;}*/
.popover img {display:block; padding:0; margin:20px auto; box-sizing:border-box; border-radius:8px; width: calc(99% - 20px); object-fit:cover; object-position: center; cursor:pointer;}

.close-btn {
	position:absolute; right:13px; top:25px; padding:0; margin:0; border:0; font-size:40px; cursor:pointer;
	
	display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  font-size:5vh;
	}

[popover]:popover-open img {animation:fade-in1 0.5s ease-out;}
[popover]:popover-open button {animation:fade-in2 1s ease-out;}
/*
body:has([popover]:popover-open) {overflow:hidden;}
*/
@keyframes fade-in1 {
  0% {opacity:0; transform:scale(0);}
  100% {opacity:1; transform:scale(1);}
}

@keyframes fade-in2 {
  0% {opacity:0;}
  100% {opacity:1;}
}

button {
	padding-block: 0px;
    padding-inline: 0px;
    border-width: 0px;
	cursor:pointer;
	background:transparent;
}

.film {
	position:absolute; left:13px; top:25px; padding:0; margin:0; border:0; cursor:pointer; font-size:5vh;
	width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 8px;
}