#list { 
  list-style-type: none;
  margin-left:30px;
}

#list li {
  margin-right:2px;
  padding: 10px; 
  font-size: 1em; 
  border: 2px solid black; 
  border-radius:0.5em; 
  display:inline;
  background-color:white;
  margin-left:8px;
  white-space:nowrap;
  line-height:3;
}

#list li:hover {
  background-color:#abcdef;
  cursor:pointer;
}

#highlightCheck, #highlightNext {
  margin-left:700px;
  margin-top:30px;
}

#highlightErrorMessage {
  margin-top:-23px;
}

.clicked {
  background-color:#abcdef;
}

.colored {
  background-color:rgb(171,205,239);
}

.li { background-color:lightgray; 
}

.li.green {
  background-color:green;
}

@media only screen and (max-width: 1000px) {
  #list li {
    display:block;
    width:max-content;
    margin-left:120px;
    margin-bottom:35px;
    margin-top:-25px;
    line-height:1;
  }
}

@media only screen and (max-width: 855px) {
  #highlightCheck,#highlightNext {
    margin-left:85%;
  }
}

@media only screen and (max-width:830px) {
  #text {
    margin-left:60px;
  }
  
  #numberAndHeading {
    margin-left:60px;
  }
  
  #list {
    margin-left:10px;
  }
}