*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Comfortaa', sans-serif;
    color: #fff;
}
html, body{
    height: 100%;
}
body{
    overflow-y: hidden;
    background: rgb(33,33,33);
    background: linear-gradient(90deg, rgba(33,33,33,1) 0%, rgba(149,29,253,1) 50%, rgba(33,33,33,1) 100%);
    background: linear-gradient(90deg, rgba(33,33,33,1) 0%, rgba(111,29,253,1) 50%, rgba(33,33,33,1) 100%);
    background: linear-gradient(90deg, rgb(33, 33, 33) 0%, rgb(115, 29, 253) 40%, rgb(115, 29, 253) 60%, rgb(33, 33, 33) 100%)
}

img{
    outline: none;
}

.app{
    height: 100%;
    width: 100%;
}

.wrap{
    width: 400px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    font-size: 2.2vh;
    overflow: hidden;
}

#myCanvas{
    cursor: pointer;
}

.rightbuttons{
    position: absolute;
    right: 1vh;
    top: 1vh;
    font-size: 1.6vh;
    color: #ccc;
    text-align: center;
    cursor: pointer;
}

.btn{
    display: block;
    border-radius: 50%;
    background-color: transparent;
    border: 0;
    filter: invert();
    width: 6vh;
    cursor: pointer;
}

.btnimg{
    width: 100%;
    height: 100%;
}

.fullScreen, .fullScreenBlack{
    position: absolute;
    display: flex;
    z-index: -100;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.fullScreenBlack{
    background-color: #00000070;
    justify-content: center;
}

.bonusContainer{
    user-select: none;

}

.bonusPanelHeader{
    text-align: center;
    font-size: 3.5vh;
    padding-top: 2vh;
    padding-bottom: 1vh;
    color: #fff;
}

.bonusPanel{
    /*height: 26vh;*/
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: baseline;
    align-content: center;
    filter: invert();
}

.bonusDiv{
    flex: 0 1 16vh;
    margin: 1vh;
    text-align: center;
    cursor: pointer;
}

.bonusImg{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
    transition: all 0.1s linear 0s;
}
.bonusImg:hover{
    transform: scale(1.15);
}

.bonusspan{
    display: inline-block;
    margin: 1vh auto;
    color: #000;
}

.transition{
    -webkit-transition: all 0.14s linear 0s;
	-moz-transition: all 0.14s linear 0s;
	-o-transition: all 0.14s linear 0s;
    transition: all 0.14s linear 0s;
    transform: scaleY(0);
    background-color: #4a138c; /*#d0b9e8;*/
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
.scaleY{
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
}

.stats{
    list-style: none;
    color: #fff;
    text-align: center;
}

.stats li {
    /*transform-origin: center center;*/
    opacity: 0;
}

@keyframes fromleft {
    from {
      opacity: 0;
      transform: translateX(100vh);
    }
    to {
      opacity: 1;
      transform: translateX(0vh);
    }
}

.statsString{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    padding: 1vh 0vh 0vh;
    margin: 0px 10vh;
    border-bottom: 1px dotted #bbb;
}

.statsContainer{
    height: 65vh;
    width: 100%;
    scrollbar-width: thin;
    overflow-x: hidden;
    overflow-y: auto;
}

.header{
    color: #fff;
    text-align: center;
    font-size: 3.2vh;
    margin: 5vh 0 2vh 0;
}

.mmenu{
    position: absolute;
    bottom: 0px;
    background-color: #00000070;
    border-top: 1px solid white;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    padding-top: 2vh;
}

.mmenu-item{
    display: block;
    background-color: transparent;
    outline: none;
    border: 0;
    color: #000;
    margin: 1vh;
    cursor: pointer;
    filter: invert();
    width: max-content;
    font-size: 1.8vh;
}

.mmenu-img{
    display: block;
    width: 8vh;
    height: 8vh;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
    transition: all 0.1s linear 0s;
    margin: 0 auto;
}
.mmenu-img:hover{
    transform: scale(1.15);
}

.mmenu-span{
    display: block;
    margin-top: 2vh;
    text-align: center;
    color: #000;
}

.mission-btn{
    position: relative;
    display: block;
    border: 0;
    outline: none;
    margin: 4vh auto;
    background-color: transparent;
    border: 1px solid #fff;
    width: 80%;
    cursor: pointer;
    -webkit-transition: all 0.1s linear 0s;
	-moz-transition: all 0.1s linear 0s;
	-o-transition: all 0.1s linear 0s;
    transition: all 0.1s linear 0s;
}

.mission-btn:hover{
    transform: scale(1.05);
}

.missionInnerDiv{
    color: #fff;
    font-size: 3.2vh;
    padding: 2vh;
}