body {
  font-family: Arial, sans-serif;
  background-color: #121212; /* Dunkler Hintergrund */
  color: #e0e0e0; /* Helle Schriftfarbe */
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  font-family: 'futura';
  color: white;
  letter-spacing: 20px;
  font-size: 30px;
}

#umfragen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.umfrage {
  background-color: #1e1e1e; /* Dunkleres Panel */
  border: 1px solid #333;
  padding: 20px;
  margin: 10px;
  width: 90%;
  max-width: 800px;
  text-align: center;
  color: #e0e0e0;
}

button {
  background-color: #2196f3; /* Modernes Blau */
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  /*margin-top: 20px;*/
  display: block;
  margin: 20px auto 0 auto; /* Oben 20px Abstand, zentriert (auto) */
}

button:hover {
  background-color: #1976d2;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #1e1e1e;
  color: #e0e0e0;
}

table, th, td {
  border: 1px solid #444;
}

th, td {
  padding: 10px;
  text-align: left;
}


/* Beer */


h2 {
  margin: 0 auto;
  width: 200px;
  font-size: 18px;
  text-align: center;
  font-family: 'Lato', Arial, sans-serif;
  color: whiteSmoke;
}

#container {
  height: 185px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: -10px;
  width: 124px;
}

#container div { position: absolute; }

.pour {
  position: absolute;
  left: 45%;
  width: 10px;
  height: 0px;
  background-color: #edaf32;
  border-radius: 5px;
}

#beaker {
  border: 5px solid #FFF;
  border-top: 0;
  border-radius: 0 0 15px 15px;
  height: 100px;
  left: 7px;
  bottom: 0;
  width: 100px;
}

#beaker:before,
#beaker:after {
  border: 5px solid #FFF;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  content: '';
  height: 15px;
  position: absolute;
  top: -20px;
  width: 15px;
}

#beaker:before { left: -25px; }
#beaker:after { right: -25px; }

#liquid {
  background-color: #edaf32;
  border: 5px solid #edaf32;
  border-radius: 0 0 10px 10px;
  bottom: 0;
  height: 0px;
  overflow: hidden;
  width: 90px;
}

#liquid:after {
  background-color: rgba(255, 255, 255, 0.25);
  bottom: -5px;
  content: '';
  height: 100px;
  left: -20px;
  position: absolute;
  transform: rotate(30deg);
  -webkit-transform: rotate(15deg);
  width: 55px;
}

#liquid .bubble {
  -webkit-animation-name: bubble;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  background-color: rgba(255, 255, 255, 0.2);
  bottom: 0;
  border-radius: 5px;
  height: 10px;
  width: 10px;
}

@-webkit-keyframes bubble {
  0% { bottom: 0; }

  50% {
    background-color: rgba(255, 255, 255, 0.2);
    bottom: 40px;
  }

  100% {
    background-color: rgba(255, 255, 255, 0);
    bottom: 80px;
  }
}

.bubble1 {
  left: 5px;
  -webkit-animation-delay: 1000ms;
  -webkit-animation-duration: 1000ms;
}

.bubble2 {
  left: 25px;
  -webkit-animation-delay: 700ms;
  -webkit-animation-duration: 1100ms;
}

.bubble3 {
  left: 50px;
  -webkit-animation-delay: 1200ms;
  -webkit-animation-duration: 1300ms;
}

.bubble4 {
  left: 65px;
  -webkit-animation-delay: 1100ms;
  -webkit-animation-duration: 700ms;
}

.bubble5 {
  left: 85px;
  -webkit-animation-delay: 1300ms;
  -webkit-animation-duration: 800ms;
}

/* Foam */

.beer-foam {
  position: absolute;
  bottom: 5px;
}

.foam-1, .foam-2, .foam-3, .foam-4, 
.foam-5, .foam-6, .foam-7 {
  float: left;
  position: absolute;
  z-index: 999;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background-color: #fefefe;
}
.foam-1 {
  top: -15px;
  left: -5px;
}
.foam-2 {
  top: -17px;
  left: 10px;
}
.foam-3 {
  top: -12px;
  left: 25px;
}
.foam-4 {
  top: -17px;
  left: 40px;
}
.foam-5 {
  top: -15px;
  left: 55px;
}
.foam-6 {
  top: -10px;
  left: 70px;
}
.foam-7 {
  top: -15px;
  left: 80px;
}

/* Drunk Text */

.animated {
  -webkit-animation-fill-mode:both;
     -moz-animation-fill-mode:both;
          animation-fill-mode:both;
  
  -webkit-animation-duration:5s;
     -moz-animation-duration:5s;
          animation-duration:5s;
  
  -webkit-animation-delay:3.5s; 
     -moz-animation-delay:3.5s;
          animation-delay:3.5s;
}

.animated.drunk {
  -webkit-animation-duration:2s;
     -moz-animation-duration:2s;
          animation-duration:2s;
}

@-webkit-keyframes drunk {
    0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
  20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
	40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
	80% { -webkit-transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; opacity: 1; }
	100% { -webkit-transform: translateY(350px); opacity: 0; }
}

@-moz-keyframes drunk {
	0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	100% { -moz-transform: translateY(350px); opacity: 0; }
}

@keyframes drunk {
	0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
	20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
	40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
	80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
	100% { transform: translateY(350px); opacity: 0; }
}

.drunk {
	-webkit-animation-name: drunk;
	-moz-animation-name: drunk;
	animation-name: drunk;
}