body{
    background-color:       rgb(161, 237, 253);
    margin:                 0px;
    padding:                0px;
}

#gameContainer{
    display:                grid;
    grid-template-rows:     auto max-content;
    grid-template-columns:  auto;
    grid-template-areas:    "menu"
                            "tracks";
    position:               fixed;
    top:                    0px;
    left:                   0px;
    width:                  100%;
    height:                 100%;
    background-image:       url('images/egypt-desert.svg');
    background-size:        100% auto;
    background-position:    0% 100%;
    background-repeat:      no-repeat;
}

.camelCurves {
    --mask:
                            radial-gradient(70.71px at 50% 100.00px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
                            radial-gradient(70.71px at 50% -50px,#0000 99%,#000 101%) 50% 50px/200px 100% repeat-x;
    -webkit-mask:           var(--mask);
    mask:                   var(--mask);
    background:             rgb(226,148,0);
    background:             linear-gradient(90deg, rgba(226,148,0,1) 0%, rgba(232,185,28,1) 35%, rgba(255,185,53,1) 77%, rgba(255,212,80,1) 100%);
    background-size:        120% 100%;
    box-shadow:             inset 0px 40px 10px 0px rgb(175, 114, 0), inset 0px 60px 5px 0px rgb(208, 135, 0), inset 0px 80px 10px 0px rgb(230, 150, 0);
    box-sizing:             border-box;
    opacity:                0.7;
}

.camelCurvesBg{
    width:                  110%;
    height:                 150px;
}

#loginmsg{
    position:               fixed;
    top:                    10px;
    left:                   10px;
    padding:                10px;
    background-color:       #00000099;
    color:                  #FFF;
    border-radius:          5px;
    opacity:                0;
    pointer-events:         none;
    transition:             all 1s linear;
}
    #loginmsg.animate{
        opacity:            1;
    }
#usersmsg{
    position:               fixed;
    top:                    10px;
    right:                  10px;
    padding:                10px;
    background-color:       #00000099;
    color:                  #FFF;
    border-radius:          5px;
    opacity:                0;
    pointer-events:         none;
    transition:             all 1s linear;
}
    #usersmsg.animate{
        opacity:            1;
    }

#gameMenu{
    grid-area:              menu;
    display:                none;
}
    #gameMenu.show{
        display:                block;
    }
    #gameMenu .typePlayer{
        display:                none;
        grid-template-columns:  auto 200px 200px auto;
        width:                  100%;
        height:                 300px;
        align-items:            center;
        justify-content:        center;
    }
        #gameMenu .typePlayer.show{
            display:                grid;
        }
        #gameMenu .typePlayer .button{
            display: none;
        }
            #gameMenu .typePlayer .button.show{
                display: inline;
            }

#gameMenu .tvMenu{
    grid-area:              menu;
}
    #gameMenu .tvMenu{
        display:                none;
        grid-template-columns:  auto auto auto auto;
        column-gap:             10px;
        width:                  100%;
        height:                 300px;
        align-items:            center;
        justify-content:        center;
    }
    #gameMenu .tvMenu.show{
        display:                grid;
    }

#gameMenu .typeCamel{
    grid-area:              menu;
    display:                none;
    grid-template-columns:  auto auto auto auto auto;
    column-gap:             10px;
    width:                  100%;
    height:                 300px;
    align-items:            center;
    justify-content:        center;
}
    #gameMenu .typeCamel.show{
        display:                grid;
    }
    
#gameField{
    grid-area:              menu;
    display:                none;
    grid-template-columns:  auto auto auto;
    column-gap:             10px;
    width:                  100%;
    height:                 4vh;
    align-items:            center;
    justify-content:        center;
    background-color:#FF000033;
}
    #gameField.show{
        display:            grid;
    }
            
.button {
    box-shadow:             0px 0px 0px 2px #fff6af;
    background:             linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:       #ffec64;
    border-radius:          10px;
    border:                 1px solid #ffaa22;
    display:                inline-block;
    cursor:                 pointer;
    color:                  #333333;
    font-family:            Arial;
    font-size:              25px;
    padding:                22px 47px;
    text-decoration:        none;
    text-shadow:            0px 1px 0px #ffee66;
    width:                  max-content;
    margin:                 auto;
    text-align:             center;
}
    .button:hover {
        background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
        background-color:#ffab23;
    }
    .button:active {
        position:relative;
        top:1px;
    }

#tracks{
    grid-area:              tracks;
    width:                  100%;
    height:                 max-content;
    min-height:             100px;
    position:               relative;
}

.camelPlayer{
    filter:                 drop-shadow(5px 5px 5px rgb(0,0,0,0.7));
    transition:             all 2s ease-in-out;
    margin-bottom:          0px;
}
    .camelPlayer.wiggle{
        animation-name:             wiggle;
        animation-duration:         1s;
        animation-iteration-count:  2
    }

    @keyframes wiggle {
        0%   {margin-bottom: 0px}
        25%  {margin-bottom: 10px}
        50%  {margin-bottom: 0px}
        75%  {margin-bottom: 10px}
        100% {margin-bottom: 0px}
      }