header {
     z-index: 500;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      font-size: 16px;
      height: 50px;
      padding: 1rem;
      color: white;
      background: black;
      display: flex;
      align-items: center;
      letter-spacing: 5px;
      opacity: 0.8;
}
.active {
      background-color: #4CAF50;
}
.circle {
          margin: 25px 10px;
          width: 200px;
          color: #fff;
          font-size: 32px;
          line-height: 200px;
          text-align: center;
          height: 200px;
          border-radius: 100px;
      }

      .bg-green {
          background: #5bd5a0;
      }

      .bg-yellow {
          background: #ffcc35;
      }

      .back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }

      .heart {

        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
        animation-name: beat;
        animation-duration: 1s;
        animation-iteration-count: infinite;
      }
      .heart:after {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0px;
        left: 25px;
      }
      .heart:before {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0px;
      }

      @keyframes backdiv {
        50% {
          background: #ffe6f2;
        }
      }

      @keyframes beat {
        0% {
          transform: scale(1) rotate(-45deg);
        }
        50% {
          transform: scale(0.6) rotate(-45deg);
        }
      }



input[type="checkbox"] {
    display: none;
}


        input[type="checkbox"] + label span {
            display: inline-block;
            width: 19px;
            height: 19px;
            margin: -2px 10px 0 0;
            vertical-align: middle;
            background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) left top no-repeat;
            cursor: pointer;
        }

    input[type="checkbox"]:checked + label span {
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -19px top no-repeat;
    }