@import url('https://fonts.googleapis.com/css2?family=Indie Flower&display=swap');

.post-it {
  display: table;
  margin: 5em auto 0;
}

.note1 { 
  position: absolute;
  top: 15%;
  left: 5%;
  width: 250px;
  height: 150px;
  background-color: #FFFAAC;
  border-color: #DFDA8C;
  color: #444444;
  text-align: center;
  margin: 1.5em auto;
  padding: 1.5em 1em;
  font-family: 'Indie Flower';
  font-size: 1.2em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.note1:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #eee;
  background: rgba(250, 250, 250, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}

.note2 { 
  position: absolute;
  top: 15%;
  left: 75%;
  width: 250px;
  height: 150px;
  background-color: #FFFAAC;
  border-color: #DFDA8C;
  color: #444444;
  text-align: center;
  margin: 1.5em auto;
  padding: 1.5em 1em;
  font-family: 'Indie Flower';
  font-size: 1.2em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
}

.note2:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #eee;
  background: rgba(250, 250, 250, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}
.note3 { 
  position: absolute;
  top: 45%;
  left: 12%;
  width: 250px;
  height: 150px;
  background-color: #FFFAAC;
  border-color: #DFDA8C;
  color: #444444;
  text-align: center;
  margin: 1.5em auto;
  padding: 1.5em 1em;
  font-family: 'Indie Flower';
  font-size: 1.2em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

.note3:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #eee;
  background: rgba(250, 250, 250, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}

.note4 { 
  position: absolute;
  top: 45%;
  left: 70%;
  width: 250px;
  height: 150px;
  background-color: #FFFAAC;
  border-color: #DFDA8C;
  color: #000000;
  text-align: center;
  margin: 1.5em auto;
  padding: 1.5em 1em;
  font-family: 'Indie Flower';
  font-size: 1.2em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.note4:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #eee;
  background: rgba(250, 250, 250, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}