body, html {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  height: 100%;
  background-color: #121212;
  color: white;
  transition: background-color 0.5s, color 0.5s;
}

.hero {
  background: url('/img/background.jpg') no-repeat center center/cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.btn-group .btn {
  margin: 0 10px;
}