@import url('https://fonts.googleapis.com/css?family=Roboto');

.peg, .wheelSVG {
 visibility: hidden;
 fill: #181818;
}

body, html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.centerCircle, .valueContainer, .wheelOutline, .wheelText {
 pointer-events: none;
}

body, html {
 text-align: center;
}


.toast {
 background-color: rgba(32,106,93, 1);
 border: 1px solid #fff;
 display: none;
}

body {
 background-color: rgba(32,106,93, 1);
 overflow: hidden;
}

body, html {
 margin: 0;
 padding: 0;
}

.wheelContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding-bottom: 100%;
  overflow: visible;
  margin-top: 20vh;
}

.wheelSVG {
  display: inline-block;
  position: absolute;
  overflow: visible;
  top: 0;
  left: 0
}

.wheelText {
 text-anchor: middle;
 font-family: 'Roboto', sans-serif;
 -webkit-user-select: none;
 user-select: none;
 writing-mode: vertical-lr;
}

.toast {
 position: absolute;
 border-radius: 12px;
 opacity: 0;
 margin-bottom: 200px;
}

.toast p {
 clear: both;
 font-family: 'Roboto', sans-serif;
 margin: 23px;
 font-size: 30px;
 color: #ededed;
 letter-spacing: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 line-height: 32px;
 -webkit-transition: line-height .2s ease;
 transition: line-height .2s ease;
}

::placeholder {
  color:#F6F1E1;
}

.voucherInput {
  outline: none;
  border-radius: 8px;
  min-height: 45px;
  border: 2px solid #FF7E5F;
  margin: 15px 15px 15px;
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  line-height: 1.5em;
  background-color: #1B4D3E;
  color: #F6F1E1;
  caret-color: #F6F1E1;
  padding: 10px 25px;
}

.voucherBtn {
  position: relative;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  line-height: 1.5em;
  margin: 10px 15px 10px;
  background:#FF7E5F;
  border-top: 3px solid #FF7E5F;
  border: 2px solid #FF7E5F;
  color: #F6F1E1;
  border-radius: 8px;
  padding: 8px 20px 8px;
  margin : 0 auto;
}

.spinBtn {
  display:none;
}

.spinBtn {
  position: relative;
  top:0;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  line-height: 1.5em;
  margin: 10px 15px 10px;
  background:#FF7E5F;
  border-top: 3px solid #FF7E5F;
  border: 2px solid #FF7E5F;
  color: #F6F1E1;
  border-radius: 8px;
  padding: 8px 20px 8px;
  margin : 0 auto;
}

.logo-img {
  margin: 15px 15px;
}

@media only screen and (max-width: 480px) {
 .toast p, .toast span {
  font-size: 18px;
  line-height: 18px;
 }

 .wheelContainer{
  margin-top: 10vh;
 }

 .logo-img {
  max-width: 300px;
 }
 
}

/* @media only screen and (min-width: 481px) and (max-width: 800px) {
 .toast p, .toast span {
  font-size: 38px;
  line-height: 38px;
 }
}
@media only screen and (min-width: 801px) {
 .toast p, .toast span {
  font-size: 20px;
  line-height: 60px;
 }
} */

@media only screen and (max-height: 480px) {
 .toast p, .toast span {
  font-size: 33px;
  line-height: 35px;
 }
 button {
  font-size: 22px;
  padding: 10px;
  width: 40%;
 }
 .wheelContainer {
  top: 70px;
 }
}
button:focus {
 outline: 0;
}

@media (min-width:481px)  {
  .toast{
    display:none;
  }
}