header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    position: relative;
  }

body {
    overflow: scroll;
}


.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr; 
    width: 100vw;
    height: 100vh;
}
.button {
  border: none;
  color: white;
  text-decoration: none;
  display: inline-block;
  margin: 10px auto;
  cursor: pointer;
  width: 90%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
}

.buttonY{
    background-color: orange;
    grid-row: 1;
}
.buttonX{
    background-color: blue;
    grid-row: 2;
}
.buttonA{
    background-color: green;
    grid-row: 3;
}

.buttonStart{
    background-color: red;
    grid-row: 4;
    width: 50%;
    font-size: 12px;

}

.button_container {
    position: absolute;
    display: grid;
    left: 25%;
    top: 25%;
    height: 50%;
    width: 50%;
}
.image_container {
    position: absolute;
    top: 20%;
    height: 80%;
    width: 80%;
}
.joy_container {
    height: 100%;
    width: 100%;
}

.left {
    position: relative;
    background: rgba(63, 58, 55, 0.1);
    grid-column: 1;
    height: 100%;
}
.middle {
    position: relative;
    background: rgba(45, 48, 45, 0.1);
    grid-column: 2;
    height: 100%;
}

.right {
    position: relative;
    background: rgba(63, 58, 55, 0.1);
    grid-column: 3;
}