body {
    margin: 0;
    padding: 0;
}

.cube {
    display: flex;
    flex-wrap: wrap;

    min-width: 600px;

    margin: 100px;
}

.side {
    width: 150px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
}

.component-cube {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
}

.cube-label {
    font-weight: 700;
}

.component-cube-green {
    background-color: green;
}

.component-cube-red {
    background-color: red;
}¨

.component-cube-white{
    background-color: white;
}

.component-cube-blue {
    background-color: blue;
}
.component-cube-orange {
    background-color: darkorange;
}
.component-cube-yellow {
    background-color: yellow;
}


.order-0 {
    display: flex;
    align-items: center;
    order: 0;
    height: 450px;
}

.order-1 {
    order: 1;
    position: absolute;
    left: 250px;
    top: 100px
}

.order-2 {
    order: 2;
    position: absolute;
    left: 250px;
    top: 250px
}

.order-3 {
    order: 3;
    position: absolute;
    left: 250px;
    top: 400px
}

.order-4 {
    order: 4;
    position: absolute;
    left: 400px;
    top: 250px
}

.order-5 {
    order: 5;
    position: absolute;
    left: 550px;
    top: 250px
}


#swap-1 {
    width: 50px;
    position: absolute;
    left: 50px;
    top: 312.5px
}

#swap-2 {
    width: 50px;
    position: absolute;
    left: 700px;
    top: 312.5px
}

#swap-3 {
    width: 50px;
    position: absolute;
    left: 300px;
    top: 80px
}
#swap-4 {
    width: 50px;
    position: absolute;
    left: 300px;
    top: 550px
}


.hidden {
    display: none;
}