@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);

html, body {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  background-color: black;
}

.container {
  width: 100%;
  height: 100%;
  margin: 0 auto 0px;
  position: relative;
}

.main {
  width: 160vh;
  max-width: 100%;
  height: 100%;
  background: url(bg2.jpg) 0 0 no-repeat;
  background-size: contain;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: relative;
}

.video {
  padding-top: 15%;
  margin: 0 18% 0 18%;
}

video {
  width: 100%;
}

footer {
  position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    opacity: 0.3;
}







.boldog {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  overflow:hidden;
  position: absolute;
  left: 0;
  right: 0;
}

.boldog h1 {
  margin: 0;
  font-size:5em;
  font: bold 3.5vw/1.6 'Signika', sans-serif;
  user-select:none;
}

.boldog h1 span { 
  display:inline-block;
  animation:float 2s ease-in-out infinite;
}

@keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-1deg); }
  66%{ transform:translateY(1px) rotate(1deg); }
}

.boldog:hover span { animation:bounce 0.6s; }

@keyframes bounce {
  0%,100%{ transform:translate(0); }
  25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }
  50%{ transform:translateY(-20px) rotate(3deg) scale(1.1);  }
}

.boldog span:nth-child(4n) { color:hsl(50, 75%, 55%); text-shadow:1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); }
.boldog span:nth-child(4n-1) { color:hsl(135, 35%, 55%); text-shadow:1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); }
.boldog span:nth-child(4n-2) { color:hsl(155, 35%, 60%); text-shadow:1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); }
.boldog span:nth-child(4n-3) { color:hsl(30, 65%, 60%); text-shadow:1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); }

.boldog h1 span:nth-child(2){ animation-delay:.05s; }
.boldog h1 span:nth-child(3){ animation-delay:.1s; }
.boldog h1 span:nth-child(4){ animation-delay:.15s; }
.boldog h1 span:nth-child(5){ animation-delay:.2s; }
.boldog h1 span:nth-child(6){ animation-delay:.25s; }
.boldog h1 span:nth-child(7){ animation-delay:.3s; }
.boldog h1 span:nth-child(8){ animation-delay:.35s; }
.boldog h1 span:nth-child(9){ animation-delay:.4s; }
.boldog h1 span:nth-child(10){ animation-delay:.45s; }
.boldog h1 span:nth-child(11){ animation-delay:.5s; }
.boldog h1 span:nth-child(12){ animation-delay:.55s; }
.boldog h1 span:nth-child(13){ animation-delay:.6s; }
.boldog h1 span:nth-child(14){ animation-delay:.65s; }
.boldog h1 span:nth-child(15){ animation-delay:.70s; }
.boldog h1 span:nth-child(16){ animation-delay:.75s; }
.boldog h1 span:nth-child(17){ animation-delay:.80s; }
.boldog h1 span:nth-child(18){ animation-delay:.85s; }
.boldog h1 span:nth-child(19){ animation-delay:.90s; }
.boldog h1 span:nth-child(20){ animation-delay:.95s; }
.boldog h1 span:nth-child(21){ animation-delay:1s; }
.boldog h1 span:nth-child(22){ animation-delay:1.05s; }