@font-face {
    font-family: 'Silkscreen';
    src: url('slkscr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body{
    font-family: 'Silkscreen';
    font-size: 16px;
    color-scheme: dark;
    margin: 0;
    padding: 0;
    /*background-color: aquamarine;*/
}
button {
    font-family: 'Silkscreen';
    font-size: 16px;
    min-width: 96px;
}
.game-container {
    display: flex; /* Use flexbox for horizontal alignment */
    /*gap: 20px; /* Adds space between the canvas and the score table */
    align-items: flex-start; /* Aligns items to the top of the container */
    justify-content: center;
    /*align-items: center;*/
}
footer{
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    width : 100%;

    scrollbar-width: 0;
}
#trophy_div{
    display: inline-block;
}
.button_img {
    width : 48px;
    height : 48px;
    cursor: pointer;
}
.trophy_img {
    width : 48px;
}
.button_img:hover {
    background-color:lightgrey;
}
.score-div {
    width:100%;
    /*min-width: 512px;*/
    /*height: 384px;*/
    max-height: 448px;/*85%;*/
    border: 1px solid #ccc;
    /*padding: 10px;*/
    display:inline-flex;
    font-family: 'Silkscreen';
    font-size: 16px;
    /*display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
}
#log_div {
    /*width: 256px;*/
    /*min-width: 512px;*/
    width:100%;
    max-height: 448px;/*192px;*/
    border: 1px solid #ccc;
    /*padding-left: 4px;
    padding-right: 8px;*/
    background-color: black;
    color:#33ff33;
    display:inline-flex;
    font-family: 'Silkscreen';
    font-size: 16px;
    /*display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; 
}
.title_table th, .title_table td {
    border: black 1px solid;
}
.score-body-scroll {
    overflow-y: auto; /* Enable vertical scrolling */
    flex-grow: 1; /* Allow this section to fill the available space */
}

#information_table{
    width:/*512px;*/1168px;
    max-height: 64px;
    table-layout:inherit;
    border: 1px solid black;
    margin-left:auto;
    margin-right:auto;
    background-color: #8080809f;
}
footer{
    margin-left:auto;
    margin-right:auto;
    width:1168px;
}
td, th{
    min-width: 64px;
}
/*td{
    width: auto;
    text-align: center;
}
th{
    text-align: left;
}*/
.control_container {
    position: relative;
    display: inline-block;
}
.control_image {
  display: block;
}
.control_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: white;
    font-weight: bold;
}
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 288px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 100; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}