@font-face {
  font-family: "Smalle";
  src: url("fonts/smalle.woff2") format("woff2");
}

body {
  margin: 0;
  background-image: url("images/bg.png"); /* optional */
  font-family: "Didot",
               "Noto Sans TC", 
               "Microsoft JhengHei", 
               sans-serif;
}

/* HOME BUTTON */
.home {
  position: fixed;
  top: 30px;
  left: 30px;
  width: 60px;
  cursor: pointer;
  z-index: 1000;
}

.home-img {
  width: 60px;
  display: block;
  transition: 0.2s;
}

.home:hover .home-img {
  content: url("images/about/icon-home-hover.png");
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
}

/* TITLE */
.page-title-img {
  display: block;
  width: 197px;
  height: 27px;
  margin: 40px auto 0;
  align-self: center;
}

/* MAIN WRAPPER */
.device-wrapper {
  position: relative;
  width: 1100px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  transform: scale(0.85);
  transform-origin: top center;
}

/* DEVICE BASE */
.device {
  position: relative;
}

.device-img {
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
}

/* EXACT SIZES */
.left-device .device-img {
  width: 429px;
}

.left-device {
  transform: translate(30px, 10px);
}

.right-device .device-img {
  width: 537px;
}

/* WINDOWS */
.window {
  position: absolute;
  overflow-y: auto;
}

/* LEFT WINDOW (adjust to your white area) */
.left-window {
  top: 80px;
  left: 78px;
  width: 290px;
  height: 490px;
  font-size: 20px;
  font-family: "Didot", monospace, serif;
  color: #716d67;
  text-shadow: 0 0 6px rgba(31, 31, 31, 0.6);
}

/* RIGHT WINDOW */
.right-window {
  top: 90px;
  left: 70px;
  width: 400px;
  height: 490px;
  font-size: 20px;
  text-align: center;
  font-family: "Didot", monospace, serif;
  color: #52504be6;
}

/* SCROLLBAR (optional cute style) */
.window::-webkit-scrollbar {
  width: 10px;
}

.window::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.179);
  border-radius: 10px;
}

.window::-webkit-scrollbar-thumb {
  background: #8d8880;
  border-radius: 10px;

  border: 2px solid rgba(255,255,255,0.4);
}

.window::-webkit-scrollbar-thumb:hover {
  background: #bfb8ad;
  border-radius: 10px;
}

/* LIST */
.exhibition-list {
  list-style: none;
  padding: 0;
}

.exhibition-list li {
  margin-bottom: 12px;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.exhibition-list li {
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exhibition-list li:hover {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  transform: translateX(6px);
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
  animation: flicker-hover 0.6s infinite alternate;
}

@keyframes flicker-hover {
  0% { opacity: 1; }
  100% { opacity: 0.7; }
}

.exhibition-list li.selected {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  transform: translateX(6px);
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(187, 35, 35, 0.565);
}

/* CONTENT SWITCHING */
.content {
  display: none;
}

.content.active {
  display: block;
}

/* DEFAULT IMAGE */
.default-img {
  width: 100%;
}

/* RIGHT CONTENT */
.right-window img {
  width: 100%;
  max-width: 300px;
  margin: 10px 0;
  cursor: pointer;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 5px 5px rgba(45, 43, 42, 0.338));
}

.right-window img:hover {
  transform: scale(1.06);
}

.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(248, 248, 248, 0.39);
  backdrop-filter: blur(4px);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 2000;
}

.image-viewer img {
  max-width: 80%;
  max-height: 80%;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

.image-viewer.active {
  display: flex;
}

.no-style {
  width: auto !important;
  max-width: none !important;
}

/* CORDS */
.cords {
  position: absolute;
  top: 220px; /* adjust visually */
  left: 420px;
  width: 171px;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.2));
}


/* texts */
.underline {
  text-decoration: underline;
}

.small-text {
  font-size: 16px;
  font-weight: bold;
}

.glow {
  text-shadow: 0 0 6px rgba(31, 31, 31, 0.6);
}

a {
  color: #8a7f73;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
}