* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}


body {
  width: 100%;
  height: 100%;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: url("../img/teljeshatter.jpg") no-repeat center center fixed;
  background-size: cover;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

.section {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 5px solid white;
}

.section:last-child {
  border-right: none;
}

.hero {
  width: 70%;
  max-width: 300px;
  position: absolute;
  left: 50%;
  top: 60%; 
  transform: translate(-50%, -40%); 
}

@keyframes lebeg {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.belepes {
  position: absolute;
  left: 50%;
  top: 85%; 
  transform: translateX(-50%);
  padding: 12px 25px;
  font-size: 18px;
  background-color: #00bcd4;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pink {
  background-color: #E04C9E; 
}

.kek {
  background-color: #00bcd4; 
}

.sarga {
  background-color: #ff9800; 
}

.zold {
  background-color: #8bc34a; 
}

.lila {
  background-color: #9c27b0; /* lila */
}

.belepes:hover {
  filter: brightness(80%); /* kb. 20%-kal sötétebb */
}