CSS Battle - #9 Tesseract

HTML

<div class="box-bg"></div>
<div class="square"></div>
<div class="square small"></div>
<div class="square circle"></div>

CSS

  body {
    margin: 0;
    background: #222730;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .box-bg {
    background: #4CAAB3;
    height: 150px;
    width: 100%;
  }

  .square {
    position: absolute;
    background: #222730;
    height: 250px;
    width: 250px;
    transform: rotate(45deg);
  }

  .small {
    background: #4CAAB3;
    height: 150px;
    width: 150px;
  }

  .circle {
    background: #393E46;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }