* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  background: white;
  overflow: hidden;
}

/* LEFT MENU */
.menu {
  position: fixed;
  left: 40px;
  top: 25%;
  transform: translateY(-50%);
}

.menu a {
  display: block;
  text-decoration: none;
  color: black;
  margin: 15px 0;
  font-size: 14px;
  letter-spacing: 2px;
}

/* IMAGE VIEWER */
/* IMAGE VIEWER WITH BORDERS */
@media (max-width: 768px) {
  .viewer {
    width: 90%;
    height: 70%;
    border: 10px solid white;
  }
}
.viewer {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;        /* width of viewer */
  height: 85%;       /* height of viewer */
  transform: translate(-45%, -50%); /* center on screen */
  border: 10px solid white; /* white border around images */
  cursor: pointer;
  background: white;  /* in case images are smaller */
  overflow: hidden;
}

.viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.viewer img.active {
  opacity: 1;
}

.site-title a {
  color: black;          /* text color */
  text-decoration: none; /* remove underline */
  cursor: pointer;       /* optional pointer */
  position: fixed;
  top: 40px;
  left: 40px;
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 500;
  z-index: 1000;
}

.site-title a:hover {
  color: black;          /* keeps color same on hover */
  text-decoration: none; /* no underline on hover */
}