@import url(https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300&display=swap);
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  
  
*:not(input):not(textarea) {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none
}

*
{
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

html,
body
{
    height: 100%;
    background: linear-gradient( rgba(102,227,240,1) 0%, rgba(19,173,252,1) 100%);
    overflow: hidden;
    overscroll-behavior-y: contain;
    margin: 0; 
    padding: 0;  
    touch-action: none;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

.container {
    height: 20vh;
    display: grid;
    place-items: center;
}

h1 {
    font-size: 8rem;
    text-transform: uppercase;
    color: white;
    z-index: 1;
}

#level-progress{
    position: absolute;
    top: 12%;
    left: 45%;
    text-align: center;
    color: white;
    z-index: 4;
    font-family: 'Londrina Solid', cursive;
    font-size: 10pt;
}

#level{
    position: fixed;
    bottom: 100%;
    left: 50%;
    color: white;
    z-index: 4;
    font-family: 'Londrina Solid', cursive;
    font-size: 20pt;
    font-weight: bold;
    transform: translate(-50%);
   
}

#current-level{
    position: absolute;
    top: -5%;
    left: 0%;
    text-align: center;
    color: white;
    z-index: 4;
    font-family: 'Londrina Solid', cursive;
    font-weight: 700;
    font-size: 15pt;
    transform: translate(-60%);
}

#next-level{
    position: absolute;
    top: -10%;
    left: 100%;
    text-align: center;
    color: white;
    z-index: 4;
    font-family: 'Londrina Solid', cursive;
    font-weight: 700;
    font-size: 15pt;
    transform: translate(-30%);
}

.progress-bar{
    position: absolute;
    top: 10%;
    left: 50%;
    max-height: 31px;
    max-width: 250px;
    transform:translateX(-50%);
    background: url(bar.9ac6093cf733cd6bf84112e4951761e1.png) 0 0;
    background-size: 100% 100%;
    z-index: 1;
    visibility: hidden;
}

.fillBar{
    position: relative;
    top: 0px;
    left: 0px;
    height: 31px;
    width: 250px;
    background: url(greenbar.94ad9b9a6d19a07ffc78bc406088390e.png) no-repeat 0 0;
    background-size: 100% 100%;
    clip-path: inset(0px 100% 0px 0px);
    z-index: 2;
}

.star1{
    position: relative;
    top: -57px;
    left: -15%;
    height: 66px;
    width: 70px;
    background: url(star.bfd311f890d0efe26d9a7e15f2b3641d.png) no-repeat 0 0;
    background-size: 100% 100%;
    z-index: 3;
}

.star2{
    position: relative;
    top: -123px;
    left: 87%;
    height: 66px;
    width: 70px;
    background: url(star.bfd311f890d0efe26d9a7e15f2b3641d.png) no-repeat 0 0;
    background-size: 100% 100%;
    z-index: 3;
}

.svg{
    position: fixed;
    width: 1280px;
    height: 1280px;
    left: 50%;
    margin-left: -640px;
    pointer-events: none;
    z-index: 20;
}

.hide, .hide2{
    display: none;
}

.unChosenSkin{
    content:url(box.8c648e9a1cf1a73a9bee6712fbdee183.png);
}

.notPurchased2{
    content:url(100c.0ab26e85e5847b30da3be1f39f667c32.png);
}

.notPurchased3{
    content:url(200c.8f7aa99f98c375305f842f2a2312267d.png);
}

.notPurchased4{
    content:url(400c.99ca8f04939491ed478c277cfcc5faa1.png);
}

.notPurchased5{
    content:url(800c.354c63274deffd1bc58bd75399deccba.png);
}

.notPurchased6{
    content:url(1600c.b95ff6b0ab6bd1aca169d88078256fe5.png);
}

.chosenSkin{
    content:url(box2.2a543a67a42cf5c8a1cf9141b073e11d.png);
}

#coinText{
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    text-align: right;
    color: rgba(255, 202, 41, 255);
    font-size: 2em;
    font-weight: bold;
    font-family: 'Londrina Solid', cursive;
}

.ui{
    height:100%
}

#gameover-ui{
    left: 0%;
    z-index: 6;
    height: 100%;
}

#sunburst{
    content:url(sunburst.6c51ff0e5a725cd5a2b992b1a0782704.png);
    transform: translate(0%,-50%);
    z-index: 6;
}


#sunburstcontainer{
    height: 100%;

    display: flex;
  
    align-items: center;

    justify-content: center;
}

