body {
  /* height: 100vh; */
  /* width: 100vw; */
  /* overflow: hidden; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */

  /* remove scorll bar */
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url("./bg.png");
  background-size: cover;
}
#wheel_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
/* Sets the background image for the wheel */
td.the_wheel {
  background-image: url(./wheel_back.png);
  background-position: center;
  background-repeat: no-repeat;
}

/* 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;
}

td.pw1 {
  background-color: #6fe8f0;
}

td.pw2 {
  background-color: #86ef6f;
}

td.pw3 {
  background-color: #ef6f6f;
}

/* Style applied to the spin button once a power has been selected */
.clickable {
  cursor: pointer;
}

/* Other misc styles */
.margin_bottom {
  margin-bottom: 5px;
}
#reset_segments {
  background: transparent;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  border-style: none;
  background-position: center;
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  & img{
    width: 100%;
  }
}
#indicator {
  position: absolute;
  left: calc(50% - 2.5vw);
  top: calc(50% - 3.25vw);
  width: 5vw;
  height: 6.5vw;
  object-fit: contain;
  object-position: center;
  /* margin-top: -8vh; */
  /* margin-left: -8vw; */
}
#restart_button {
  background: url("./restart.png");
  background-size: contain;
  cursor: pointer;
  border-style: none;
  width: 10vw;
  height: 10vh;
  background-position: center;
  background-repeat: no-repeat;
}
#spin_button {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 5rem;
  --bs-btn-font-size: 8rem;
  --bs-btn-border-radius: 50rem;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  width: 200px;
  height: 50px;
  display: flex;
  background: url("./spin.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
  border: 0;
  cursor: pointer;
}
.result-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0 0 0 / 70%);
  display: flex;
  font-size: 3rem;
  flex-direction: column;
  color: white;
  justify-content: center;
  align-items: center;
}

.result-backdrop h1 {
  font-size: 5rem;
  margin-bottom: 20px;
}
.result-backdrop h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}
.result-backdrop h4 {
  font-size: 2rem;
  margin-bottom: 20px;
  display: flex;
  color: orangered;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.result-backdrop h3 {
  margin-bottom: 20px;
}
.answers-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-left: 10%;
  justify-content: center;
  min-width: 15%;
  max-width: 60%;
}
.result-backdrop h5 {
  display: flex;
  flex-direction: row;
  text-align: left;
  margin-bottom: 12px;
  margin-top: 12px;
  color: orangered;
  align-content: start;
  font-weight: normal;
}
#intro {
  z-index: 9999;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.logo_image {
  width: 250px;
  height: 250px;
  margin-inline-start: 24px;
  object-fit: contain;
  position: absolute;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.result-backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}