/********************* fonts *****************************/
/* https://www.dafont.com/fr/theme.php?cat=804 */

@font-face 
{
    font-family: 'MerryChristmasStar';
    src:    url('fonts/MerryChristmasStar.ttf') format('truetype'),
            url('fonts/MerryChristmasStar.woff2') format('woff2'),
            url('fonts/MerryChristmasStar.woff') format('woff');
}
@font-face 
{
    font-family: 'MerryChristmasFlake';
    src:    url('fonts/MerryChristmasFlake.ttf') format('truetype'),
            url('fonts/MerryChristmasFlake.woff2') format('woff2'),
            url('fonts/MerryChristmasFlake.woff') format('woff');
}

@font-face 
{
    font-family: 'game_over';
    src:    url('fonts/game_over.ttf') format('truetype'),
            url('fonts/game_over.woff2') format('woff2'),
            url('fonts/game_over.woff') format('woff');
}


/* todo generate woff2 and woff */



/********************* common *****************************/

.hide
{
    display: none;
}
.show
{
    display: block;
}


/********************* main *****************************/

html
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #029261;
}


/********************* waterMark  *****************************/

.waterMark
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #a62a2a;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.waterMark.hide {
    display: none;
}

.bt_seeWishList 
{
    background-color: #ee901f;
    color: #ffffff;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    font-size: larger;
    cursor: pointer;
    max-width: 86%;
}
.bt_seeWishList:hover
{
    background-color: #ffb050;
}

/********************* mainPage *****************************/

.tittle {
    position: absolute;
    left: 48%;
    bottom: 45%;
    font-family: "MerryChristmasFlake";
    color: #c6392d;
    font-size: 300%;
    text-align: center;
    text-shadow: 8px 2px 36px rgb(69, 136, 17);
}

.bt_mute 
{
    position: absolute;
    right: 1%;
    bottom: 22%;
    width: 30px;
    height: 30px;
    color: #eeeeee;
    background: #ee901f;
    text-align: center;
    line-height: 30px;
    border-radius: 30px;
    border: 1px solid #eeeeee;
    cursor: pointer;
}
.bt_mute:hover
{
    background: #ffb050;
}
.bt_mute.muted {
    background: #a62a2a;
}
.bt_mute.muted:hover
{
    background: #e25f5f;
}


.tittle_bye {
    /*
    position: absolute;
    left: 20%;
    bottom: 1%;
    font-family: "MerryChristmasStar";
    font-size: 300%;
    color: #ffffff;
    text-shadow: 1px 1px 39px rgb(0, 0, 0);
    */
    position: absolute;
    left: 10%;
    bottom: 1%;
    font-family: "MerryChristmasStar";
    font-size: 203%;
    color: #ffffff;
    text-shadow: 1px 1px 39px rgb(0, 0, 0);
}

.redArrow {
    position: absolute;
    left: 64%;
    bottom: 23%;
    width: 12%;
}

.light_spot 
{
    position: absolute;
    left: calc(0% - 50%);
    bottom: calc(0% - 50%);
    width: 100%;
    height: 100%;
    opacity: 0.0;
    transition: 0.2s ease-in-out opacity;
}
.light_spot.on
{
    opacity: 1.0;
}

.light_spot.light0
{
    left: calc(0% - 50%);
    bottom: calc(72% - 50%);
}

.light_spot.light1
{
    left: calc(0% - 50%);
    bottom: calc(80% - 50%);
}
.light_spot.light2
{
    left: calc(0% - 50%);
    bottom: calc(64% - 50%);
}

.light_spot.light3
{
    left: calc(16% - 50%);
    bottom: calc(80% - 50%);
}
.light_spot.light4
{
    left: calc(16% - 50%);
    bottom: calc(64% - 50%);
}

.light_spot.light5
{
    left: calc(33% - 50%);
    bottom: calc(80% - 50%);
}
.light_spot.light6
{
    left: calc(33% - 50%);
    bottom: calc(64% - 50%);
}


.light_spot.light7
{
    left: calc(48% - 50%);
    bottom: calc(80% - 50%);
}
.light_spot.light8
{
    left: calc(48% - 50%);
    bottom: calc(64% - 50%);
}


.light_spot.light9
{
    left: calc(65% - 50%);
    bottom: calc(77% - 50%);
}


.light_spot.light10
{
    left: calc(74% - 50%);
    bottom: calc(64% - 50%);
}



.light_spot.light11
{
    left: calc(78% - 50%);
    bottom: calc(49% - 50%);
}
.light_spot.light12
{
    left: calc(58% - 50%);
    bottom: calc(49% - 50%);
}
.light_spot.light12b
{
    left: calc(58% - 50%);
    bottom: calc(49% - 50%);
}

