.thisSlide {
 display: none;
}

/* Slideshow container */
.album {
  position: fixed;
  width: 100%;
  height: 100%;
/*
  top: var(--size-zeta);
  bottom: var(--size-zeta);
*/
  align-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}

.origin {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.album .origin,
.album img,
.album .imgtext,
.album .imgcount,
.album .imgdot {
 margin: 0 auto;
 }
 
/*
#banner.top {
 top: 0;
 bottom: auto;
 }

#banner.bottom {
 top: auto;
 bottom: 0
 }
*/

img {
 aspect-ratio: auto;
 width: 66.6%;
 border-radius: 1em; 
}

/* Caption text */
.imgtext {
  width: 100%;
}

/* Number text (1/3 etc) */
.imgcount {
  position: absolute;
}

div#spanner {
 bottom: 0;
 height: auto;
 }

/*
 * dot problems they're on the origin !
 * link: https://developer.mozilla.org/en-US/docs/Web/CSS/display
 * precomposed values *
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

* box generation *
display: none;
display: contents;

* multi-keyword syntax *
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

* other values *
display: table;
display: table-row; * all table elements have an equivalent CSS display value *
display: list-item;

* Global values *
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
*/
/* The dots/bullets/indicators */
.imgdot {
  display: inline-block;
  height: .5em;
  width: .5em;
  border: 1em;
  border-radius: 50%;
  background-color: snow;
  transition: background-color 0.6s ease;
  /* somehow the only way to place them ? */
  top: .16%;
  left: .16%;
  -ms-transform: translate(-.16%, -.16%);
  transform: translate(-.16%, -.16%);
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .imagetext {font-size: 11px}
}