body {
    line-height: 24px;
    max-width: 932px;
    user-select: none;
}

input {
    width: 40px;
    height: 30px;
    background-color: #ffffff;
    color: black;
    text-align: center;
    font-size: 1.2rem;
    border: 1px solid gray;
    margin: 16px;
}

#game {
    border: 5px solid black;
    width: 44.5%;
    margin: 20px auto;
    position: relative;
    height: 394px;
}

#outputArea {
    color: red;
    width: 60%;
    margin: 10px auto;
}

.butSize {
    width: 160px;
}

.adjust {
    position: relative;
    top: -18px;
}

.box_info {
    position: absolute;
    width: 60px;
    height: 60px;
    text-align: center;
    color: #0000FF;
}

.instructions {
    text-align: center;
    width: 80%;
    font-size: .9rem;
    margin: 10px auto;
}

.pos0, .pos1, .pos2, .pos3, .pos4, .pos5 {
    top: -10px;
}


.pos6, .pos7, .pos8, .pos9, .pos10, .pos11 {
    top: 55px;
}

.pos12, .pos13, .pos14, .pos15, .pos16, .pos17 {
    top: 120px;
}

.pos18, .pos19, .pos20, .pos21, .pos22, .pos23 {
    top: 185px;
}

.pos24, .pos25, .pos26, .pos27, .pos28, .pos29 {
    top: 250px;
}

.pos30, .pos31, .pos32, .pos33, .pos34, .pos35 {
    top: 315px;
}

.pos0, .pos6, .pos12, .pos18, .pos24, .pos30 {
    left: -5px;
}


.pos1, .pos7, .pos13, .pos19, .pos25, .pos31 {
    left: 60px;
}

.pos2, .pos8, .pos14, .pos20, .pos26, .pos32 {
    left: 125px;
}

.pos3, .pos9, .pos15, .pos21, .pos27, .pos33 {
    left: 190px;
}

.pos4, .pos10, .pos16, .pos22, .pos28, .pos34 {
    left: 255px;
}

.pos5, .pos11, .pos17, .pos23, .pos29, .pos35 {
    left: 322px;
}

.center {
    text-align: center;
}

.smallnote {
    font-size: .9rem;
}

button {
  margin: 0 10px;
  display: inline-block;
}