html {
  background: url(images/boris2.jpg) no-repeat center center fixed;
  background-size: cover;
}

body {
   font-family: 'Noto Sans', sans-serif;
   font-size: 1.5em;

}

h1 {
  margin: 0;
}

.tagline {
  font-size: 0.8em;
  font-style: italic;
  margin: 0;
}

hr {
  width: 33%;
  border: 1px dotted grey;
}

/* Style whole page */
#content {
  text-align: center;
  height: 90vh;
  margin: 0;
  padding: 0;
}

/* Style gameboard */

#gameboard {
  /* display: grid; */
  /* grid-gap: 0.5rem; */
}

.letter {
  display:inline-block;
  width: 1.8vw;
  padding: 12px;
  margin: 4px;
  border: 3px solid black;
  border-radius: 4px;
}

.guess {
  padding: 6px;
  margin: 0px;
}

@media (max-width:1000px) {
  .letter {
    width: 6vw;
    height: 6vh;
    padding: 2px;
    margin: 2px;
    border: 2px solid black;
    border-radius: 2px;
  }
  .guess {
    padding: 2px;
  }
}

.guess-wrong {
  background-color: #787c7e;
  color: #fff;
}

.guess-right {
  background-color: #6aaa64;
  color: #fff;
}

.guess-present {
  background-color: #c9b458;
  color: #fff;
}

/* Style keyboard */
#keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 12px;
}

.key {
  background-color: #ddd;
  padding: 12px;
  margin: 6px;
  border-radius: 4px;
}

.key-wrong {
  background-color: #787c7e;
}

.key:hover {
  background-color: #bbb;
  cursor: pointer;
}

.keyrow {
  padding: 12px;
  margin: 6px;
}

@media (max-width:1000px) {
  .key {
    padding: 2px;
    margin: 2px;
    border: 2px solid black;
    border-radius: 2px;
  }
  .keyrow {
    padding: 6px;
    margin: 2px;
  }
}

/* Style credit */
.credit {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 0.4em;
  padding: 0;
  margin: 0;
}

@media(max-width:1000px) {
  .credit {
    display: none;
  }
}