body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#pokeball {
  width: 100vw;
  height: 100vh;
  transition: all 2s;
}

#top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50vh;
  background-color: black;
}

#bottom {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100vw;
  height: 50vh;
  background-color: black;
  border-top: 25px solid black;
  margin-bottom: -25px;
}

#center {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  z-index: 15;
  width: 128px;
  height: 128px;
  border: 25px solid black;
  border-radius: 50%;
  background: rgb(203, 203, 203);
}

#clicky {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 60px;
  height: 60px;
  border: 15px solid rgb(255, 255, 255);
  border-radius: 50%;
  background: rgb(255, 255, 255);
}

#clicky:hover {
  cursor: pointer;
  background-color: white;
}

#top.stock {
  background-color: red;
}

#bottom.stock {
  background-color: white;
}

#top.tgmain {
  background-color: rgba(190,23,23,255);
}

#bottom.tgmain {
  background-color: rgba(190,23,23,255);
}

#center.tgmain {
  background: rgba(190,23,23,255);
}

#clicky.tgmain {
  background: black;
  border: 15px solid black;
}

#top.tgserbest {
  background-color: rgba(9,174,9,255);
}

#bottom.tgserbest {
  background-color: rgba(9,174,9,255);
}

#center.tgserbest {
  background: rgba(9,174,9,255);
}

#clicky.tgserbest {
  background: black;
  border: 15px solid black;
}

#top.dc {
  background-color: rgba(118,68,255,255);
}

#bottom.dc {
  background-color: rgba(118,68,255,255);
}

#center.dc {
  background: rgba(118,68,255,255);
}

#clicky.dc {
  background: black;
  border: 15px solid black;
}

#top.tw {
  background-color: rgba(0,172,238,255);
}

#bottom.tw {
  background-color: rgba(0,172,238,255);
}

#center.tw {
  background: rgba(0,172,238,255);
}

#clicky.tw {
  background: black;
  border: 15px solid black;
}

#top.blog {
  background-color: rgba(23,184,190,255);
}

#bottom.blog {
  background-color: rgba(23,184,190,255);
}

#center.blog {
  background: rgba(23,184,190,255);
}

#clicky.blog {
  background: black;
  border: 15px solid black;
}

#top.konsey {
  background-color: rgba(0,80,255,255);
}

#bottom.konsey {
  background-color: rgba(0,80,255,255);
}

#center.konsey {
  background: rgba(0,80,255,255);
}

#clicky.konsey {
  background: black;
  border: 15px solid black;
}

#top.duyuru {
  background-color: rgba(252,134,29,255);
}

#bottom.duyuru {
  background-color: rgba(252,134,29,255);
}

#center.duyuru {
  background: rgba(252,134,29,255);
}

#clicky.duyuru {
  background: black;
  border: 15px solid black;
}

#top.ori {
  background-color: rgba(188,197,204,255);
}

#bottom.ori {
  background-color: rgba(188,197,204,255);
  border-top: 25px solid rgba(23,33,43,255);
}

#center.ori {
  background: rgba(1,173,181,255);
  border: 25px solid rgba(23,33,43,255);
}

#clicky.ori {
  background: rgba(51,59,69,255);
  border: 15px solid rgba(51,59,69,255);
}

#accent1.great {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30vw;
  height: 15vh;
  background-color: #cd2e28;
  z-index: 20;
  transform: translate(-32px, 32px) rotate(30deg);
  border-radius: 45%;
  transition: all 0.5s;
}

#accent2.great {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30vw;
  height: 15vh;
  background-color: #cd2e28;
  z-index: 20;
  transform: translate(32px, 32px) rotate(-30deg);
  border-radius: 45%;
  transition: all 0.5s;
}

#top.great {
  background-color: #2789c6;
}

#bottom.great {
  background-color: white;
}

#top.ultra {
  background-color: black;
}

#bottom.ultra {
  background-color: white;
}

#accent1.ultra {
  position: absolute;
  top: 0px;
  left: 15%;
  width: 8vw;
  height: 35vh;
  background-color: #f3ec18;
  z-index: 20;
  transition: all 0.5s;
}

#accent2.ultra {
  position: absolute;
  top: 0px;
  right: 15%;
  width: 8vw;
  height: 35vh;
  background-color: #f3ec18;
  z-index: 20;
  transition: all 0.5s;
}

#top.master {
  background-color: #3007dd;
}

#botom.master {
  background-color: white;
}

#accent1.master {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30vw;
  height: 30vw;
  background-color: #f701a9;
  z-index: 20;
  border-radius: 50%;
  transform: translate(-10vw, -10vw);
  transition: all 0.5s;
}

#accent2.master {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30vw;
  height: 30vw;
  background-color: #f701a9;
  z-index: 20;
  border-radius: 50%;
  transform: translate(10vw, -10vw);
  transition: all 0.5s;
}