.button {
    background-color:  #69F069; 
    border: 2px solid black;
    color: black;
    padding: 7px 13px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    border-radius:10px;
  }
  .button:hover {
    background-color: #5FFF14;
    border: 4px solid #00FFE6;
  }

.mode {
    margin-left: auto;
    margin-right:auto;
    text-align: center;
}

.reset {
    margin-left: auto;
    margin-right:auto;
    margin-top: 10px;
    text-align: center;
}
.reset_button{
    background-color:  #69F069; 
    border: 2px solid black;
    color: black;
    padding: 10px 120px;
    text-align: center;
    display: inline-block;
    font-size: 26px;
    font-weight: bold;
    border-radius:10px;
}
.reset_button:hover {
    background-color: #5FFF14;
    border: 4px solid #00FFE6;
  }

.timer {
    margin-left: auto;
    margin-right:auto;
    text-align: center;
}
.time{
    border: 2px solid black;
    background-color:  #00FFE6;
    margin: auto;
    display: inline-block;
    font-size: 26px;
    font-weight: bold;
}
.time_box{
    border : 2px solid black;
    width: 245px;
    height: 15px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}
.table_container {
    margin-left: auto;
    margin-right:auto;
    margin-top: -5px;
    text-align: center;
}
.actual_level{
    margin-bottom: -5px;
    border: 2px solid black;
    padding: 3px 20px;
    display: inline-block;
    margin-left: auto;
    margin-right:auto;
    background-color: #00FFE6;
    text-align: center;
    color:black;
    font-size: 20px;
    border-radius:10px;
}

.win{
    border: 2px solid black;
    padding: 10px 100px;
    display: inline-block;
    margin-left: auto;
    margin-right:auto;
    background-color: #00FFE6;
    text-align: center;
    color:black;
    font-size: 30px;
    border-radius:10px;
}

.table{
    width: 485px;
    height: 485px;
    margin: auto;
    margin-top: 10px;
    background-color: black
}
.table_won{
    border: 3px solid black;
    width: 485px;
    height: 485px;
    margin: auto;
    margin-top: -5px;
    background-color: black
}

.item_red1 {
    background-color: red;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
    border-bottom: 4px solid #00FFD1;
    border-left: 4px solid #00FFD1;
    border-top: 4px solid #00FFD1;
    animation-name: blinking_red;
    animation-duration: 1s;
    animation-iteration-count: 100;
}.item_red2 {
    background-color: red;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
    border-bottom: 4px solid #00FFD1;
    border-right: 4px solid #00FFD1;
    border-top: 4px solid #00FFD1;
    animation-name: blinking_red;
    animation-duration: 1s;
    animation-iteration-count: 100;
}

@keyframes blinking_red {
    50% {
      border-color: red;
    }
}


.item_brown {
    background-color: #5C4033;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_lightblue {
    background-color: lightblue;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_yellow {
    background-color: yellow;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_purple {
    background-color: purple;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_green {
    background-color: lightgreen;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_rose {
    background-color: pink;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_darkblue {
    background-color: darkblue;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_orange {
    background-color: orange;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_cyan {
    background-color: cyan;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_darkgreen {
    background-color: darkgreen;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item_magenta {
    background-color: magenta;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}.item0 {
    background-color: gray;
    width: 75px;
    height: 75px;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    color:black;
    font-weight:bolder;
    font-size:xx-large;
}#item_exit {
    border-right: 6px solid #00FFD1;
}