.rotating {
    -webkit-animation: rotating 6s linear infinite;
    -moz-animation: rotating 6s linear infinite;
    -ms-animation: rotating 6s linear infinite;
    -o-animation: rotating 6s linear infinite;
    animation: rotating 6s linear infinite;
    
}


#perfect{
    width: 40%;
    height: auto;
    position: fixed;
    top: 10%;
    right: 50%;
    transform: translate(50%);
    z-index: 7;
    content:url(perfect.888b344b48f709ea7a132d5acca5e7af.png);
    transform-origin: center;
}

#coins{
    width: 15%;
    height: auto;
    position: fixed;
    top: 35%;
    right: 50%;
    transform: translate(50%);
    z-index: 7;
    content:url(coins.f63607aaf94fd3f9016afc243535b82a.png);
    transform-origin: center;
}


@keyframes up-down1{
    0%{
        transform: translate(50%,0%);
    }
    50%{
        transform: translate(50%,3%);
    }
    100%{
        transform: translate(50%,0%);
    }
}

@keyframes up-down2{
    0%{
        transform: translate(50%,0%);
    }
    50%{
        transform: translate(50%,-3%);
    }
    100%{
        transform: translate(50%,0%);
    }
}



.g100{
    position: absolute;
    left: 50%;
    top: 62%;
    width: 10%;
    transform: translate(-50%, -50%);
    height: auto;
    right: 50%;
    z-index: 6;
    content:url(25.f7da3e35fb0a226f77c95816fa661ba3.png);
    transform-origin: center;
}

#rewardedButton{
    font-family: 'Londrina Solid', cursive;
    font-weight: 1000;
    font-size: 1.5em;
    width: 225px;
    height: 101px;
    background: url(button.70fa4aede81fd780945ff223404c9d55.png) no-repeat 0 0;
    background-size: contain;
    left: 50%;
    bottom: 18%;
    position: fixed;
    z-index: 6;
    transform: translate(-50%);
    border: none;
    color: #db7a28;
}

#loadingButton{
    font-family: 'Londrina Solid', cursive;
    font-weight: 1000;
    font-size: 2.5em;
    width: 225px;
    height: 101px;
    background: url(playButton.cbf46d66a743c889b24a205d564b60e8.png) no-repeat 0 0;
    background-size: contain;
    left: 50%;
    bottom: 45%;
    position: fixed;
    z-index: 20;
    transform: translate(-50%,50%);
    border: none;
    color: #db7a28;
}
    

#nothanks{
    background: none;
    text-align: center;
    left: 50%;
    bottom: 10%;
    position: fixed;
    z-index: 6;
    transform: translate(-50%);
    border: none;
    color: white;
    font-family: 'Londrina Solid', cursive;
    font-weight: 1000;
    font-size: 1.5em;
}


#particle1{
    position: absolute;
    top: 0%;
    left: 50%;
    width: 201px;
    height: 180px;
    background: url(particle.6800b8d9e204912728dd9e83153761a7.png) no-repeat 0 0;
    z-index: 7;
    animation: particle1 1s alternate infinite ;
}

#particle2{
    position: absolute;
    top: 3%;
    right: 50%;
    width: 201px;
    height: 180px;
    background: url(particle.6800b8d9e204912728dd9e83153761a7.png) no-repeat 0 0;
    z-index: 7;
    transform: scale(0.3) rotate(15deg);
    animation: particle2 1s alternate infinite 0.1s ;
}

#particle3{
    position: absolute;
    top: 17%;
    left: 50%;
    width: 201px;
    height: 180px;
    background: url(particle.6800b8d9e204912728dd9e83153761a7.png) no-repeat 0 0;
    z-index: 7;
    transform: scale(0.3) rotate(-10deg);
    animation: particle3 1s alternate infinite 0.1s ;
}

#particle4{
    position: absolute;
    top: 37%;
    left: 50%;
    width: 201px;
    height: 180px;
    background: url(particle.6800b8d9e204912728dd9e83153761a7.png) no-repeat 0 0;
    z-index: 7;
    transform: scale(0.5);
    animation: particle4 1s alternate infinite ;
}

#particle5{
    position: absolute;
    top: 45%;
    left: 47%;
    width: 201px;
    height: 180px;
    background: url(particle.6800b8d9e204912728dd9e83153761a7.png) no-repeat 0 0;
    z-index: 7;
    transform: scale(0.2) rotate(-15deg) translate(-50%);
    animation: particle5 1s alternate infinite ;
}

#particle6{
    position: absolute;
    top: 40%;
    right: 50%;
    width: 201px;
    height: 180px;
    background: url(particle.6800b8d9e204912728dd9e83153761a7.png) no-repeat 0 0;
    z-index: 7;
    transform: scale(0.2) rotate(10deg);
    animation: particle6 1s alternate infinite 0.2s;
}


