.field {
    width: 100%;
    height: 0;
    padding-bottom: 92%;
    background-color: #ADD9F4;
    position: relative;
}

.line {
    border-style: solid;
    border-color: #BB8;
    border-width: 1.5vw;
    position: absolute;
}

.separator {
    border-style: dashed;
    border-color: #C44;
    border-width: 0.5vw;
    position: absolute;
    visibility: hidden;
}

.separator-horizontal {
    width: 90vw;
    height: 0vw;
    margin-left: 3vw;
    margin-top: 0vw;
}

.separator-vertical {
    width: 0vw;
    height: 86vw;
    margin-left: 0vw;
    margin-top: 0vw;
}

#front-space {
    border-top: none;
    margin-top: 0vw;
    height: 27vw;
    margin-left: 5vw;
    width: 84vw;
}

#back-space {
    margin-top: 27vw;
    height: 53vw;
    margin-left: 5vw;
    width: 84vw;
}

.player {
    width: 10.6vw;
    height: 10.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5.5vw;
    font-family: sans-serif;
    font-weight: bold;
    position: absolute;
    color: #EEE;
    filter: drop-shadow(0 0 0.5vw #777);
    border-radius: 100%;
    border-style: solid;
    border-color: transparent;
    border-width: 0.7vw;
}

.smooth {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.setter {
    background-color: #B28759;
}

.opposite {
    background-color: #44633F;
}

.outside {
    background-color: #984447;
}

.middle {
    background-color: #456990;
}

.front-row {
    border-color: transparent;
}

.back-row {
    border-color: white;
}

/* Rotation 1 */

#setter0.L1 {
    margin-left: 74vw;
    margin-top: 14vw;
}

#outside0.L1 {
    margin-left: 79vw;
    margin-top: 2vw;
}

#middle0.L1 {
    margin-left: 64vw;
    margin-top: 23vw;
}

#opposite0.L1 {
    margin-left: 18vw;
    margin-top: 55vw;
}

#outside1.L1 {
    margin-left: 45vw;
    margin-top: 60vw;
}

#middle1.L1 {
    margin-left: 72vw;
    margin-top: 55vw;
}

/* Rotation 2 */

#setter0.L2 {
    margin-left: 70vw;
    margin-top: 5vw;
}

#outside0.L2 {
    margin-left: 18vw;
    margin-top: 55vw;
}

#middle0.L2 {
    margin-left: 8vw;
    margin-top: 25vw;
}

#opposite0.L2 {
    margin-left: 30vw;
    margin-top: 72vw;
}

#outside1.L2 {
    margin-left: 45vw;
    margin-top: 60vw;
}

#middle1.L2 {
    margin-left: 72vw;
    margin-top: 55vw;
}

/* Rotation 3 */

#setter0.L3 {
    margin-left: 65vw;
    margin-top: 5vw;
}

#outside0.L3 {
    margin-left: 18vw;
    margin-top: 55vw;
}

#middle0.L3 {
    margin-left: 45vw;
    margin-top: 60vw;
}

#opposite0.L3 {
    margin-left: 60vw;
    margin-top: 72vw;
}

#outside1.L3 {
    margin-left: 72vw;
    margin-top: 55vw;
}

#middle1.L3 {
    margin-left: 75vw;
    margin-top: 25vw;
}

/* Rotation 4 */

#setter0.L4 {
    margin-left: 7vw;
    margin-top: 1vw;
}

#outside0.L4 {
    margin-left: 45vw;
    margin-top: 60vw;
}

#middle0.L4 {
    margin-left: 72vw;
    margin-top: 55vw;
}

#opposite0.L4 {
    margin-left: 79vw;
    margin-top: 66vw;
}

#outside1.L4 {
    margin-left: 18vw;
    margin-top: 55vw;
}

#middle1.L4 {
    margin-left: 10vw;
    margin-top: 14vw;
}

/* Rotation 5 */

#setter0.L5 {
    margin-left: 40vw;
    margin-top: 6vw;
}

#outside0.L5 {
    margin-left: 45vw;
    margin-top: 60vw;
}

#middle0.L5 {
    margin-left: 60vw;
    margin-top: 72vw;
}

#opposite0.L5 {
    margin-left: 72vw;
    margin-top: 55vw;
}

#outside1.L5 {
    margin-left: 18vw;
    margin-top: 55vw;
}

#middle1.L5 {
    margin-left: 7vw;
    margin-top: 1vw;
}

/* Rotation 6 */

#setter0.L6 {
    margin-left: 50vw;
    margin-top: 8vw;
}

#outside0.L6 {
    margin-left: 72vw;
    margin-top: 55vw;
}

#middle0.L6 {
    margin-left: 72vw;
    margin-top: 18vw;
}

#opposite0.L6 {
    margin-left: 65vw;
    margin-top: 2vw;
}

#outside1.L6 {
    margin-left: 18vw;
    margin-top: 55vw;
}

#middle1.L6 {
    margin-left: 45vw;
    margin-top: 60vw;
}