.light_spot.light13
{
    left: calc(78% - 50%);
    bottom: calc(39% - 50%);
}
.light_spot.light14
{
    left: calc(58% - 50%);
    bottom: calc(39% - 50%);
}
.light_spot.light15
{
    left: calc(88% - 50%);
    bottom: calc(39% - 50%);
}
.light_spot.light16
{
    left: calc(48% - 50%);
    bottom: calc(39% - 50%);
}


.light_spot.light17
{
    left: calc(81% - 50%);
    bottom: calc(26% - 50%);
}
.light_spot.light18
{
    left: calc(55% - 50%);
    bottom: calc(26% - 50%);
}

.light_spot.light19
{
    left: calc(68% - 50%);
    bottom: calc(13% - 50%);
}


.bk
{
    background-color: #db0104;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bk>img
{
    width: 100%;
    height: 100%;
}

.tourneDisque {
    position: absolute;
    right: -2%;
    bottom: 13%;
    width: 13%;
    height: 22%;
}


.tourneDisque>img,
.redArrow>img,
.waiting>img
{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.bt_fullscreen:hover {
    background: #ffb050;
    background-image: url(images/h_Fullscreen.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.bt_fullscreen {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 30px;
    height: 30px;
    background-color: #a62a2a;
    background-image: url(images/h_Fullscreen.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    border: 1px solid #eeeeee;
}


.bt_game,
.bt_ohohoh,
.bt_grelos
{
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 7.5%;
    height: 9%;
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
    border-radius: 10%;
}
.bt_game:hover
{
    background-color: rgba(255,255,255,0.5);
}




#game_0
{
    left: 60%;
    bottom: 13%;
}
#game_1 
{
    left: 62.5%;
    bottom: 7%;
    width: 6%;
    height: 6%;
}
#game_2 {
    left: 68%;
    bottom: 7%;
    height: 11%;
}
#game_3 {
    left: 76%;
    bottom: 12%;
    width: 6%;
    height: 11%;
}
#game_4 {
    left: 76%;
    bottom: 8%;
    width: 6.75%;
    height: 4%;
}
#game_5 {
    left: 82.5%;
    bottom: 8%;
    width: 4.5%;
    height: 10%;
}

.bt_ohohoh {
    left: 27.5%;
    bottom: 7%;
    width: 20.5%;
    height: 56%;
    background-color: rgba(255,255,255,0.05);
}
.bt_grelos
{
    left: 28.5%;
    top: 0%;
    width: 71.5%;
    height: 23%;
    background-color: rgba(255,255,255,0.05);
}


.waiting {
    position: absolute;
    left: 10%;
    top: 10%;
    color: #ffffff;
    text-align: center;
    font-size: 150%;
    width: 80%;
    height: 80%;
}
/********************* gamePage *****************************/

.game_panel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    background-color: rgba(2,146,97,0.8);
    border-radius: 10px;
    border: 1px solid #ffffff;
    padding: 10px;    
    color: #ffffff;
}



.game_area_panel 
{
    position: absolute;
    left: 0px;
    right: 50%;
    top: 0px;
    bottom: 0px;
}

.game_area {
    position: absolute;
    left: calc(50% - 240px);
    top: calc(50% - 320px);
    width: 480px;
    height: 640px;
    border-radius: 10px;
    border: 1px solid #ffffff;
}

.score_panel
{
    position: absolute;
    left: 50%;
    right: 0px;
    top: 0px;
    bottom: 0px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.score
{
    min-width: 480px;
    min-height: 500px;
    position: relative;
}


.game_panel.vertical
{
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.game_area_panel.vertical
{
    right: 0px;
    bottom: 50%;
}
.score_panel.vertical
{
    left: 0px;
    top: 50%;
}
.bt_close.vertical
{
    top: calc(50% + 6px);
}

@media only screen and (max-height: 680px)
{
    .game_panel
    {
        top: 0px;
        bottom: 0px;
    }
}
@media only screen and (max-width: 1000px)
{
    .game_panel
    {
        left: 0px;
        right: 0px;
    }
}


.score_header
{
    width: calc(100% - 15px);
    height: 20px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding-left: 15px;
}
.score_header>label
{
    display: inline-block;
}
.score_img
{
    width: 100%;
    height: calc(100% - 22px);
    border: 1px solid #ffffff;
    border-radius: 10px;
}


.bt_close 
{
    position: absolute;
    right: 6px;
    top: 6px;
    width: 30px;
    height: 30px;
    border: 1px solid #ffffff;
    border-radius: 30px;
    text-align: center;
    line-height: 29px;
    font-weight: bold;
    background: #a62a2a;
}
.bt_close.muted:hover
{
    background: #e25f5f;
}

#canva_score {
    width: 100%;
    height: 100%;
}


/****** candy ********/

.candy_shakeIt {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 59px;
    height: 45px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}
.candy_shakeIt>img {
    max-width: 100%;
    border-radius: 16px;
}
/* Todo for mobile */