body {
  background: #fff;
  color: #2d3748;
  font-family: 'Open Sans', sans-serif;
}

body.dark {
  background: #1a1a1a;
  color: #f7fafc;
}

header, nav {
  background: #fff;
}

.dark header, .dark nav {
  background: #1a1a1a;
}

#menu {
  display: none;
  position: absolute;
  top:  0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

@media only screen and (min-width: 768px) {
  #menu {
    display:block;
    position: unset;
    height: unset;
  }
}

#menu:target {
  display: block;
}

@media (min-width: 768px) {
  .image-card img {
    object-fit: contain;
    width: 450px;
    height: 350px;
    background: #fff;
  }
}

.dark .image-card img {
  background: #1a1a1a;
}

.lightroom {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.lightroom img, .lightroom div {
  max-width: 50%;
  max-height: 90vh;
  width: auto;
  height: auto;
  background: #fff;
  color: #2d3748;
}

@media only screen and (max-width: 767px) {
  .lightroom img, .lightroom div {
    max-width: 90%;
    max-height: 90vh;
  }
}


@supports (position: fixed) {
  @media only screen and (max-width: 767px) {
    #menu {
      position: fixed;
    }
  }
  .lightroom {
    position: fixed;
  }
}