:root {
    --color-text: #666;
    --color-text-invert: #fff;
    --bgcolor-body : #efefef;
    --bgcolor-container : #fff;
  }


body {
  margin:0;
  max-width:1060px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bgcolor-body);
  color: var(--color-text);
  font-family: Arial, sans-serif;
  height: 100vh;
}
.container {background-color: var(--bgcolor-container);padding: 15px;min-height:100vh;}

h3 {margin-bottom: 0;}
.filter {margin-top: 5px;}
li {padding: 5px;}
.small {font-size: 12px;}

@media(max-width: 768px) {
  .pc_only {display: none;}
  .container {padding: 30px; }
}


#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
}
.header {background-color: var(--color-text);color: var(--color-text-invert);}
th {text-align: left;font-weight: normal;padding:5px;}
td {padding: 0 5px;}
tr:nth-of-type(even) {background-color: var(--bgcolor-body);}
input {padding-right:10px;padding-left:10px;border-radius: 5px;border: 2px solid #666;}
input[type=submit],input[type=text], button{
    width: 400px;
    height: 60px;
    margin-left:auto;
    margin-right:auto;
}
input[type=submit], button{border: 0; border-radius : 5px;width: 424px;background-color: var(--color-text);color: var(--color-text-invert);font-weight: bold;font-size: 24px;}
input[type=submit]:hover, button:hover{cursor: pointer;}
.single-letter {width: 20px !important; font-size: 24px;text-transform: uppercase;font-weight: bold;}