:root {
  --bots-color: #ff5757;
}

.title1,
.title2 {
  display: block;
  float: right;
}

.rules h2 {
  text-align: center;
  font-size: 48px;
}

.rules p {
  text-align: center;
  font-size: 24px;
}

.rules ol {
  font-size: 16px;
  padding-left: 1.5rem;
}

.btn-section {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.options {
  margin: 10px auto;
  height: 150%;
}

.option {
  display: flex;
  flex-direction: row;
  margin: 5px;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}

.option div {
  margin-right: 30px;
}

.pokeball {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid #333;
  transform-origin: center bottom;
}

.base {
  background: #333;
  height: 80%;
  width: 100%;
  padding: 10%;
}

.upper-half {
  position: absolute;
  background: #f15324;
  height: 42%;
  width: 100%;
}

.lower-half {
  bottom: 0;
  position: absolute;
  background: white;
  height: 42%;
  width: 100%;
}

.inner-circle {
  border-radius: 50%;
  height: 20%;
  width: 20%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #333;
  transform: translate(-50%, -50%);
}

.indicator-inner {
  border-radius: 50%;
  height: 20%;
  width: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

.indicator {
  border-radius: 50%;
  height: 80%;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f64c4c;
  background: -webkit-radial-gradient(center, #f64c4c, #ff514f00);
  background: -moz-radial-gradient(center, #f64c4c, #ff514f00);
  background: radial-gradient(ellipse at center, #f64c4c, #ff514f00);

  opacity: 0;
}

@media screen and (max-width: 780px) {
  .title1,
  .title2 {
    display: block;
    margin-left: auto;
    float: none;
  }
}