/* --- Top Left Button (DevOps Notes) --- */
.top-left-button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.button-notes {
  --color: #373B44;
  --hover-color: linear-gradient(90deg, #00c6ff, #0072ff);
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 2px solid var(--color);
  border-radius: 8px;
  color: var(--color);
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.button-notes:hover {
  color: white;
  background: var(--hover-color);
  border-color: transparent;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(0, 114, 255, 0.5);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .top-left-button {
    top: 15px;
    left: 15px;
  }
  .button-notes {
    font-size: 14px;
    padding: 8px 16px;
  }
}