body {
  background: #2F2F2F;
  margin: 0;
  padding: 0;
}

* { box-sizing:border-box;}

:root {
    --block-width: 200px;
    --block-height: 200px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#selector_box {
  width: auto;
  display: inline-block;
  background: rgb(238,225,204);
}

.selector {
  width: var(--block-width);
  height: var(--block-height);
  display: block;
}

#head {
  z-index: 6;
  background: rgb(238,225,204);
}

#jacket {
  z-index: 4;
  background: green;
}

#shirt_container {
  width: var(--block-width);
  height: var(--block-height);
  position: relative;
  display: flex;
  justify-content: center;
}

#shirt {
  z-index: 5;
  background: blue;
}

#shirt .ui-resizable-handle:nth-child(2):after {
  margin: 0 0 0 5px;
}

#shirt .ui-resizable-handle:nth-child(1):after {
  margin: 0 0 0 -5px;
}

#pants_container {
  width: var(--block-width);
  height: var(--block-height);
  position: relative;
  display: block;
}

#pants {
  z-index: 3;
  background: orange;
}

#pants .ui-resizable-handle:after {
  bottom: 5px !important;
  top: unset;
}

#socks_container {
  width: var(--block-width);
  height: 20px;
  position: relative;
  display: block;
}

#socks {
  z-index: 1;
  height: 20px;
  background: purple;
  bottom: 0;
  top: unset !important;
}

#shoes {
  z-index: 2;
  height: 30px;
  background: white;
}

.ui-resizable-handle:after {
  content: '';
  background: black;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

.ui-resizable-n {
  top: 0 !important;
}

.ui-resizable-e {
  right: 0 !important;
}

.ui-resizable-s {
  bottom: 0 !important;
}

.ui-resizable-w {
  left: 0 !important;
}