/* -----------------------------------------------------------
// Party | Countdown | Interactive Playlist | Thank You Page
// Christian Marck (Typ mit Bart un Kapp, Beckingham, Germany)
// 10.02.2026 22:05 MEZ
// -----------------------------------------------------------
*/


/* BASICS
-----------------------------------------------------------*/
html {
  overflow-x: hidden;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
}

@media only screen and (max-width: 1400px) {
  body { /* Break long words and hyphenate them 
    -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
          */
  } 
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1c1f24;
}

section.countdown {
  flex-direction: column;
  text-align: center;
  min-height: 100vh;
  background-image: radial-gradient(rgba(39,43,50,.9),rgba(17,19,22,.9)),url(../img/bg.jpg);
  background-position: center;
  background-size: cover;
  transition: padding .3s;
}

#countdown {
  margin: 0;
  font-size: 120px;
  font-weight: bold
}

.instructions {
  color: #fff;
  font-size: 84px;
  list-style-type: none;
  text-shadow: 2px 2px 0 #aa2d3f;
  text-align: center;
  transform: rotate(-5deg);
  font-weight: bold
}

.instructions li {
  margin: 0;
  padding: 0;
}

.instructions .bold {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}

.small {
  font-size: 12pt;
  color: white;
}

.qrcode {
  /* border-radius: 50% 50% 50% 50% / 25% 25% 75% 75% ;*/
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  max-width: 70%; 
}

.shake:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@media only screen and (max-width: 1024px) {
  .instructions {
    padding-left: 10px;
    font-size: 46px;
    max-width: 75%;
  }
  
  #countdown {
    font-size: 66px;
  }
}

@media only screen and (max-width: 360px) {
  .instructions {
    font-size: 35px;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  #countdown {
    font-size: 50px;
  }
}