@charset "UTF-8";

html, body {
  width:100%;
  margin:0;padding:0;
}

div.image-wrapper{
  position: relative;
  width:100%;
  height:100lvh;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  flex-wrap: nowrap;
  overflow:hidden;
}

img{
  position: relative;
  display: block;
  width:10%;
  max-height:100%;
  margin:0;padding:0;
  flex-grow: 1;
  flex-shrink: 1;
  object-fit: contain;
}

nav.close, nav.prev-next{
  position: fixed;
  padding:1em;
}

nav.close{
  top:0;
  left:0;
}

nav.prev-next{
  bottom:0;
  right:0;
}

a{
  font-size:2em;
  text-decoration: none;
  font-family: monospace;
}

a:hover{
  opacity:0;
}

/* WEBSITE MEDIA QUERIES */

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here, remember about the 'cascade' */

  div.image-wrapper{
    height:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  img{
    position: relative;
    display: block;
    width:auto;
    max-width: 100%;
    height:100vw;
    max-height:unset;
    margin:0;padding:0;
    flex-grow: 1;
    flex-shrink: 1;
    object-fit: contain;
  }


}