.top-container {
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-size: auto 45px;
  padding-top: 8px solid transparent;
  background-clip: border-box;
  background-position: 0 -5px;
}

#combos-container, #findwords-container, #points-container {
  margin-right: 2%;
  overflow: hidden;
}

.top-container #objectives {
  height: fit-content;
}

#points-container {
  float: left;
  width: 11%;
  background-color: white;
  height: 40px;
  display: flex;
  text-align: center;
}

#points {
  margin: auto;
  font-family: 'bloggersans', Arial, sans-serif;
}

#woot {
  margin: auto;
  font-family: 'bloggersans', Arial, sans-serif;
}

#woot sup {
  font-size: 50%;
}

#woot-container {
  width: 87%;
  display: flex;
  text-align: center;
  background-color: white;
  height: 40px;
  margin-bottom: 2%;
}

/*******
    OBJECTIVES
********/
.objective-list, .objective-summary {
  margin: auto;
}

.objectives.active {
  width: 74%;
}

.objectives.disabled {
  background-color: lightgrey;
}

.objectives.active .objective-summary {
  display: none;
  height: 100%;
}

.objectives .objective-list {
  display: none;
  height: 100%;
}

.objectives.active .objective-list {
  display: block;
}

.objective-findword {
  height: 50%;
  width: 100%;
  display: block;
}

.objectives {
  display: flex;
  text-align: center;
  float: left;
  width: 11%;
  height: 100%;
  cursor: pointer;
  background-color: white;
  color: black;
}

.objective {
  border-bottom: lightgrey 1px dotted;
}

#inflections-found {
  font-family: 'bloggersans', Arial, sans-serif;
  display: block;
  width: 100%;
  height: 100px;
  border-radius: 3px;
  margin-bottom: 2%;
  background-color: white;
  overflow: hidden;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  -ms-column-gap: 15px;
  -o-column-gap: 15px;
  column-gap: 15px;
  columns: 3;
  -moz-column-fill: auto;
  -webkit-column-fill: auto;
  column-fill: auto;
}

.found-word:nth-child(-n+9) {
  color: lightgrey;
}

.found-word:nth-child(-n+6) {
  color: grey;
}

.found-word:nth-child(-n+3) {
  color: black;
}

.found-word {
  height: 33%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*******
COMBO
*******/
#current-combo-container {
  float: left;
  width: 100%;
  height: 18px;
  margin-bottom: 4%;
}

.current-combo {
  background-color: white;
  height: 18px;
  width: 15.8%;
  float: left;
  transition: background-color 0.15s;
  -webkit-transition: background-color 0.15s;
}

#current-combo-1, #current-combo-2, #current-combo-3, #current-combo-4, #current-combo-5 {
  margin-right: 1%;
}

.locked {
  background-color: lightgrey;
}

.reached-1, .reached-2 {
  color: #F7941D;
}

.reached-3, .reached-4 {
  color: #F37022;
}

.reached-5, .reached-6,
.reached-7, .reached-8,
.reached-9, .reached-10 .reached-11, .reached-12 {
  color: #F04124;
}

#current-combo-1.reached, #current-combo-2.reached {
  background-color: #F7941D;
}

#current-combo-3.reached, #current-combo-4.reached {
  background-color: #F37022;
}

#current-combo-5.reached, #current-combo-6.reached {
  background-color: #F04124;
}

ul#inflections-found {
  max-height: 500px;
  overflow-y: auto;
}

ul#squares {
  list-style-type: none;
  list-style-position: inside;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -o-user-select: none;
  user-select: none;
  -ms-user-select: none;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
}

ul#squares li {
  touch-action: none;
  font-family: 'bloggersans', Arial, sans-serif;
  height: 25%;
  width: 25%;
  border-radius: 20%;
  background-color: #213F2F;
  float: left;
  text-align: center;
  border: 4px solid transparent;
  background-clip: padding-box;
  display: flex;
}

ul#squares li p {
  margin: auto;
  cursor: pointer;
  color: white;
  font-size: 3em;
  text-align: center;
  border-radius: 25%;
}

ul#squares li p.read-write {
  color: black;
  font-size: 2em;
}

ul#squares li p input {
  width: 100%;
}

ul#squares li p span {
  position: absolute;
  bottom: 3%;
  right: 13%;
  font-size: 0.3em;
}

ul#squares li.selected {
  background-color: white;
}

ul#squares li.selected p {
  color: black;
}

ul#squares li.wrongWord {
  background-color: red;
}

.right-form, .wrong-form {
  font-size: 2.5em;
}

.wrong-form {
  -moz-text-decoration-line: line-through;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

.alreadyfound-form {
  color: lightgrey;
}

#game-container {
  max-width: 480px;
  margin: auto;
}

#fullscreen {
  cursor: pointer;
  position: fixed;
  height: 25px;
  width: 25px;
  top: 10px;
  left: 10px;
}

#giveup {
  cursor: pointer;
  height: 40px;
  background-color: white;
  margin-bottom: 2%;
  margin-right: 2%;
  padding: 0 10px;
  display: flex;
}

#giveup i {
  margin: auto;
}

#clock-wrapper {
  height: 40px;
  background-color: white;
  margin-bottom: 2%;
  padding: 0 10px;
  display: flex;
}

#clock-wrapper>#clock {
  margin: auto;
}

.flip-clock-before, .flip-clock-wrapper ul li a div div.shadow, .flip-clock-label {
  display: none;
}

.flip-clock-wrapper ul li, .flip-clock-wrapper ul li a {
  width: 10px !important;
}

.flip-clock-wrapper ul li a div div.inn {
  font-family: 'bloggersans', Arial, sans-serif;
  font-size: 15px;
  text-shadow: none;
  width: 50%;
  color: black;
  background-color: white;
  border-radius: 0;
}

.flip-clock-wrapper .flip {
  box-shadow: none;
  width: 10px !important;
  padding-left: 2px;
}

.flip-clock-wrapper ul li {
  line-height: 25px;
}

.flip-clock-wrapper ul {
  width: 10px !important;
  height: 20px;
  margin: 0 2px;
  background-color: white;
  border-radius: none;
  font-weight: normal;
}

.flip-clock-wrapper ul li a div {
  outline: none;
  width: 10px !important;
}

.flip-clock-wrapper ul.play li.flip-clock-active {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
  width: 10px !important;
}

.flip-clock-wrapper ul.play li.flip-clock-active .down {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

.flip-clock-divider {
  width: 10px;
  height: 15px;
}

.flip-clock-dot.top {
  top: 7px;
  background-color: none;
}

.flip-clock-dot.bottom {
  bottom: 0px;
}

.flip-clock-dot {
  background: black;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow: none;
}