.shop{
    height: 100%;
    background-color: linear-gradient( rgba(102,227,240,1) 0%, rgba(19,173,252,1) 100%);
    z-index: 15;
}

#line{
    width: 40%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -500%);
    z-index: 7;
    content:url(Line.bf1f12622b7fb4276f0246527bb950da.png);
    transform-origin: center;
}

#shopBox1{
    width: 8%;
    height: auto;
    top: 50%;
    left: 40%;
    transform: translate(-50%);
    z-index: 7;
    transform-origin: center;
}

#shopBox2{
    width: 8%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    z-index: 7;
    transform-origin: center;
}

#shopBox3{
    width: 8%;
    height: auto;
    top: 50%;
    left: 60%;
    transform: translate(-50%);
    z-index: 7;
    transform-origin: center;
}

#shopBox4{
    width: 8%;
    height: auto;
    top: 75%;
    left: 40%;
    transform: translate(-50%);
    z-index: 7;
    transform-origin: center;
}

#shopBox5{
    width: 8%;
    height: auto;
    top: 75%;
    left: 50%;
    transform: translate(-50%);
    z-index: 7;
    transform-origin: center;
}

#shopBox6{
    width: 8%;
    height: auto;
    top: 75%;
    left: 60%;
    transform: translate(-50%);
    z-index: 7;
    transform-origin: center;
}

#skin1{
    width: 8%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 40%;
    transform: translate(-50%);
    z-index: 7;
    content:url(sp1.a023b0da04e4af706a4b04ca89f1e0ea.png);
    transform-origin: center;
}

#skin2{
    width: 8%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    z-index: 7;
    content:url(sp2.8cce5c36da00123489dce885802f9bb6.png);
    transform-origin: center;
}

#skin3{
    width: 8%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 60%;
    transform: translate(-50%);
    z-index: 7;
    content:url(sp3.df17def37c7692989d56eca605c93068.png);
    transform-origin: center;
}

#skin4{
    width: 8%;
    height: auto;
    position: fixed;
    top: 75%;
    left: 40%;
    transform: translate(-50%);
    z-index: 7;
    content:url(sp4.f83cad9aac336593fab6bdc20f9d371d.png);
    transform-origin: center;
}

#skin5{
    width: 8%;
    height: auto;
    position: fixed;
    top: 75%;
    left: 50%;
    transform: translate(-50%);
    z-index: 7;
    content:url(sp5.72a902589576d49e8e9e3d4e5b2692b9.png);
    transform-origin: center;
}

#skin6{
    width: 8%;
    height: auto;
    position: fixed;
    top: 75%;
    left: 60%;
    transform: translate(-50%);
    z-index: 7;
    content:url(sp6.1b90ec0d3e5769f436b311b7b27a5577.png);
    transform-origin: center;
}

#shopText{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    color: rgba(255, 202, 41, 255);
    z-index: 7;
    font-family: 'Londrina Solid', cursive;
    font-weight: 700;
    font-size: 25pt;
    transform: translate(-50%,-300%);
}

#closeButton{
    width: 4%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(250%,-190%);
    z-index: 7;
    content:url(Close.167c8e925eece63d3b93be3471a235ee.png);
    transform-origin: center;
}

