@font-face {
  font-family: 'bubble';
  src: url('Double_Bubble_shadow.otf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'big john';
  src: url('BIG_JOHN.otf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'cocogoose';
  src: url('cocogoose.ttf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  src: url('alfa-slab-one-v7-latin-regular.eot');
  src: local('Alfa Slab One Regular'), local('AlfaSlabOne-Regular'), url('alfa-slab-one-v7-latin-regular.eot?#iefix') format('embedded-opentype'), url('alfa-slab-one-v7-latin-regular.woff2') format('woff2'), url('alfa-slab-one-v7-latin-regular.woff') format('woff'), url('alfa-slab-one-v7-latin-regular.ttf') format('truetype'), url('alfa-slab-one-v7-latin-regular.svg#AlfaSlabOne') format('svg')
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('roboto-mono-v5-latin-regular.eot');
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url('roboto-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), url('roboto-mono-v5-latin-regular.woff2') format('woff2'), url('roboto-mono-v5-latin-regular.woff') format('woff'), url('roboto-mono-v5-latin-regular.ttf') format('truetype'), url('roboto-mono-v5-latin-regular.svg#RobotoMono') format('svg')
}

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body {
    width:100%;
    height:100%;
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    /* background-color:#e91e63; */
    /* background: linear-gradient(157deg, #e91e63, #ffc107); */
/*    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);*/
/*    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);*/
/*    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);*/
/*    background-image:-webkit-gradient(*/
/*        linear,*/
/*        left top,*/
/*        left bottom,*/
/*        color-stop(0, #A7A7A7),*/
/*        color-stop(0.51, #E4E4E4)*/
/*    );*/
    /* background-attachment:fixed; */
    /* font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; */
    /* font-size:12px; */
    height:100%;
    margin:0px;
    padding:0px;
    /* text-transform:uppercase; */
    width:100%;
}


/* Portrait layout (default) */
.app {
/*    background:url(../img/logo.png) no-repeat center top;*//* 170px x 200px */
    width:100%;
    height:100%;
/*    position:absolute;*/
    /* position in the center of the screen */
/*    left:50%;*/
/*    top:50%;*/
/*    height:50px;*/
    /* text area height */
/*    width:225px;*/
    /* text area width */
    text-align:center;
/*    padding:180px 0px 0px 0px;*/
    /* image height is 200px (bottom 20px are overlapped with text) */
/*    margin:-115px 0px 0px -112px;*/
    /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}
#deviceready{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center;
    background: #e3f2fd;
}


/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
/*        padding:75px 0px 75px 170px;*/
        /* padding-top + padding-bottom + text area = image height */
/*        margin:-90px 0px 0px -198px;*/
        /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:450%;
    font-weight:bold;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#4B946A;
    font-size:12px;
    font-weight:bold;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
/* font-size:200%; */
/*    position:absolute;*/
/*    top:48%;*/
/*    left:50%;*/
display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center;
padding-top:10%;
padding-bottom:10%;
width:50vw;
/*    background-color:#4B946A;*/
display:block !important;
/*    animation:fade 1000ms infinite;*/
/*    -webkit-animation:fade 1000ms infinite;*/
}

.event.received {
    position:absolute;
    top:55%;
    left:32%;
    width:25%;
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 1000ms infinite;
    -webkit-animation:fade 1000ms infinite;
}

/* HOME OPTIONS MENU ITEMS */
.show-home-infos-trigger-container-row{
  position: absolute;
  right: 42vw;
  bottom: 18vh;
  font-size: 4em;
  color: #e66c51;
}
.show-home-infos-trigger{
  text-shadow: 0.1px -1.9px 1px rgb(7 5 4 / 34%);
}
.home-item{display: none;}
.options-menu-score{
  position: absolute;
  bottom: 94px;
  color: #ff5722;
  height: 100px;
  border-radius: 5em;
  background: none 0% 0% / auto repeat scroll padding-box border-box #ff57220a;
  box-shadow: rgb(147 4 4 / 20%) 0.1px 0.1px 3.1px 1px;
  width: 100px !important;
}

.options-menu-ranking{
  color: #00c409;
  background: none 0% 0% / auto repeat scroll padding-box border-box #00c4090a;
  height: 100px;
  border-radius: 5em;
  /* border: 8px solid; */
  box-shadow: rgb(1 130 8 / 20%) 0.1px 0.1px 3.1px 1px;
  width: 100px !important;
}

.options-menu-coins{
  color: #ff006f;
  background: #ff006f0a;
  width: 100px!important;
  height: 100px;
  border-radius: 5em;
  /* border: 8px solid; */
  box-shadow: rgb(168 0 73 / 20%) 0.1px 0.1px 3.1px 1px;
}

.options-menu-params{
  position: absolute;
  bottom: 94px;
  right: 10px;
  color: #00cbff;
  background: none 0% 0% / auto repeat scroll padding-box border-box #00cbff0a;
  height: 100px;
  border-radius: 5em;
  box-shadow: rgb(37 123 145 / 20%) 0.1px 0.1px 3.1px 1px;
  width: 100px !important;
}

/* START PLAYING PROGRESS BAR  */
.progressbar-container .loading-msg{
  width: 100%;
  text-align: center;
  position: absolute;
  left: 2%;
  color: var(--bs-black)!important;
  font-weight: bolder;
}
/* **************************** */

/* ********STARTUP MESSAGE ****** */
.startup-message-container{

}
.startup-message{
  background: linear-gradient(180deg, #12022d, rgba(0,0,0,0));
  border: none;
  /* border-radius: 7em; */
  color: var(--bs-yellow);
  font-family: 'Alfa Slab One'!important;
  font-size: 0.8em;
  /* border-top: 50px solid var(--bs-danger); */
  border-radius: 0.4em;
}
.startup-message-id{
  font-family: Alfa Slab One;
  font-size: 4rem;
  position: relative;
  left: 5px;
  top: -14px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--bs-red);
  color: var(--bs-warning);
  text-align: center;
}
.startup-message-content {
    position: relative;
    top: -30px;
}
/* ****************************** */

/* ******************* */
#wrapperRanking tbody,
#wrapperRanking td,
#wrapperRanking tfoot,
#wrapperRanking th,
#wrapperRanking thead,
#wrapperRanking tr{
  border-style:none;
}
/* ******************* */

#playground{
    display:none;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
/*    border:2px dashed blue;*/
    background:#2c0300;
    background-size: 100% 100%!important;
}

