.wrapper {
  width: 100%;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
}

#heading {
  grid-column: 1 / span 7;
}

#messageWrapper, #infoW {
  display: flex;
  align-items: center;
  justify-content: center;
}

#infoW {
  flex-direction: column;
  margin-top: 0;
}

#name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  max-width: 30rem;

  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

#codeW, #trainer {
  width: 100%;
  max-width: 40rem;
  padding: 0.3rem;

  display: flex;
  justify-content: flex-end;
}

#codeW {
  margin-bottom: 2rem;
}

#code {
  background-color: var(--color-primary-fill);
}

#startButton, #exitButton {
  width: 6rem;
  height: 5rem;
  margin-bottom: 0.5rem;
}

#buttonWrapper {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

#teacher {
  width: 100%;
  display: flex;
  align-items: center;
}