html{
  height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body, html{
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  height: 100%;
  font-size: 16px;
}

h1,h2,h3,h4,h5, p, a{
  margin: 0;
  padding: 0;
}



.train-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.training-area{
  width: 50vw;
  min-width: 300px;
  max-width: 600px;
  height: 30vh;
  text-align: center;
}

.prompt{
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #212427;
  text-transform: uppercase;
}

.button-row{
  display: flex;
  align-items: center;
  justify-content: center;
}


.train-button{
  width: 25%;
  background-color: #cccccc;
  border: 1px solid black;
  margin: 2px;
}
.train-button::after{
  display: block;
  margin-top: -1.5em;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2em;

}
.train-button:nth-of-type(1)::after{
  content: "s"
}
.train-button:nth-of-type(2)::after{
  content: "d"
}
.train-button:nth-of-type(3)::after{
  content: "l"
}
.train-button:nth-of-type(4)::after{
  content: ";"
}


@media screen and (max-width: 600px) {
 
}