@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500&display=swap');

#gamestatus {
	font-family: 'Dosis', sans-serif;
}

#gamestatus statusheader {
	font-weight: 500;
	color: red;
}

#gamestatus ul {
  line-height: 1.5em;
  margin: 5px 0 15px;
  padding: 0;
}

#gamestatus li {
  list-style: none;
  position: relative;
  padding: 0 0 0 20px;
  font-weight: 300;
}

#gamestatus li.checkmark::before {
  content: ""; 
  position: absolute; 
  left: 2px; 
  top: 5px; 
  width: 6px;
  height: 12px;
  border: solid #f9dd94;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#gamestatus li.circle-checkmark::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 2px; 
  border: solid 8px #f9dd94;
  border-radius: 8px;
}

#gamestatus li.circle-checkmark::after {
  content: ""; 
  position: absolute; 
  left: 5px;
  top: 5px;
  width: 6px;
  height: 12px;
  border: solid #7eb4e2;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#gamestatus li.cross::before {
  content: "";
  position: absolute;
  height: 15px;
  border-left: 2px solid #f9dd94;
  transform: rotate(45deg);
  top: 2px;
  left: 5px;
}

#gamestatus li.cross::after {
  content: "";
  position: absolute;
  height: 15px;
  border-left: 2px solid #f9dd94;
  transform: rotate(-45deg);
  top: 2px;
  left: 5px;
}

        
#gamestatus li.line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  display: block;
  border-top: 2px solid #f9dd94;
}