html {
  visibility:hidden;
}

.i-circle {
  display:inline-block;
  margin-bottom:20px;
}

.explanation{
  font-size:1.1em;
}
/* what is this for? find out and comment
.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
*/

#sortable { 
  list-style-type: none;
  margin-left:30px;
  width:100%;
}

#sortable 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:1;
}

#dragAndDropCheck, #dragAndDropNext {
  margin-left:850px;
}

#dragAndDropErrorMessage {
  margin-top:-15px;
}

@media only screen and (max-width: 1320px) {
  #dragAndDropCheck,#dragAndDropNext {
    margin-left: 85%;
  }
}

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

@media only screen and (max-width:830px) {
  #text {
    margin-left:60px;
  }
  #sortable {
    margin-left:0px;
  }
  #numberAndHeading {
    margin-left:60px;
  }
  .i-circle{
    margin-bottom:0px;
  }
}