*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}
body {
  background-color: #151615;
  color: white;
}
section {
  margin: 30px;
}
.intro {
  font-size: 15px;
  margin: 20px 0;
  font-family: monospace;
}
.intro p {
  margin: 20px 0;
  max-width: 500px;
}

a {
  color: #6eb8ff;
}
.dataone p {
  color: gray;
}

.photolist {
  display: flex;
  flex-direction: column;
  max-width: 350px;
  flex-wrap: nowrap;
  gap: 10px;
  height: 70vh;
  overflow: auto;
  margin: 50px 0 30px 0px;
}

/* Custom scrollbar */
.photolist::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

/* Top arrow button */
.photolist::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-color: #ccc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M12 8L4 16h16L12 8z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  height: 16px;
}

/* Bottom arrow button */
.photolist::-webkit-scrollbar-button:single-button:vertical:increment {
  background-color: #ccc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M12 16l8-8H4l8 8z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  height: 16px;
}

/* Custom scrollbar thumb */
.photolist::-webkit-scrollbar-thumb {
  background-color: #919191;
  /* border-radius: 4px; */
}

/* Hover effect on the thumb */
.photolist::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Scrollbar track */
.photolist::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.quote {
  max-width: 300px;
  font-family: monospace;
}