* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
}

body {
  font-family:champion;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background:url(./background.png) no-repeat;
  background-size:cover;
}

@font-face {
  font-family:champion;
  src: url(Champion\ HTF-Welterweight\ Regular.otf);
}

/* pop-up */
/* #f06d06, */
body > div.swal-overlay.swal-overlay--show-modal  > div{
  position: relative;
  background-image:
  linear-gradient(
    to right, 
    #f03506,
    rgba(240, 199, 63, 0.849), 
    #f03506
  );
  border-radius: 10px; 
}
body > div.swal-overlay.swal-overlay--show-modal > div::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 4px; 
  border-radius: 10px; 
  background:linear-gradient(to right,
  rgba(240, 199, 63, 0.849), 
  rgba(240, 199, 63, 0.849), 
  #f03506,
  rgba(240, 199, 63, 0.849)
  );
  -webkit-mask: linear-gradient(#fff 0 0)content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}


body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-title
{
  color:#FFFF;
  font-size:30px;
  margin:13px 120px 0 120px;
  padding:0;
  display: flex;
  flex-direction: row;
  font-weight:normal;
}
body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-text
{
  color:#FFFF;
  font-size:45px;
  text-transform: uppercase;
  margin:0 0 13px 0;
}
body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-title:before, body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-title:after{
  content: "";
  flex: 1 1;
  border-bottom: 2px solid;
  margin: auto;
}
body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-title:before {
  margin-right: 10px
}
body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-title:after {
  margin-left: 10px
}


.title
{
  position: absolute;
  top: 3vh;
  height: 60px;
}

.gold-circle
{
  background-image: url(gold_circle_v1.png);
    width: 530px;
    height: 530px;
    /* background: transparent; */
    background-size: cover;
    /* position: relative; */
    /* position: relative; */
    align-items: center;
    justify-content: center;
    display: flex;
}

.mainbox {
  position: relative;
  /* width: 400px;
  height: 400px; */
  width: 430px;
  height: 430px;
}


.mainbox:after {
  position: absolute;
  content: "";
  width:25px;
  height:50px;
  background: url(./arrow.png) no-repeat;
  top:-13px;
  left:50%;
  margin-left: -5px;
  background-size: contain;
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  /* border: 10px solid transparent; */
  overflow: hidden;
  transition: all ease-in-out 5s;
  transform: rotate(90deg);
}

span {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
}

.spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: #ff5722;
  color: #fff;
  /* box-shadow: 0 5px 20px #000; */
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
  z-index: 1000;
}

.spin:active {
  width: 70px;
  height: 70px;
  font-size: 20px;
}

.mainbox.animate:after {
  animation: animateArrow 0.7s ease infinite;
}

audio {
  display: none;
}

@keyframes animateArrow {
  50% {
    right: -50px;
  }
}

@media (max-width: 320px) {
  body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-text
  {
    font-size:30px;
  }
}
@media (max-width: 375px) {
  body > div.swal-overlay.swal-overlay--show-modal > div > div.swal-title
  {
    font-size:30px;
    margin:13px 15% 0 15%;
  }
}

@media (max-width: 320px) {
 
  .gold-circle
  {
    width: 270px!important;
    height: 270px!important;
  }
  .mainbox {
    width: 200px!important;
    height: 200px!important;
  }
 
}

@media (max-width: 576px) {
  .mainbox {
    width: 260px;
    height: 260px;
  }
  .gold-circle
  {
    width: 350px;
    height: 350px;
  }
  .title{
    /* width:200px; */
    width:75%;
  }
  .spin{
    width:50px;
    height:50px;
  }
}


@media (min-height: 321px) and (max-height: 576px) {
  .mainbox {
    width: 260px;
    height: 260px;
  }
  .gold-circle
  {
    width: 350px;
    height: 350px;
  }
  .title{
    width:280px;
    top:10px;
    min-height:35px;
    height:35px;
  }
  .spin{
    width:50px;
    height:50px;
  }
}

@media (max-height: 320px) {
  .mainbox {
    width: 200px;
    height: 200px;
  }
  .gold-circle
  {
    width: 270px;
    height: 270px;
  }
  .title{
    width:200px;
    top:10px;
    height:25px;
  }
  .spin{
    width:50px;
    height:50px;
  }
 
}


@media(min-width:800px) and (min-height: 900px)  {
  .mainbox {
    width: 600px;
    height: 600px;
  }
  .gold-circle {
    width: 750px;
    height: 750px;
  }
  .mainbox:after {
    width:50px;
    height:80px;
    top:-25px
  }
  .spin{
    width:100px;
    height:100px;
  }
  .title{
    height:80px;
  }
}

@media(min-width:1000px) and (min-height: 1200px) {
  .mainbox {
    width: 800px;
    height: 800px;
  }
  .gold-circle {
    width: 1000px;
    height: 1000px;
  }
  .mainbox:after {
    width:50px;
    height:80px;
    top:-25px
  }
  .spin{
    width:100px;
    height:100px;
  }
  .title{
    height:100px;
  }
}