body {
  margin: 0;
  overflow: hidden; /* prevents scrollbars */
  background-color: #E8DCC8;
  font-family: Arial, sans-serif;
  text-align: center;
}

header {
  background-color: #E8DCC8;
  color: #E8DCC8;
}


.box {
  background-color: #E8DCC8;
  margin: 30px auto;
  padding: 20px;
  width: 60%;
  border: 2px solid #ccc;
  border-radius: 10px;
}



button {
  background-color: #1f3a5f;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}
@keyframes bounceX {
  from { left: 0; }
  to { left: calc(100vw - 100px); }
}

/* Keyframes for vertical movement */
@keyframes bounceY {
  from { top: 0; }
  to { top: calc(100vh - 50px); }
}


.logo{
  animation: bounce 1s linear infinite;
  display: inline-block;
  width: 400px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  
}

.logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  
}



.michael:hover {
content: url("michael2.png");
}




/* spinning animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}





.sprinkles {
position: absolute;
  width: 200px;
  height: 100px;
  /* Apply two animations with different durations */
  animation: 
    bounceX 5s linear infinite alternate, 
    bounceY 3.3s linear infinite alternate;
}

#dvd {
  position: absolute;
  width: 120px;
}

#dvd:hover {
  transform: scale(1.1);
}


@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}