body {
  margin: 0;
  padding: 0;
  width: 100vw;
  background: #f5f5f5;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  color: #000;
}
.tops {
  display: flex;
  align-items: center;
  gap: 3vw;
  margin: 4vh 3vw 2vh 3vw;
  padding: 2vh;
  background: white;
  border-radius: 1vh;
  box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.08);
}
.tops img {
  height: 10vh;
}
.content h2 {
  margin: 0;
  font-size: 3.5vh;
}
.content h3 {
  margin: 0.5vh 0 0 0;
  font-size: 2.2vh;
  color: gray;
}
.info {
  font-size: 2vh;
  color: #555;
  margin-top: 0.5vh;
}
.download {
  margin-left: auto;
  padding: 1.5vh 4vw;
  font-size: 2.2vh;
  background: #1a73e8;
  color: white;
  border: none;
  font-weight: bold;
  border-radius: 1vh;
  box-shadow: 0 0.5vh 1.5vh rgba(0,0,0,0.15);
}
.download:focus {
  background: blue;
}
.card {
  background: white;
  margin: 2vh 3vw;
  padding: 2vh;
  border-radius: 2vh;
  box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.08);
}
.card h3 {
  margin-bottom: 1vh;
  font-size: 2.5vh;
}
.card p, .card li {
  font-size: 2vh;
  color: #333;
  font-weight: 500;
}
.card ul {
  padding-left: 3vw;
}
.section-title {
  margin: 3vh 3vw 1vh 3vw;
  font-size: 2.8vh;
}
p i {
  font-family: serif;
  font-weight: 900;
  color: #007bff;
}
.img-row {
  display: flex;
  gap: 5vw;
  padding: 2vh 3vw;
  overflow-x: auto;
  height: 60vh;
  scroll-snap-type: x mandatory;
}
.img-row img {
  height: 50vh;
  border-radius: 1vh;
  margin-top: 2vh;
  box-shadow: 0 1vh 2vh rgba(0,0,0,0.1);
  flex-shrink: 0;
  scroll-snap-align: center;
}
.img-row img:hover {
  transition: transform 0.6s ease;
  transform: scale(1.1,1.1);
}
.img-row::-webkit-scrollbar {
  display: none;
}
.footer {
  text-align: center;
  font-size: 1.8vh;
  color: red;
  color: white;
  padding: 3vw;
  background: #0d0d0d;
  font-weight: bold;
  margin-top: 2vh;
}
.second-section {
  display: flex;
  height: auto;
  overflow-x: auto;
  width: 100vw;
}
.second-section button {
  padding: 3vw;
  font-size: 2vh;
  margin-top: 1vh;
  margin-left: 5vw;
  margin-right: 5vw;
  font-weight: 900;
  margin-bottom: 1vh;
  color: white;
  background: #007bff;
  border: none;
  border-radius: 1vh;
}
button:focus {
  background: blue;
}
.video-section {
  width: auto;
  height: auto;
  margin-top: 1vh;
  text-align: center;
  margin-left: 10vw;;
}
.video-section video {
  height: auto !important;
  margin-top: 2vh;
  width: 80vw !important;
  margin-bottom: 2vh;
  height: auto;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #e0e0e0;
  }
  .tops {
    background: #1e1e1e;
    box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.5);
  }
  .content h3 {
    color: #aaa;
  }
  .info {
    color: #ccc;
  }
  .dn {
    background: #3b82f6;
    color: white;
    box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.5);
  }
  .card {
    background: #1e1e1e;
    box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.5);
  }
  .card p,
  .card li {
    color: #ddd;
  }
  .card h3 {
    color: #fff;
  }
  .section-title {
    color: #fff;
  }
  .img-row img {
    box-shadow: 0 1vh 2vh rgba(0,0,0,0.6);
  }
  .footer {
    color: black;
    background: white;
  }
}