body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  margin:0;
  height:100vh;
}

#trailMenuOverlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(245,245,245,0.2);
  padding: 10px 20px;
  border-radius: 10px;
  display: flex;
  gap: 20px;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.menu-item {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 160px;
}

.menu-btn {
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  border: none;
  width: 100%;
  text-align: center;
}

.black-btn { background-color:#000; }
.red-btn   { background-color:#c00; }
.blue-btn  { background-color:#00f; }
.green-btn { background-color:#0a0; }

.dropdown-list {
  display: none;
  margin-top: 8px;
  background: rgba(245,245,245,0.6);
  padding: 10px 15px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-list li {
  list-style: disc inside;
  margin-bottom: 6px;
}

.black-btn + .dropdown-list li a { color: #000; }
.red-btn + .dropdown-list li a   { color: #c00; }
.blue-btn + .dropdown-list li a  { color: #00f; }
.green-btn + .dropdown-list li a { color: #0a0; }

.dropdown-list li a:hover {
  color: #007BFF;
}

@media (max-width: 768px) {

#trailMenuOverlay {
  top: 10px;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  width: 95%;
}

.menu-item {
  min-width: auto;
  flex: 1 1 45%;
}

.menu-btn {
  font-size: 12px;
  padding: 6px 8px;
}

.dropdown-list {
  font-size: 12px;
}

}