html {
  scroll-behavior: smooth;
}

.w3-button:hover {
  transition: all 0.3s ease;
}

.w3-card-4:hover, .w3-card:hover {
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

a {
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .w3-container {
    padding: 16px !important;
  }
  
  .w3-padding-32 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

.w3-hover-pale-red:hover {
  background-color: #ffcccb !important;
}

.w3-input {
  transition: border-color 0.3s ease;
}

.w3-input:focus {
  border-color: #5c6bc0 !important;
  outline: none;
}

footer {
  margin-top: 40px;
}

.w3-bar {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
}

img {
  transition: opacity 0.3s ease;
}

img:hover {
  opacity: 0.9;
}