div.is-hidden {
    display: none;
}
div.is-visible {
    display: block;
}
body {
    text-align: center;
    user-select: none;
}
.answer {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;/*背景色*/
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.select {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;/*背景色*/
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.select:hover {
    background: #333;/*背景色*/
    border: 2px solid #333;
    color: #fff;/*文字色*/
    cursor: pointer;/*カーソルをポインターに変える*/
}
p {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
}
#start:hover {
    border: 5px solid #333;/*線*/
background-color:lightyellow;    
cursor: pointer;/*カーソルをポインターに変える*/
}



button {
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 20px;
}
li {
  font-size: 23px;
}

#pending-content, #done-content {
  display: none;
}

#pending-button.active, #done-button.active{
  color: blue;
  background-color: red;
}

#pending-content.active, #done-content.active {
  display: block;
}