body {
  background: #323232;
  color: #ededed;
}
a {
  color: #ededed;
}
.butterfly {
  --accent: rgb(152,72,196);
}
.elephant {
  --accent: rgb(189,157,17);
}
.fox {
  --accent: rgb(211,92,1);
}
.koala {
  --accent: rgb(33,129,207);
}
.owl {
  --accent: rgb(55,165,97);
}
.tiger {
  --accent: rgb(194,76,161);
}
.note {
  margin: 0 auto;
    overflow: hidden;
    position: relative;
    font-family: 'Indivisa Text Sans';
    font-size: 1.5em;
    text-align: center;
  color: #0e235e;
}
.note .icon {
  display: none;
  position: absolute;
  transform: rotate(-45deg);
  top: -30px;
  left: -30px;
  opacity: 0.15;
}
.butterfly .icon--butterfly {
  display: block;
}
.elephant .icon--elephant {
  display: block;
}
.fox .icon--fox {
  display: block;
}
.koala .icon--koala {
  display: block;
}
.owl .icon--owl {
  display: block;
}
.tiger .icon--tiger {
  display: block;
}
.note--body {
  background: #fdea00;
  border-radius: 2px 2px 0 0;
  padding: 2%;
}
.note--bodygray {
  background: #f6f6f6;
  border-radius: 2px 2px 0 0;
  padding: 2%;
}
.note--rip {
  position: relative;
  line-height: 0;
}
.note--rip img {
  position: relative;
  width: 100%;
  z-index: 2;
}
.note--rip::after {
  content: '';
  position: absolute;
  clip-path: url(#paperedgeTop);
  background: #fdea00;
  top: -6px;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-1deg)
}

.note--ripgray::after {
    content: '';
    position: absolute;
    clip-path: url(#paperedgeTop);
    background: #f6f6f6;
    top: -6px;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-1deg);
}

.note svg {
  display: none;
}
.note b {
  display: inline-block;
  line-height: 100%;
  border-bottom: 5px solid var(--accent);
  padding: 0 10px 2px;
}
.note--credits {
      font-size: 0em;
    text-align: center;
    max-width: 100%;
    font-family: sans-serif;
    line-height: 100%;
    margin: 0 auto;
}