/*******************************/
/* Construct gallery of images */
/*******************************/

.gallery {
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: rgba(var(--background), .5);
  border-color: rgba(var(--color-pink-dark), 1);
  border-style: solid;
  border-radius: 1rem;
  border-width: .4rem;
  box-shadow: .8rem .8rem .8rem rgba(var(--color-pink-dark), .25);
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 60vw;
  min-height: 40rem;
  overflow: hidden;
  position: relative; }


html.night .gallery {
  box-shadow: .8rem .8rem .8rem rgba(var(--color-blue-dark), .25); }


@media (max-width: 800.00px) {

  .gallery {
    max-width: 98vw;
    min-height: 20rem;
    width: 98%; } }


.gallery>img {
  height: 100%;
  object-fit: cover;
  opacity: .1;
  width: 100%; }



/*******************************/
/* Construct gallery of images */
/*******************************/

.gallery>.about {
  left: .25rem;
  position: absolute;
  top: .25rem; }


.gallery>.about .moderate {
  background-color: rgba(var(--color-blue-dark), .25);
  background-size: 1.9rem 1.9rem;
  color: rgba(var(--foreground), 1);
  cursor: pointer;
  line-height: 1.5rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
  text-shadow: .1rem .1rem rgba(var(--color-blue-lite), .25); }

.gallery>.about .moderate>span {
  display: block;
  font-size: .6em;
  line-height: 1rem; }


@media (max-width: 800.00px) {

  .gallery>.about .moderate {
  line-height: 2.5rem;
  background-size: 2.6rem 2.6rem; }

  .gallery>.about .moderate>span {
    line-height: 1.5rem; } }



/*******************************/
/* Construct gallery of images */
/*******************************/

.gallery>.count {
  background-color: rgba(var(--color-blue-dark), .25);
  color: rgba(var(--foreground), 1);
  border-radius: 1rem;
  bottom: .5rem;
  font-size: 2rem;
  font-family: 'Robono';
  left: 50%;
  line-height: 2rem;
  padding: .5rem;
  position: absolute;
  text-shadow: .1rem .1rem rgba(var(--color-blue-lite), .25);
  transform: translateX(-50%); }

.gallery>.count i {
  font-weight: bold;
  font-size: 1rem;
  margin: 0 .1rem; }



/*******************************/
/* Construct gallery of images */
/*******************************/

.gallery>.back,
 .gallery>.next {
  background-color: rgba(var(--color-pink-dark), .75);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 5rem;
  color: rgba(var(--foreground), 1);
  cursor: pointer;
  font-size: 6rem;
  font-weight: bold;
  height: 5rem;
  position: absolute;
  text-align: center;
  padding-bottom: 1rem;
  transform: translateY(-50%);
  transition: all 300ms ease-in-out;
  top: 50%;
  user-select: none;
  width: 5rem;
  z-index: 2; }


.gallery>.back {
  background-image: url('../images/back.svg');
  left: .5rem;
  top: calc(50% - .5rem); }

.gallery>.next {
  background-image: url('../images/next.svg');
  right: .5rem;
  top: calc(50% - .5rem); }


.gallery>.back:hover,
 .gallery>.next:hover {
  background-color: rgba(var(--color-pink-dark), .85); }

.gallery>.exit:hover {
  background-color: rgba(var(--color-blue-dark), .85); }