* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #2a9d8f;
  text-align: center;
}

#msg {
  font-size: 3em;
  font-weight: bold;
  background: #ffebd7;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-top: 15px;
}
.msg-container {
  height: 4vmin;
}

.container {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 3em;
  font-weight: bold;
  background: #f0f0f0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-top: 30px;
}

.game {
  height: 60vmin;
  width: 60vmin;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5vmin;
}

.box {
  height: 18vmin;
  width: 18vmin;
  border-radius: 1rem;
  border: none;
  box-shadow: 0 0 1rem rgb(0, 0, 0, 0.4);
  font-size: 8vmin;
  color: #ba534f;
  background-color: #d6ccc2;
}

.reset {
  background-image: linear-gradient(
    to right,
    #77a1d3 0%,
    #79cbca 51%,
    #77a1d3 100%
  );
}
.reset {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  /* display: block; */
}

.reset:hover {
  background-position: right center; 
  color: #fff;
  text-decoration: none;
}

.new-game {
  background-image: linear-gradient(
    to right,
    #77a1d3 0%,
    #79cbca 51%,
    #77a1d3 100%
  );
}
.new-game {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  /* display: block; */
}

.new-game:hover {
  background-position: right center; 
  color: #fff;
  text-decoration: none;
}

.hide {
  display: none;
}