<div class="divider"></div>

<div class="icon-1"></div>
<div class="icon-2"></div>
<div class="icon-3"></div>
<div class="icon-4"></div>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>

<div class="letter-r"></div>
<div class="letter-a"></div>
<div class="letter-i"></div>
<div class="letter-l"></div>
<div class="letter-s-1"></div>
<div class="letter-s-2"></div>

// colors
$bg-color: #cc0000;
$logo-color: #fff;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }
  }
}

.divider {
  z-index: 4;
  width: 90vmin;
  height: 35vmin;
  background: $bg-color;
  top: 63.9vmin;
}

.icon {
  &-1 {
    width: 45vmin;
    height: 60vmin;
    background: $logo-color;
    top: 35vmin;
    left: -30vmin;
    border-radius: 50%;

    &::before {
      width: 30vmin;
      height: 30vmin;
      background: $logo-color;
      top: 5vmin;
      left: -3.6vmin;
      transform: rotate(-25deg) skewX(-35deg);
      border-radius: 50%;
    }

    &::after {
      z-index: 2;
      width: 18vmin;
      height: 18vmin;
      background: $logo-color;
      top: -0.4vmin;
      left: 26vmin;
      transform: rotate(-23.2deg) skewY(25deg);
      border-radius: 0 100% 0 0;
    }
  }

  &-2 {
    z-index: 1;
    width: 10vmin;
    height: 1vmin;
    background: $bg-color;
    top: -24.8vmin;
    left: -26vmin;
    transform: rotate(12deg);
  }

  &-3 {
    z-index: 2;
    width: 30vmin;
    height: 30vmin;
    background: $bg-color;
    top: 14.8vmin;
    left: -17.2vmin;
    border-radius: 50%;

    &::before {
      width: 15vmin;
      height: 15vmin;
      background: $bg-color;
      top: 11vmin;
      left: -2.7vmin;
      transform: rotate(30deg) skewY(40deg);
      border-radius: 50%;
    }

    &::after {
      width: 18vmin;
      height: 18vmin;
      background: $bg-color;
      top: 3.8vmin;
      left: 21.5vmin;
      transform: rotate(-7deg) skewY(25deg);
      border-radius: 0 100% 0 0;
    }
  }

  &-4 {
    z-index: 2;
    width: 8vmin;
    height: 10vmin;
    background: $bg-color;
    top: 2vmin;
    left: 15.5vmin;
    transform: rotate(46deg);
    box-shadow: 6vmin 8.5vmin 0 0.1vmin$bg-color;
  }
}

