@font-face {
    font-family: "Elektra";
    src: url('../assets/fonts/Elektra.otf');
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #002558;
    overflow: hidden;

    position: relative;
    touch-action: none;
    -ms-touch-action: none;

    -webkit-touch-callout: none !important;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none !important;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none !important;                  /* prevent copy paste, to allow, change 'none' to 'text' */

    font-family: 'Elektra';
}

#gameCanvas {
    z-index: 1;
    position: relative;
}

#inputNameOfTeam {
    z-index: 2;
    position: absolute;
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    text-align: center;
    font-family: 'Elektra';
}

#inputNameOfTeamButton {
    z-index: 2;
    position: absolute;
    border: 0;
    color: #fff;
    display: none;
    background: transparent;
}

#inputNameOfTeam:focus {
    outline: none;
}


#panelLeft {
    position: absolute;
    display:none;
    width: 200px;
    height: 50px;
    background: url('../assets/gfx/farbyl.png');
}

#panelMiddle {
    z-index: 0;
    position: absolute;
    display:none;
    width: 200px;
    height: 50px;
    background: #000036
}

#panelRight {
    position: absolute;
    display:none;
    width: 200px;
    height: 50px;
    background: url('../assets/gfx/farbyr.png');
}