body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-size: contain;
}

a,
a:link,
a:visited,
a:active {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

header {
  text-align: center;
  padding: 50px 0px;
  filter: drop-shadow(0px 0px 15px black) drop-shadow(0px 0px 15px black)
    drop-shadow(0px 0px 15px black);
}

footer {
  text-align: center;
  margin: 20px auto;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-corner {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-image: url("assets/wood-tile.jpg");
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  border-radius: 0px;
}

::-webkit-scrollbar-track-piece {
  background: #251f28;
  border-radius: 20px;
}

::selection {
  background: #63f4f6;
  color: black;
}

.logo {
  width: 500px;
  pointer-events: none;
}
.main {
  width: 50%;

  border-radius: 50px;
  padding: 100px;
  margin: 0px auto 50px;

  background-image: url("assets/wood-tile.jpg");
  filter: drop-shadow(0px 0px 10px black);
}

img.picture {
  transition: 0.25s ease-in-out;
  cursor: pointer;
}
img.picture:hover {
  position: relative;
  transform: scale(1.2) !important;
  z-index: 10;
}

#darken {
  display: none;
  position: fixed;
  background-color: #0000007d;
  width: 100%;
  height: 100%;
  z-index: 11;
}

#modal {
  display: none;
  position: fixed;
  z-index: 12;
}
#imgModal {
  background-color: #fff;
  border: 20px solid #fff;
  filter: drop-shadow(0px 0px 10px black);
  height: 80%;
  max-height: 1024px;
  position: fixed;
  z-index: 12;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  animation: photoIn 1s ease-in-out;
}

img#landscape {
  width: 350px;
}
img#portrait {
  height: 400px;
}

@keyframes photoIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}

@media (orientation: portrait) {
  .logo {
    width: 75%;
  }
  .main {
    padding: 50px 10px;
    width: 75%;
  }
  img#landscape {
    width: 250px;
  }
  #imgModal {
    width: 75%;
    height: auto;
    max-height: 750px;
    border: 10px solid #fff;
  }
}