html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Kanit', sans-serif;
}

#head-banner {
    width: 100%;
    height: 100px;
    text-align: center;
}

#image-head-banner {
    width: 100%;
    height: 100%;
    text-align: center;
    object-fit: contain;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* background-color: #ff7b00; */
    /* padding: 20px; */
}

.grid-item {
    /* background-color: rgba(255, 255, 255, 0.8); */
    border: 1px solid rgba(128, 128, 128, 0.5);
    padding: 10px;
    /* font-size: 30px; */
    text-align: center;
}

#game-image {
    max-width: 100%;
    text-align: center;
    object-fit: contain;
}

.language-flag {
    width: 60px;
    height: 60px;
}

.image-gray {
    filter: grayscale(100%);
}

#game-flags {
    max-width: 100%;
}

/* Style the tab */

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */

.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */

.tab button.active {
    background-color: rgb(0, 0, 0);
}

.tab button:disabled, button[disabled] {
    background-color: #000000;
    color: #ffffff;
}

/* Style the tab content */

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.btn-language {
    width: 64px;
    height: 64px;
    border: none;
    background-color: transparent;
    padding: 0% !important;
}

.btn-environment {
    width: 128px;
    height: 64px;
    border: none;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    padding: 0%;
}

.btn-image {
    width: 100%;
    height: 100%;
}

.inputfield {
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
}

.result-submit-button {
    width: 250px;
    height: 60px;
}

/* Create a custom checkbox */
.checkbox {
    height: 50px;
    width: 50px;
}

.grid-menu-container {
    display: grid;
    grid-template-areas:
      'top top top top'
      'left right right right'
      'bottom bottom bottom bottom';
    gap: 5px;
    padding: 0px;
  }

.item_grid_top { grid-area: top; }
.item_grid_left { grid-area: left; }
.item_grid_right { grid-area: right; }
.item_grid_footer { grid-area: bottom; }

.grid-menu-container > div {
    align-self: center;    
}