html {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

a {
    text-decoration: none;
}

table, tr, td {
    border: none;
}

main > table {
    margin: 50px;
}

table.side-table {
    border-collapse: collapse;
}

table.side-table tr {
    margin: 0;
    padding: 0;
}

table.side-table td {
    margin: 0;
    padding: 6px;
    height: 30px;
    width: 30px;
    font-weight: bold;
    font-size: 24px;
    line-height: 1;
    border: black solid 1px;
    text-align: center;
}

.g {
    background-color: green;
}
.r {
    background-color: #d22;
}
.b {
    background-color: blue;
}
.o {
    background-color: orange;
}
.w {
    background-color: white;
}
.y {
    background-color: yellow;
}

.arrow {
    cursor: pointer;
    position: absolute;
}

#arr0 {
    transform: translate(-60px, -60px) rotate(-30deg);
}
#arr1 {
    transform: translate(60px, 60px) rotate(150deg);
}
#arr2 {
    transform: translate(-300px, 0px) rotate(-90deg);
}
#arr3 {
    transform: translate(300px, 0px) rotate(-90deg);
}
#arr4 {
    transform: translate(0px, 270px) rotate(30deg);
}
#arr5 {
    transform: translate(0px, -150px) rotate(-30deg);
}