/* 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);
    position: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;
  }