.wrapper {
  margin: auto;
  max-width: 1018px;
  vertical-align: middle;
  max-height: 700px;
}

body {
  overflow-y: hidden;
    background-image: url('../img/studio.png');
}

.footer {
  position: relative;
  text-align: center;
  top: -1058px;
  color: #cccccc;
  font-family: "Calibri", sans-serif;
  text-decoration: none;
}
.footer a:visited, a:active, a {
  text-decoration: none;
  color: #cccccc;
}
.footer a:hover {
  text-decoration: underline;
}

#button1SolveIndicator {
  top: -1525px;
  left: 556px;
}
#button2SolveIndicator {
  top: -1545px;
  left: 611px;
}
#button3SolveIndicator {
  top: -1565px;
  left: 663px;
}
#button4SolveIndicator {
  top: -1585px;
  left: 717px;
}
#button5SolveIndicator {
  top: -1605px;
  left: 771px;
}
#button6SolveIndicator {
  top: -1625px;
  left: 824px;
}
#button7SolveIndicator {
  top: -1645px;
  left: 878px;
}
.solveIndicatorBase {
  position: relative;
  width: 38px;
  height: 20px;
  opacity: 70%;
}

.yellowBox {
  box-shadow: 0 0 12px 12px #999900;
  background-color: yellow;
}

.greenBox {
  box-shadow: 0 0 12px 12px #009900;
  background-color: #009900;
}

.scrollingTextHolder {
  position: relative;
  left: 99px;
  top: -1027px;
  visibility: hidden;
}

.reveal {
  position: relative;
  left: 99px;
  top: -1204px;
}

.scrollingTextHolder div {
  width: 388px;
  height: 176px;
  opacity: 60%;
  border-radius: 15px;
  font-weight: bold;
  color: darkred;
  display: block;
  background-color: white;
  overflow-y: auto;
  padding: 0 8px;
  font-family: "Courier New", monospace;
}

.scrollingTextHolder div b {
  color: darkblue;
}

.scrollingTextHolder div a:visited, .scrollingTextHolder div a:active, .scrollingTextHolder div a {
  color: darkred;
  text-decoration: underline;
}
.scrollingTextHolder div a:hover {
  text-decoration: none;
  color: red;
}
div.audioControls audio {
  position: relative;
  top: -1076px;
  left: 99px;
  display: block;
  width: 410px;
  height: 58px;
  opacity: 50%;
}

div.yearInput {
  position: relative;
  text-align: center;
  left: 99px;
  top: -550px;
  width: 400px;
  height: 75px;
  opacity: 50%;
  display: block;
}

#flagContainer {
  position: relative;
  left: 99px;
  top: -990px;
  width: 400px;
  height: 5px;
  display: block;
}

.flagContainer label {
  font-family: "Trebuchet MS", sans-serif, arial;
  font-weight: bold;
  font-size: 18pt;
  opacity: 100%;
  color: darkred;
  visibility: hidden;
  display: block;
  text-align: center;
}

.flagContainer input {
  font-family: "Courier New", "Monotype Corsiva", monospace;
  font-weight: bold;
  font-size: 18pt;
  border-radius: 15px;
  color: darkred;
  opacity: 45%;
  visibility: hidden;
  top: -155px;
}

.yearInput label {
  font-family: "Trebuchet MS", sans-serif, arial;
  font-weight: bold;
  font-size: 36pt;
  opacity: 100%;
  color: darkred;
  visibility: hidden;
}

#mainAudio {
  visibility: hidden;
}

.yearInput input {
  font-family: "Courier New", "Monotype Corsiva", monospace;
  font-weight: bold;
  font-size: 36pt;
  border-radius: 15px;
  color: darkred;
  visibility: hidden;
}

div.buttons {
  position: relative;
  width: 54px;
  height: 80px;
  opacity: 75%;
}
div.button1 {
  left: 552px;
  top: -691px;
}
div.button2 {
  left: 606px;
  top: -771px;
}
div.button3 {
  left: 660px;
  top: -851px;
}
div.button4 {
  left: 714px;
  top: -931px;
}
div.button5 {
  left: 766px;
  top: -1011px;
}
div.button6 {
  left: 820px;
  top: -1092px;
}
div.button7 {
  left: 874px;
  top: -1170px;
}

div.leftButton {
  position: relative;
  left: 565px;
  top: -1255px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

img.dial {
  position: relative;
  left: 558px;
  top: -1659px;
  width: 345px;
  height: 283px;
  opacity: 0;
}

div.timer {
  position: relative;
  left: 656px;
  top: -1614px;
  color: darkred;
  font-size: 36pt;
  font-weight: bold;
  font-family: "Courier New", monospace;
  width: 160px;
  text-align: center;
  padding-top: 5px;
  background-color: black;
  opacity: 70%;
  visibility: hidden;
  border-radius: 15px;
}


body {
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
    height: 100vh;           /* or any fixed height */
}