/* 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." */

* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */

/* tip: you can add a scrollbar to any note by adding this property to its css class: overflow:auto; */ 

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;
}