* {
        color: #5a2eb7;
        font-size: 16pt;
        margin:0;
        padding:0;
        font-family: sans-serif;

        /* noselect */
        -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
           -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Old versions of Firefox */
              -ms-user-select: none; /* Internet Explorer/Edge */
                  user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Edge, Opera and Firefox */

} /* to remove the top and left whitespace */
body {
        width:100%;
        height:100%;
        background-color: lightyellow;
        overflow: hidden;
} /* just to be sure these are full screen*/
canvas {
        display: block;
        margin: 0px;
} /* To remove the scrollbars */
h3 {
        color: #5a2eb7;
        font-size: 18pt;
}
#level, #score, #ships {                /* displays for game data */
        font-size: 24pt;
        color: #5a2eb7;
}
#pokal {
        height: 48pt;
}
.container_row {
        display: flex;                  /* establish flex container */
        flex-direction: row;            /* default value; can be omitted */
        flex-wrap: nowrap;              /* default value; can be omitted */
        justify-content: space-between; /* switched from default (flex-start, see below) */
        background-color: lightyellow;
}
.container_row > div {
        width: 19%;
        border: 0px dashed red;
}
.fullsize {
        background-color: #5a2eb7;
        color: #ffe78d;
        display: block;
        margin: 10px 10px;
        padding: 10px;
        width: 100%;
} /* for a fullsize button in a div */
.fat {
        font-size: 24pt;
}
#overlay {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 100%;
        background: url('splash-picture.png') center no-repeat #cccccc;
        backdrop-filter: blur(10px);
        opacity: 0.7;
        z-index: 999;
        text-align: center;
        vertical-align: bottom;
        font-size: 120pt;
        font-family: sans-serif;
        color: #5a2eb7;
} /* for text messages, i.e. level display */

progress::-moz-progress-bar { background: #5a2eb7; }
progress::-webkit-progress-value { background: #5a2eb7; }
progress {
        color: #5a2eb7;
        display: block;
        margin: 0px 10px;
        padding: 10px;
        height: 24pt;
        width: 90%;
}

/* Tooltip container */
.tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
}
/* Tooltip text */
.tooltip .tooltiptext {
        visibility: hidden;
        width: 100%;
        background-color: #5a2eb7;
        color: white;
        text-align: left;
        padding: 5px 10px;
        border-radius: 6px;
        font-size: 10pt;

        width: 90%;
        bottom: 100%;
        left: 50%;
        margin-left: -50%;
        position: absolute;
        z-index: 1;
}
.tooltip .tooltiptext b {
        font-size: 10pt;
        color: yellow;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
        visibility: visible;
}