/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/
body {
  font-family: arial;
  padding: 0;
  margin: 0;
  background-color: #221345;
  background-image: url(./Background.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 1080px auto;
}
.logo {
  width: 980px;
  margin-top: 50px;
  margin-bottom: -290px;
  animation: pulse 3s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1); /* Logo startet in normaler Größe und endet in normaler Größe */
  }
  50% {
    transform: scale(1.04); /* Logo vergrößert sich um 10% */
  }
}
.oozepower {
  animation: pulse2 3s infinite ease-in-out;
  animation-delay: 900ms
}
@keyframes pulse2 {
  0%, 100% {
    transform: scale(1); /* Logo startet in normaler Größe und endet in normaler Größe */
  }
  50% {
    transform: scale(1.04); /* Logo vergrößert sich um 10% */
  }
}
.wrapper {
  display: block;
  width: 1080px;
  height: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background-image: url(./stele-background.png);
  background-size: 1080px auto;
  background-position: top center;
  background-repeat: none;
}
/* Sets the background image for the wheel */
td.the_wheel {
  background-image: url(./spinner-background.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px auto;
}
/* Do some css reset on selected elements */
h1, p {
  margin: 0;
}
.off {
  display: none
}
.on {
  display: inline-block;
}
.power_controls {
  cursor: pointer;
}
.power_controls p {
  font-size: 20px;
}
div.html5_logo {
  margin-left: 70px;
}
/* Styles for the power selection controls */
table.power {
  background-color: #cccccc;
  cursor: pointer;
  border: 1px solid #333333;
}
table.power th {
  background-color: white;
  cursor: default;
}
span {
  padding: 21px 8px;
  font-weight: bold
}
span:last-child {
  border-radius: 0 10px 10px 0;
  padding-right: 40px
}
.ooze-kanister {
  display: block;
  background-size: 244px auto;
  background-repeat: no-repeat;
  background-image: url("./ooze-kanister.png");
  width: 244px;
  margin: 0 auto;
  height: 70px;
  line-height: 42.5px;
  padding: 7px 0
}
.ooze {
  background: rgb(199, 213, 65);
  background: linear-gradient(90deg, rgba(199, 213, 65, 0.9) 0%, rgba(153, 192, 83, 0.1) 50%, rgba(31, 134, 64, 0.1) 100%);
  width: 194px;
  padding: 8px 0;
  border-radius: 8px;
  margin: -2px auto 0;
  text-align: right;
  color: white;
  font-size: 14px
}
span.pw1 {
  background: rgb(193, 209, 68);
  background: linear-gradient(90deg, rgba(193, 209, 68, 1) 0%, rgba(153, 192, 83, 1) 50%);
}
span.pw2 {
  background: rgb(153, 192, 83);
  background: linear-gradient(100deg, rgba(153, 192, 83, 0.9) 20%, rgba(31, 134, 64, 1) 90%);
}
span.pw3 {
  background: rgb(153, 192, 83);
  background: linear-gradient(110deg, rgba(31, 134, 64, 1) 30%, rgba(153, 192, 83, 1) 100%);
}
/* Style applied to the spin button once a power has been selected */
.clickable {
  cursor: pointer;
}
/* Other misc styles */
.margin_bottom {
  margin-bottom: 5px;
}
#resultPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000
}
.resultPopupContent {
  background-image: url(./stele-background.png);
  background-size: 1080px auto;
  background-position: center center;
  background-repeat: none;
}
#popupContent {
  min-height: 900px;
  vertical-align: middle;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  text-align: center;
}
#popupContent h1 {
  font-size: 2.5em;
  color: #FFF251;
  text-shadow: 2px 2px 10px #000
}
#prizeText {
  font-size: 2em;
  color: #FFF251;
  text-shadow: 2px 2px 10px #000
}
#popupContent button {
  font-size: 1.5em;
  padding: 12px 20px;
  background-color: #FFF251;
  color: #000;
  border-radius: 15px;
  margin: 0 10px
}
.close {
  float: right;
  width: 60px;
  cursor: pointer;
  margin-left: -60px
}
iframe {
  background-color: #9550A0;
  padding: 20px;
  border-radius: 35px;
  height: 420px;
  border: 3px #9550A0 solid;
  margin: 0 auto;
  width: 90%;
}