.balls{
  position:absolute;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  /* padding:10px; */
}

.ball-square{
  /* border-radius:50%; */
  width:94.7px;
  height:94.7px;
  box-shadow: rgb(26,36,38, 0.2%) 2.1px 2.1px 8.1px 6px
}

.ball-circle{
  border-radius:50%;
  width:94.7px;
  height:94.7px;
  box-shadow: rgb(26,36,38, 0.2%) 2.1px 2.1px 8.1px 6px
}

.ball-triangle{
  border-bottom-right-radius: 88%;
  box-shadow: rgb(0 0 0 / 20%) -4px 3.1px 2px;
  border-right: 94.7px solid rgba(0,0,0,0);
  border-bottom: 94.7px solid #ff4981;
  width: 0;
  height: 0;
}

.ball{
    opacity:0;
    float:left;
    background-size: cover/*100% 100%*/!important;
    background-position: center!important;
}

#time{
  color:rgba(250,250,250,1);
  font-size:.8em;
  font-weight:bold;
  text-shadow:.5px .5px rgba(0, 0, 0,.8);
  font-family: 'Alfa Slab One';
  position: absolute;
  top: 1%;
  left: 50vw;
  z-index: 1;
}
#points{
/*    position : absolute;*/
    margin-top:20%;
    font-size:1000%;
    font-weight:bold;
    font-family: "Alfa Slab One";
    text-shadow:0px 1px 1px rgba(0, 0, 0, .8);
/*    margin-left:50%*/
    color:rgba(255, 225, 25,.8);
    opacity: .1;
}

#points-max{
  position: absolute;
  top: 1%;
  font-weight: bold;
  text-shadow: 0px 1px 1px rgba(0, 0,0, 0.14);
  margin-left: 2%;
  color: transparent;
  /* opacity: .4; */
  font-family: 'Alfa Slab One';
  font-size: .8em;
  text-transform: capitalize;
}

#time-points .options-menu{
  position: absolute;
  top: 50vh;
  right: 41vw;
  z-index: 100000000;
  font-size: initial;
  width: 100px;
  height: 100px;
  color: #8a6802;
  /* border: 8px solid #e66c51; */
  box-shadow: rgb(37 123 145 / 20%) 0.1px 0.1px 8.1px 1px;
  background:none 0% 0% / auto repeat scroll padding-box border-box #00cbff0a;
  display: none;
  font-weight: 800;
}

