styles.scss

* {
  color: white; 
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  --background-color: transparent;
  box-sizing: border-box;
}

.letter {
  visibility: hidden; 
  border: 1px solid white;
  width: 5rem;
  height: 5rem;
  display: flex; 
  justify-content: center;
  align-items: center;
  color: white;
  font: bold 9pt arial;
  text-decoration: none;
  text-align: center;
  background: #222;
  border-radius: 4px;
  box-shadow: 
    inset 0 0 25px #333,
    0 1px 0 #000,
    0 2px 0 #222,
    0 2px 3px #333;
  text-shadow: 0px -1px 0px #000;
}

.letter:hover {
  cursor: pointer;
  transform: scale(1.1,1.1); 
}


.first-half, .second-half{
  display: flex; 
  width: 90%; 
  justify-content: space-between;
}

body {
  max-width: 100%; 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-around; 
  align-items: center; 
  margin: 0;
  background: linear-gradient(to right, #355c7d, #6c5b7b, #c06c84);
}
.word {
  display: flex; 
  justify-content: space-evenly;
  width: 60%;
  font-size: 2rem;   
}

.word-letter{
  position:relative;
  width: 1.5rem;
  text-align: center;
}


.word-letter::after{
  content: ' ';
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
  height:2px;
  background-color: var(--background-color);
}

.game-data {
  visibility: hidden;
  font-weight: bold;
  font-size: 2rem; 
}

.game-start {
  border: 3px solid white; 
  padding: 10px; 
  border-radius: 15px; 
  font-weight: bold; 
  background: green;
}

.game-start:hover {
  opacity: 0.9; 
  transform: scale(1.1,1.1); 
  cursor: pointer; 
}

.game-title {
  font-size: 3rem;
}

.pressed {
  transform: matrix(0.95, 0, 0, 0.95, 0, 0);
}

@media screen and (max-width: 850px) {
  .first-half, .second-half{
    width: 90%; 
  }
  .letter {
    height: 5vh; 
  }
  .word {
    width: 100%;
  }

}