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

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

.content {
  background-image:url('backg.jpg');
  height:auto;
  padding:20px;
  margin:0 auto;
}
.note-one {
  width:324px;
  height:315px;
  margin-left:20px;
  margin-top:20px;
  position:relative;
  background-image:url('tysomnoyneya.png');
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
  overflow:auto;
}
.note-one > p {
  padding-top:30px;
}
.note-two {
  background-image: url('proksimaplakat.png');
  background-color: #000000;
  width: 312px;
  height: 360px;
  position: relative;
  transform: rotate(2deg);
  border: 2px solid #8a8a8a;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
  overflow: hidden;
}
.note-two::before {
	 position: absolute;
	 border-style: solid;
	 border-color: transparent;
}
.note-two::after {
	 position: absolute;
	 border-style: solid;
	 border-color: transparent;
}
.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:#F0F8FF;
  width:400px;
  height:400px;
  background-image:url('https://sadgrl.online/images/bgs/tile/sandy.jpg');
}
.note-five-fg {
  background-image:url('absoli.png');
  width:309px;
  height:117px;
  position:absolute;
  top:0;
  right:0;
  transform:rotate(-5deg);
}
.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);
  position: relative;
  width: 300px; 
  height: 400px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

.blue::before {
  content: "";
  position: absolute;
  bottom: -1.9em;
  right: 0;
}

.blue::after {
  content: "";
  position: absolute;
  bottom: -1.9em;
  left: 0;
  right: 1.9em;
}
.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;
}