.grayOut{
    
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
        filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.unGray{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.boxContainer{
    position: relative;
    
}

.shopBoxText{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.Box{
    position: fixed;
    text-align: center;
    color: white;
}

#shopButton{
    position: sticky;
    left: 4%;
    top: 20%;
    width: 10%;
    transform: translate(-50%, -50%);
    height: auto;
    z-index: 6;
    content:url(shopButton.197cab1d63d274295eefdf231d4675a1.png);
    transform-origin: center;
    visibility: hidden;
}


@keyframes particle1{

    0%   {transform: scale(0.3);}
    100% {transform: scale(0.2);}

}

@keyframes particle2{

    0%   {transform: rotate(15deg) scale(0.3);}
    100% {transform: rotate(15deg) scale(0.2);}

}

@keyframes particle3{

    0%   {transform: rotate(-10deg) scale(0.3);}
    100% {transform: rotate(-10deg) scale(0.2);}

}

@keyframes particle4{

    0%   {transform: scale(0.5);}
    100% {transform: scale(0.3);}

}

@keyframes particle5{

    0%   {transform: rotate(-15deg) scale(0.2);}
    100% {transform: rotate(-15deg) scale(0.1);}

}

@keyframes particle6{

    0%   {transform: rotate(10deg) scale(0.2);}
    100% {transform: rotate(10deg) scale(0.1);}

}


@media screen and (max-width: 768px) and (orientation: landscape) {
    #coins{
        width: 20%;
        top: 35%;
    }
    #perfect{
        width: 45%;
        top: 5%;
    }
    #rewardedButton{
        font-size: 1em;
        bottom: 15%;
        width: 120px;
        height: 54px;
    }
    #nothanks{
        bottom: 4%;
        font-size: 1em;
    }
    .g100{
        width: 10%;
    }
    #particle1{
        top: -20%;
    }
    #particle2{
        top: 0%;
    }
    #particle3{
        top: 17%;
        left: 40%;
    }
    #particle4{
        display: none;
    }
    #particle5{
        top: 15%;
        left: 25%;
    }
    #particle6{
        top: 25%;
        left: 30%;
    }
    #shopBox1{
        width: 10%;
        top: 50%;
        left: 35%;
    }
    #shopBox2{
        width: 10%;
        top: 50%;
        left: 50%;
    }
    #shopBox3{
        width: 10%;
        top: 50%;
        left: 65%;
    }
    #shopBox4{
        width: 10%;
        top: 75%;
        left: 35%;
    }
    #shopBox5{
        width: 10%;
        top: 75%;
        left: 50%;
    }
    #shopBox6{
        width: 10%;
        top: 75%;
        left: 65%;
    }
    #skin1{
        width: 10%;
        top: 50%;
        left: 35%;
    }
    #skin2{
        width: 10%;
        top: 50%;
        left: 50%;
    }
    #skin3{
        width: 10%;
        top: 50%;
        left: 65%;
    }
    #skin4{
        width: 10%;
        top: 75%;
        left: 35%;
    }
    #skin5{
        width: 10%;
        top: 75%;
        left: 50%;
    }
    #skin6{
        width: 10%;
        top: 75%;
        left: 65%;
    }
    #line{
        width: 100%;
    }
    #shopText{
        transform: translate(-50%,-250%);
    }
    #closeButton{
        width: 5%;
        transform: translate(250%,-290%);
    }

    
    
    
}

@media screen and (max-width: 768px) and (orientation: portrait) {

    #coins{
        width: 40%;
        top: 40%;
    }
    #perfect{
        width: 90%;
        top: 15%;
    }
    #rewardedButton{
        font-size: 1.5em;
        bottom: 18%;
        width: 175px;
        height: 79px;
    }
    #nothanks{
        bottom: 10%;
        font-size: 1.5em;
    }
    .g100{
        width: 25%;
    }
    #particle1{
        top: 6%;
    }
    #particle2{
        top: 10%;
    }
    #particle3{
        top: 13%;
        left: 50%;
    }
    #particle4{
        display: block;
        top: 35%;
        left: 5%;
    }
    #particle5{
        top: 30%;
        left: 35%;
    }
    #particle6{
        top: 40%;
        left: 49%;
    }
    #shopBox1{
        width: 25%;
        top: 50%;
        left: 20%;
    }
    #shopBox2{
        width: 25%;
        top: 50%;
        left: 50%;
    }
    #shopBox3{
        width: 25%;
        top: 50%;
        left: 80%;
    }
    #shopBox4{
        width: 25%;
        top: 75%;
        left: 20%;
    }
    #shopBox5{
        width: 25%;
        top: 75%;
        left: 50%;
    }
    #shopBox6{
        width: 25%;
        top: 75%;
        left: 80%;
    }
    #skin1{
        width: 25%;
        top: 50%;
        left: 20%;
    }
    #skin2{
        width: 25%;
        top: 50%;
        left: 50%;
    }
    #skin3{
        width: 25%;
        top: 50%;
        left: 80%;
    }
    #skin4{
        width: 25%;
        top: 75%;
        left: 20%;
    }
    #skin5{
        width: 25%;
        top: 75%;
        left: 50%;
    }
    #skin6{
        width: 25%;
        top: 75%;
        left: 80%;
    }
    #line{
        width: 100%;
    }
    #shopText{
        transform: translate(-50%,-200%);
    }
    #closeButton{
        width: 10%;
        transform: translate(250%,-200%);
    }


}

/* Loading Screen */

.loading{
    width:100%;
    height:auto;
    background-color:radial-gradient( rgba(102,227,240,1) 0%, rgba(19,173,252,1) 100%);
    z-index: 19;
}

.wrapper{
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.wrapper span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left:15%;
}






/*# sourceMappingURL=main.css.map*/