html, body {
  font-family: 'Poppins', sans-serif;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes flip {
  0% {
 
    transform: rotateX(0deg);
    transition: transform;
  }
  30% {

    transform: rotateX(90deg);
    transition: transform;
  }
  100% {
    transform: rotateX(0deg);
    transition: transform;
  }
}

.flip {
  animation: flip 0.8s;
}

ul {
	white-space:nowrap;
    padding: 0;
    list-style-type: none;
}

li {
	display:inline-block;
}

#menu {
  font-weight: bold;
  text-align: center;
}

#menu li {
  margin-left:5px;
  margin-right:5px;
}

.menu-button{
  background-color:transparent;
  border-color:transparent;
}

#game {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  justify-content: center;
}

.game-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
 80% { transform: rotate(0deg); }
 85% { transform: rotate(5deg); }
 95% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.wiggle-row {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.game-row > div {
  flex-grow: 1;
  flex-basis: 0;
  border: 1px double #222222;
  margin: 5px;
  font-size:30px;
  min-width:38px;
  min-height:38px;
  max-width: 60px;
  font-weight:700;
  color:black;
  aspect-ratio: 1;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

#wrapper {
  display: flex;
  flex-direction: column;
  margin: auto;
  margin: 0 0px;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.keyboard {
  display: flex;
  justify-content: center;
}

.keyboard > div {
  max-width: 600px;
}

.hg-theme-default .hg-button {
  height: 60px;
  background-color: #989da3;
  color:white;
  font-weight:600;
}

.hg-theme-default {
  background: none;
}

.cell-val-correct {
  background-color: #2ecc71 !important;
  border-style: solid !important; 
  border-width: 2px !important;
  border-color: #506363 !important;
}

.cell-val-partial {
  background-color: #E0CC65 !important;
  border-style: dotted !important; 
  border-width: 2px !important;
  border-color: #506363 !important;
}

.cell-val-incorrect {
  background-color: #506363 !important;
  border-style: solid !important; 
  border-width: 2px !important;
  border-color: #506363 !important;
}

#game_area {
	margin: 0 auto;
}

#navbar {
	margin: 0 auto;
  display:flex;
  flex-flow: row nowrap;
  justify-content:space-around;
  align-items:center;
  max-width:600px;
}

#title{
  flex-basis: 60%;
  user-select: none;
}

.icon {
  width:30px;
  height:30px;
  user-select: none;
}

.exit{
  position:absolute;
  width:40px;
  height:40px;
  top:0px;
  right:0px;
  font-size:20px;
  background-color:transparent;
  background:none;
  border-color:transparent;
}

#message {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  background-color: #2ecc71; /* Black background with opacity */
  color:white;
  user-select: none;
  opacity:100%;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4; /* Specify a stack order in case you're using a different order for other elements */
  box-shadow:0px 0px 5px grey;
  border-radius: 3px;
  padding:2px 2px 2px 2px;
  white-space:nowrap;
  font-size:18px;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  background-color: white; /* Black background with opacity */
  opacity:100%;
  width:95%;
  max-width:600px;
  min-width:250px;
  height:60%;
  max-height:500px;
  min-height:420px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  box-shadow:0px 0px 15px grey;
  flex-flow: column nowrap;
  justify-content:center;
}

.description {
  font-size:14px;
  font-size:2.3vh;
  margin:3px;
}

#help {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  background-color: white; /* Black background with opacity */
  opacity:100%;
  width:100%;
  height:100%;
  max-width:600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  flex-flow: column nowrap;
  justify-content:space-evenly;
}

#example {
  position:relative;
  width:60%;
  margin-left:20%;
  display:flex;
  flex-flow:row nowrap;
  font-size:5vh;
}

.example-cell {
  min-width:30px;
  min-height:30px;
}

#besedko {
  min-width:30px;
  min-height:30px;
  max-width:100px;
  max-height:100px;
  margin-left:5px;
  display: block;
  width: 10%;
  height: auto;
  left:0px;
  top:5px;
  margin-right:auto;
}

.help-row {
  display:flex;
  flex-flow:row;
  justify-content:center;
}

#first-row {
  margin-top:20px;
  justify-content:center;
}

#filler {
  margin-left:auto;
}

#about {
  margin-right:60px;
  font-size:32px;
}

.example-cell {
  width:8vh;
  height:8vh;
  border: 1px double black;
  aspect-ratio: 1;
  text-align:center;
  align-items: center;
  color:white;
}

.overlay-row {
  display:flex;
  flex-flow:row;
  justify-content:center;
}

#distribucija-naslov {
  margin-top:20px;
  text-align: center;
}

#stat-numbers {
  margin-top:5px;
}

.id-block {  
  display:flex;
  flex-flow: column nowrap;
  margin-left: 12px;
  margin-right:12px;
}

.id-block > p {
  text-align:center;
  font-size:12px;
  margin-bottom:-3px;
}

.id-block > .stevilo {
  font-size:min(7vw,32px);
  font-weight:bold;
}

.progress {
  border-radius:0;
  background-color:transparent;
}

.bar-id {
  font-size:12px;
}

.bar-graph {
  width:80%;
  margin-left:auto;
  margin-right:auto;
}

.bar-graph-horizontal > div {
  float: left;
  margin-bottom: 3px;
  width: 100%;
}

.bar-graph-horizontal .bar-id {
  float: left;
  margin-top: 3px;
}

.bar-graph-horizontal .bar {
  border-radius: 3px;
  height: 15px;
  margin-left:12px;
  margin-top:5px;
}

.id-block > .napisi {
  font-size:14px;
}

.bar-graph-one .bar {
  background-color: #2e515f;
}

#party{
  margin-top:2%;
  justify-content:space-around;
  align-content:center;
}

#cas {
  font-size:32px;
  text-align:center;
}

#deli {
  background-color: #95a5a6;
  border-color:transparent;
  border-radius:10px;
  font-size:36px;
  width:120px;
  height:70px;
}

.deli-available {
  background-color: #2ecc71 !important;
}

.deli-unavailable {
  background-color: #95a5a6 !important;
}

#doniraj {
  height:50px;
  width:50px;
}

#stats {
  height:50px;
  font-family: 'Arial';
}

.stat-number{
  margin-right:5px;
  font-size:14px;
  text-align:left;
  font-family:'Arial';
}

@media only screen and (max-width: 340px) {
  .hg-theme-default .hg-button {
    height:40px;
    width:40px;
  }

  .id-block > .stevilo {
    font-size:16px;
  }  

  #wrapper {
    margin: 0px;
  }
}

@media only screen and (max-width: 300px) {
  .id-block {  
    margin-left: 6px;
    margin-right:6px;
  }
}

@media only screen and (max-height: 720px) {
  .hg-theme-default .hg-button {
    height:40px;
    width:40px;
  }

  #wrapper {
    margin: 0px;
  }
}

@media only screen and (max-height: 610px) {
  .game-row  {
    margin:auto;
    width:300px;
  }

  .game-row > div {
    font-size:20px;
  }

}

@media only screen and (max-height: 550px) {
  .game-row  {
    margin:auto;
    width:250px;
  }
  .game-row > div {
    font-size:14px;
  }

}

@media only screen and (max-height: 490px) {
  .game-row  {
    margin:auto;
    width:150px;
  }

  .game-row > div {
    font-size:12px;
  }

}