html,
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div#contact {
  position: fixed;
  left: 20px;
  top: 20px;
  letter-spacing: 1px;
}

div#slideshow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110vh; /* Adjust height as needed */
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  border-bottom: 2px solid black;
}

table {
  width: 100%;
  height: 100%;
}

td {
  text-align: center;
  width: calc(100% / 3);
}

.top {
  vertical-align: top;
  padding-top: 20px;
}
.bottom {
  vertical-align: bottom;
  padding-bottom: 20px;
}
.left {
  text-align: left;
  padding-left: 20px;
}
.right {
  text-align: right;
  padding-right: 20px;
}

.angle-140 {
  -webkit-transform: rotate(-140deg);
  -moz-transform: rotate(-140deg);
  -ms-transform: rotate(-140deg);
  -o-transform: rotate(-140deg);
}

.angle-40 {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}

.angle-180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

@media screen and (min-width: 400px) {
  img {
    height: 35px;
  }
}

@media screen and (min-width: 500px) {
  img {
    height: 35px;
  }
}

@media screen and (min-width: 660px) {
  img {
    height: 55px;
  }
}

@media screen and (min-width: 860px) {
  img {
    height: 65px;
  }
}

@media screen and (min-width: 1060px) {
  img {
    height: 75px;
  }
}

@media screen and (min-width: 1200px) {
  img {
    height: 85px;
  }
}

@media screen and (min-width: 1460px) {
  img {
    height: 100px;
  }
}

@media screen and (min-width: 1660px) {
  img {
    height: 120px;
  }
}

#content {
  opacity: 1;
  transition: var(--screensaverFadeIn);
}

#content.hide {
  opacity: 0;
}

#content.disableFade {
  transition: none;
}

#screensaver {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;

  top: -100vh; /* Start off screen */
  left: -100vw;

  width: 100vw;
  height: 100vh;

  z-index: 9999; /* Place above every content */
  opacity: 0; /* Start fully transparent */
}

#screensaver.show {
  top: 0;
  left: 0;
  opacity: 1;
  transition: var(--screensaverFadeIn); /* Add transition for visibility */
}

#screensaver.hide {
  display: none;
}

#screensaver img {
  height: 100%; /* Adjust height/width to cover whole screen */
  width: 100%;
  object-fit: cover; /* Preserve aspect ratio */

  position: absolute;
  opacity: 0;

  transition: var(--slideshowFadeIn);
}

#screensaver img.show {
  opacity: 1;
}