/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body {
  margin:0;
  padding:0;
  font-family:sans-serif;
}
p {
  padding:20px;
}

.content {
  background-image:url('https://yesterweb.org/img/bb/cork.png');
  margin:0 !important;
  height:auto;
  padding:20px !important;
  margin:0 auto;
}
.note-one {
  width:220px;
  height:350px;
  margin-left:20px;
  margin-top:20px;
  position:relative;
  background-color: #cbe0c3;
  background-image:url('https://yesterweb.org/img/bb/paper-3.png');
  overflow:auto;
}
.note-one > p {
  padding-top:30px;
}
.note-one-fg {
  background-color:#fff968;
  width:150px;
  height:150px;
  margin-left:auto;
  margin-right:auto;
  left: 0;
  right: 0;
  transform:rotate(-5deg);
  poisition:relative;
}
.note-one-fg::before {
   	 content: "";
	 position: absolute;
	 bottom: -1.9em;
	 right: 0;
	 border-width: 2em 2em 0 0;
	 border-style: solid;
	 border-color: #ddd756 transparent;
}
.note-one-fg::after {
	 content: "";
	 position: absolute;
	 bottom: -1.9em;
	 left: 0;
	 right: 1.9em;
	 border-width: 1em;
	 border-style: solid;
	 border-color: #fff968;
}
.note-two {
  background-color:#ffbcd9;
  width:200px;
  height:200px;
  margin-top:20px;
  position:relative;
  transform:rotate(2deg);
}
.note-two::before {
   content: "";
	 position: absolute;
	 bottom: -1.8em;
	 right: 0;
	 border-width: 2em 2em 0 0;
	 border-style: solid;
	 border-color: #d8a2ab transparent;
  
}
.note-two::after {
	 content: "";
	 position: absolute;
	 bottom: -1.8em;
	 left: 0;
	 right: 1.9em;
	 border-width: 1em;
	 border-style: solid;
	 border-color: #ffbcd9;
}
.note-three {
  background-image:url('https://yesterweb.org/img/bb/lined_paper.png');
  width:300px;
  height:500px;
  transform:rotate(-2deg);
}
.note-three-top{
  background-color:#FAFAFA;
  width:300px;
  height:40px;
}
.note-four {
  background-color:lightyellow;
  width:200px;
  height:300px;
}
.note-five {
  position:relative;
  background-color:white;
  width:500px;
  height:700px;
  background-image:url('https://sadgrl.online/images/bgs/tile/sandy.jpg');
}
.note-five-fg {
  background-color:#FFF968;
  width:200px;
  height:200px;
  position:absolute;
  top:0;
  right:0;
  transform:rotate(-4deg);
}
.row {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:20px;
  justify-content:space-evenly;
  align-items:center;
}
.row > div {
  margin-right:30px;
  margin-bottom:30px;
}
.paperclip {
  max-width:60px;
  position:absolute;
  top:-30px;
  left:50px;
}
.blue {
  background-color:lightblue;
  transform:rotate(-2deg);
}
.blue::before {
   content: "";
	 position: absolute;
	 bottom: -1.9em;
	 right: 0;
	 border-width: 2em 2em 0 0;
	 border-style: solid;
	 border-color: #89b6c4 transparent;
  
}
.blue::after {
	 content: "";
	 position: absolute;
	 bottom: -1.9em;
	 left: 0;
	 right: 1.9em;
	 border-width: 1em;
	 border-style: solid;
	 border-color: lightblue;
}
.tack {
  width:30px;
  margin:0 auto;
  display:block;
  margin-top:10px;
}
.larger {
  width:70px;
  margin-left:50px;
  margin-top:0px;
}
.tape {
  width:110px;
  margin-top:-20px;
  margin-left:-20px;
  transform:rotate(5deg);
}
.intro {
  width:500px;
  height:100px;
  text-align:center;
  background-color:#6d457d;
  background-image:url('https://yesterweb.org/img/bb/starring.png');
  color:white;
  transform:rotate(2deg);
}
.intro > p {
  margin:20px;
  padding:0;
}