@import url(https://fonts.googleapis.com/css?family=Pacifico);
    body {
      background: url(https://subtlepatterns.com/patterns/noise_lines.png);
      font-family: "Pacifico", cursive;
      overflow: hidden;
      color: #fff;
    }
    .bgoverlay {
      background: rgb(92, 23, 92);
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
    }
    .container {
      position: relative;
      margin: 120px auto 0 auto;
      width: 320px;
    }
    .ico {
      display: block;
      width: 320px;
      height: 320px;
    }
    .open .ico {
      animation: open 4s;
      transform: scale(10);
    }
    .ico .title {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -95px;
      margin-top: -73px;
      z-index: 4;
      font-size: 50px;
      color: #fff;
      cursor: pointer;
      text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
    }
    .open .ico .title {
      opacity: 0;
      transition: all 0.3s ease;
      top: -100px;
    }
    .ico:before,
    .ico:after,
    .ico2:before,
    .ico2:after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      font-size: 20em;
      color: #ff4081;
      content: "\f004";
      font-family: FontAwesome;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .ico2:before,
    .ico2:after {
      color: #e91e63;
    }
    .ico:before {
      z-index: 3;
    }
    .ico:after {
      animation: explode 4s infinite;
    }
    .ico2:before {
      animation: explodeSmall 3s infinite;
    }
    .ico2:after {
      animation: explodeSmall 2s infinite;
    }
    .endtext {
      opacity: 0;
      position: absolute;
      top: -100px;
      width: 100%;
    }
    .open .endtext {
      top: 0;
      opacity: 1;
      animation: show 5s;
    }
    .endtext .close {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
    }
    .endtext h1,
    .endtext h2,
    .endtext h3 {
      text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
      text-align: center;
      font-weight: normal;
    }
    .endtext h1 {
      font-size: 30px;
    }
    .endtext h2 {
      font-size: 30px;
    }
    @keyframes explode {
      from {
        transform: scale(1);
        opacity: 1;
      }
      to {
        transform: scale(1.6);
        opacity: 0;
      }
    }
    @keyframes explodeSmall {
      from {
        transform: scale(1);
        opacity: 1;
      }
      to {
        transform: scale(1.2);
        opacity: 0;
      }
    }
    @keyframes open {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(10);
      }
    }
    @keyframes show {
      from {
        opacity: 0;
        top: -100px;
      }
      to {
        opacity: 1;
        top: 0;
      }
    }