App Icon - OneNote

@mixin centerer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background: #ffc107;
    position: relative;
}

.icon-large {
    width: 220px;
    height: 220px;
    border-radius: 38px;
    @include centerer;
}

.icon-onenote {
    background: linear-gradient(to bottom, #8c4387, #754472 100%);
    perspective: 600px;
}

.page {
    width: 122px;
    height: 106px;
    @include centerer;
    border-radius: 3px;
    border: 13px solid #fff;
    background: transparent repeating-linear-gradient(to bottom, transparent 0px, transparent 6px, #fff 6px, #fff 15px);
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    &:before, &:after {
        content: "";
        display: block;
        position: absolute;
    }
    &:before {
        width: 15px;
        height: 29px;
        background: #fff;
        right: -25px;
        top: -8px;
        border-radius: 3px;
    }
    &:after {
        width: 15px;
        height: 29px;
        background: #fff;
        right: -25px;
        top: 25px;
        border-radius: 3px;
        box-shadow: 0 34px 0 0 #fff;
        transform: translateZ(-1px);
    }
}
@keyframes cover-rotate{
  0%{
      transform: translate3d(-47%, -50%, 4em) rotateY(-56deg);
  }
    10%{
      transform: translate3d(-47%, -50%, 4em) rotateY(-56deg);
  }
  100%{
      transform: translate3d(-40%, -50%, 4em) rotateY(-135deg);
  }
}
.cover {
    font-family: 'Open Sans', sans-serif;
    width: 130px;
    height: 106px;
    background: #fff;
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
    transform-origin: 0 50%;
    @include centerer;
    transform: translate3d(-47%, -50%, 4em) rotateY(-56deg);

  animation:cover-rotate 2s infinite alternate;
}

.letter-n {
    width: 15px;
    height: 40px;
    background: #7f3b7a;
    position: absolute;
    top: 33px;
    left: 42px;
    &:before, &:after {
        content: "";
        display: block;
        position: absolute;
        background: #7f3b7a;
    }
    &:before {
        width: 10px;
        height: 49px;
        transform-origin: 0 0;
        transform: rotate(-49deg);
        top: 8px;
        left: 8px;
    }
    &:after {
        width: 14px;
        height: 40px;
        top: 0px;
        left: 45px;
    }
}