table,
tr,
td {
    border: 2px solid lightgray;
    border-collapse: collapse;
    margin: auto;

}

tr,
td {
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;

}

/*要顯示的樣式*/
.red {
    background-color: red;
}

.blue {
    background-color: blue;
}


/*要消失的樣式*/
.black {
    background-color: black;
}

.yellow {
    background-color: yellow;
}

button,
h1,
p {
    font-family: "Merriweather", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 2rem;
    margin-bottom: 20px;
}

/*        版面背景底色*/
body {
    text-align: center;
    background-color: black;
    position: relative;
    padding: 20px;
}

h1,
p {
    color: white;
}


.buttons {
    width: auto;
    color: black;
    text-decoration: none;
    border-radius: 30px;
    background-color: white;
    margin-bottom: 50px;
    margin-left: 30px;
    /*          background-color: #f4623a;*/
}

.buttons:hover {
    background-color: black;
    color: white;

}

#menu {
    width: auto;
    /*            float: right;*/
    background-color: #000;
    opacity: 0.9;
    position: absolute;
    right: 0px;

}

li,
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 200px;
}




.cl-menu li {
    position: relative;
    border-radius: 30px;
}



.cl-menu>li:hover {
    font-weight: bold;
    opacity: 1;
                filter: alpha(opacity=100);
}



.cl-menu li:hover {
    background-color: #66819C;
}



.cl-menu li ul {
    position: absolute;
    top: 0;

    right: 100%;
    /*            border: 1px solid #000;*/
    display: none;


}

.cl-menu li:hover>ul {
    display: block;
    opacity: 1;

}

.cl-menu li ul li {
    background: brown;
    border: 1px solid #000;
    border-radius: 30px;

}

.cl-menu p {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
}

#rank {
  position: absolute;
  right: 50px;
  color: white;
  font-size: 1rem;
  border: 0;
  font-family: "Microsoft JhengHei";
}

#rank tr {
  border: 0;
}
#rank tr td{
  width: 50px;
  border: 0;
}