.box {
  &-1 {
    z-index: 2;
    width: 2.5vmin;
    height: 2.5vmin;
    background: $logo-color;
    top: 24vmin;
    left: -42.7vmin;
    transform: skewX(3deg) skewY(20deg);

    &::before {
      width: 1vmin;
      height: 4vmin;
      background: $bg-color;
      top: -1vmin;
      left: 2.3vmin;
      transform: rotate(-6deg);
    }

    &::after {
      width: 2.5vmin;
      height: 2.7vmin;
      background: $logo-color;
      top: -0.4vmin;
      left: -17.9vmin;
      transform: skewY(-22deg) rotate(25deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 1.8vmin;
    height: 2.7vmin;
    background: $logo-color;
    top: 8.9vmin;
    left: -42.6vmin;
    transform: skewY(25deg) rotate(15deg);

    &::before {
      width: 1vmin;
      height: 4vmin;
      background: $bg-color;
      top: -1vmin;
      left: 1.6vmin;
      transform: rotate(-5deg);
    }
  }

  &-3 {
    z-index: 2;
    width: 2.1vmin;
    height: 2.2vmin;
    background: $logo-color;
    top: -9.4vmin;
    left: -66.1vmin;
    transform: rotate(40deg) skewX(-1deg);

    &::before {
      width: 1.8vmin;
      height: 1.8vmin;
      background: $logo-color;
      top: -10vmin;
      left: 1.9vmin;
      transform: rotate(18deg);
    }

    &::after {
      width: 1.3vmin;
      height: 2vmin;
      background: $logo-color;
      top: -17.6vmin;
      left: 7.1vmin;
      transform: rotate(33deg) skewX(-15deg);
    }
  }

  &-4 {
    z-index: 2;
    width: 2.1vmin;
    height: 1.5vmin;
    background: $logo-color;
    top: -24.4vmin;
    left: -13vmin;
    transform: skewY(20deg) skewX(-1deg);

    &::before {
      width: 2.1vmin;
      height: 1.4vmin;
      background: $logo-color;
      top: 6.3vmin;
      left: 0.1vmin;
      transform: skewY(-15deg);
    }

    &::after {
      width: 2vmin;
      height: 1.4vmin;
      background: $logo-color;
      top: 9.4vmin;
      left: -6.3vmin;
      transform: skewY(-14deg) rotate(-22deg);
    }
  }

  &-5 {
    z-index: 2;
    width: 1.9vmin;
    height: 1.7vmin;
    background: $logo-color;
    top: -3.3vmin;
    left: -36.6vmin;
    transform: rotate(-40deg) skewY(-10deg) skewX(-5deg);
  }
}

.letter {
  &-r {
    z-index: 3;
    width: 4vmin;
    height: 15vmin;
    background: $logo-color;
    top: 14.3vmin;
    left: -25.5vmin;

    &::before {
      width: 4.2vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: 3.6vmin;
      left: 4vmin;
      border-radius: 0 1.9vmin 1.9vmin 0;
      box-shadow: 0.8vmin -0.2vmin 0 3.4vmin $logo-color;
    }

    &::after {
      width: 4.2vmin;
      height: 10vmin;
      background: $logo-color;
      top: 8vmin;
      left: 6.6vmin;
      transform: rotate(-44deg) skewY(20deg);
    }
  }

  &-a {
    z-index: 3;
    width: 11.8vmin;
    height: 15vmin;
    background: $logo-color;
    top: 14.2vmin;
    left: 11vmin;
    border-radius: 3.7vmin 4vmin 0 0;

    &::before {
      width: 3.8vmin;
      height: 4.5vmin;
      background: $bg-color;
      top: 3.5vmin;
      left: 4vmin;
      border-radius: 1vmin 1vmin 0 0;
    }

    &::after {
      width: 3.8vmin;
      height: 4vmin;
      background: $bg-color;
      top: 12.2vmin;
      left: 4vmin;
    }
  }

  &-i {
    z-index: 3;
    width: 4.2vmin;
    height: 15vmin;
    background: $logo-color;
    top: 14.3vmin;
    left: 30.5vmin;
  }

  &-l {
    z-index: 3;
    width: 4.2vmin;
    height: 15vmin;
    background: $logo-color;
    top: 14.3vmin;
    left: 42.4vmin;

    &::before {
      width: 9.9vmin;
      height: 4vmin;
      background: $logo-color;
      top: 11vmin;
    }
  }

  &-s {
    &-1 {
      z-index: 3;
      width: 10.3vmin;
      height: 9.1vmin;
      background: $logo-color;
      top: 8.5vmin;
      left: 70.6vmin;
      border-radius: 4vmin 0 0 4vmin;

      &::before {
        width: 3.5vmin;
        height: 4vmin;
        background: $bg-color;
        top: 5vmin;
        left: 7.1vmin;
      }

      &::after {
        width: 7.5vmin;
        height: 1.8vmin;
        background: $bg-color;
        top: 3.7vmin;
        left: 3.6vmin;
      }
    }

    &-2 {
      z-index: 3;
      width: 3.7vmin;
      height: 9.2vmin;
      background: $logo-color;
      top: 19.6vmin;
      left: 78.2vmin;
      border-radius: 0 3.7vmin 3.7vmin 0;

      &::before {
        width: 7vmin;
        height: 4vmin;
        background: $logo-color;
        top: 5.4vmin;
        left: -6.9vmin;
      }
    }
  }
}