#time-points .replay-button-item,
#time-points .continue-button-item
{
  position: absolute;
  top: 55vh;
  right: 14vw;
  z-index: 1000000001;
  color: #3da2f4;
  font-size: xx-large;
  width: 121px;
  height: 121px;
  box-shadow: rgb(37 123 145 / 20%) 0.1px 0.1px 4.1px 1px;
  background: none 0% 0% / auto repeat scroll padding-box border-box #00cbff66;
  display: none;
  font-weight: 800;
  opacity: .9;
  border: none;
}

#remaining-coins{
    position: absolute;
    top: 1%;
    right: 49px;
    /* right: 5%; */
    /* font-size: 150%; */
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14);
    margin-left: 2%;
    color: #fff;
    opacity: 1;
    font-family: 'Roboto';
    font-size: .45264rem;
    text-transform: capitalize;
    display: none;
}

#replay-button,#quit-button{
  color: #ffe119cc;
  z-index: 10000;
  width: 75%;
  text-align: center;
  font-size: initial;
}

#quit-button{
  left:54%;
}

.stop-current-session-menu-trigger{
  /* position: absolute;
  top: 1px;
  right: 8px;
  width: 25px;
  height: 25px;
  border-radius: 4em;
  font-size: 1.2em;
  color: var(--bs-warning); */
}

.stop-current-session-menu-trigger:hover,
.stop-current-session-menu-trigger:active{
  cursor:pointer;
  /* background:var(--bs-warning); */
  /* border-color:#e91e63!important; */
  /* color:#e91e63!important; */
}


.apply-theme:focus{
  box-shadow:0;
}

.btn-options-menu{
  color:#ffbdde;
  background:#fb9c836e;
  font-family: 'Alfa Slab One';
}

.btn-close-options{
  font-family: 'Roboto';
  color:#ffbdde;
}

.btn-options-menu:hover,
.btn-options-menu:focus,
.btn-options-menu:active{
  color:#3d1c1c;
  background:#ffbdde;
  border-width:0px!important;
}

#btn-close-options:hover,
#btn-close-options:active,
#btn-close-options:focus{
  color:#fff!important;
}

/*Iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation : landscape){
    .ball{width:73.2px;height:73.2px;}
}

/*Iphone 6*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */
    /*    .grid2 .grid-item {width: 145px;}*/
    /*    .grid2 .grid-item {width: 45%;}*/
    .ball{
        /* width:86.4px;height:86.4px; */
        width:94.7px;height:94.7px;
    }
}
/*Iphone 6Plus*/
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */
    .ball{
        width:94.7px;height:94.7px;
    }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
/*and (orientation : landscape)*/
and (-webkit-min-device-pixel-ratio: 2)
{
    /* STYLES GO HERE */
    /*    .grid2 .grid-item {width: 180px;}*/
/*    .grid2 .grid-item {width: 45%;}*/
}
/*.ball-1{background-color:#FF0000;}*/
/*.ball-2{background-color:#093AB2;}*/
/*.ball-3{background-color:#9CFF00;}*/
/*.ball-4{background-color:#FFC026;}*/
/*.ball-5{background-color:#001D66;}*/
/*.ball-6{background-color:#FFC026;}*/
/*.ball-7{background-color:#0CFFC6;}*/
/*.ball-8{background-color:#B21212}*/
/*.ball-9{background-color:#FFFC19;}*/
/*.ball:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    width: 5px;*/
/*    height: 5px;*/
/*    background: rgba(25, 20, 0, 1);*/
/*    opacity: 0;*/
/*    border-radius: 100%;*/
/*    transform: scale(1, 1) translate(-50%);*/
/*    transform-origin: 50% 50%;*/
/*}*/
/**/
/*@keyframes ripple {*/
/*    0% {*/
/*        transform: scale(0, 0);*/
/*        opacity: 1;*/
/*    }*/
/*    20% {*/
/*        transform: scale(25, 25);*/
/*        opacity: 1;*/
/*    }*/
/*    100% {*/
/*        opacity: 0;*/
/*        transform: scale(50, 50);*/
/*    }*/
/*}*/
/**/
/*.ball:focus:not(:active)::after {*/
/*    animation: ripple 1s ease-out;*/
/*}*/

/* ISCROLL CONFIG */
.wrapper {
    /* position: absolute; */
    z-index: 1;
    /* top: 5px; */
    /* bottom: 5px; */
    left: 0;
    width: 100%;
    /* background: #ccc; */
    overflow: hidden;
    max-height: 54vh;
}

.scroller {
    /* position: absolute; */
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

/* MODAL */
.modal-backdrop{display:none;}
/* MODAL */