article.notebookpaper {
	position: relative;
	width:33%;
	max-width:100vw;
	/*height: 33vh;*/
	position: relative;
	background-color: #fff;
	background-image: 
		linear-gradient(to bottom, rgba(255,255,255,1),  rgba(255,255,255,1) 60px,  rgba(255,255,255,0) 61px,  rgba(255,255,255,0) 100%),
		repeating-linear-gradient(
			to bottom,
			rgba(12, 76, 145, 0.7) 0px,
			rgba(0, 0, 0, 0) 1px,
			rgba(0, 0, 0, 0) 20px
		)
	;
	margin:0.75rem 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 0 1.5rem 0 1.5rem;
	gap: 1.25rem;
	line-height: 1.25rem;
  
	font: normal normal 400 16px / 1.45cap "Gloria Hallelujah", cursive !important;
	color: #333;
}
article.notebookpaper.note {
	background-image: 
		repeating-linear-gradient(
			to bottom,
			rgba(12, 76, 145, 0.7) 0px,
			rgba(0, 0, 0, 0) 1px,
			rgba(0, 0, 0, 0) 20px
		)
	;
}

article.notebookpaper.black-ink,
article.notebookpaper *.black-ink {
	color: #333;
}
article.notebookpaper.red-ink,
article.notebookpaper *.red-ink {
	color: #e30202;
}
article.notebookpaper.blue-ink,
article.notebookpaper *.blue-ink {
	color: #0013de;
}
article.notebookpaper.green-ink,
article.notebookpaper *.green-ink {
	color: #089000;
}
article.notebookpaper::before {
  position: absolute;
  left: 6%;
  height: 100%;
  width: 1px;
  content: "";
  background-color: salmon;
}

article.notebookpaper::after {
  position: absolute;
  left: -2.5%;
  bottom: 0.5%;
  width: 28px;
  height: 13px;
  background-color: rgba(200, 200, 200, 0.7);
  transform: rotateZ(45deg);
  content: "";
  z-index: 2;
}

article.notebookpaper header{
  /*background-color: #fff;
  background-image:none;*/
  font: normal normal 400 18px / 1.45cap "Gloria Hallelujah", cursive;
  position: relative;
  width:100%;
  font-size: 1.25rem;
  font-weight:normal;
  /*color: #333;*/
  margin:2.25rem 0 0 0;
}
article.notebookpaper blockquote {
  font: normal normal 400 16px / 1.45cap "Gloria Hallelujah", cursive;
  position: relative;
  width:100%;
  font-size: 0.75rem;
  /*color: #333;*/
  text-wrap: balance;
  gap: 1.25rem;
  line-height: 1.25rem;
  margin: 1.25rem 0 0 0;
  /*text-indent:1.25rem;*/
}

article.notebookpaper header + blockquote{
	margin: 0.15rem 0 0 0;
}
article.notebookpaper blockquote::after {
  position: absolute;
  right: calc(-4.5% - 1.25rem);
  top: calc(-4% - 1.25rem);
  width: 28px;
  height: 13px;
  background-color: rgba(200, 200, 200, 0.7);
  transform: rotateZ(45deg);
  content: "";
}
article.notebookpaper header + blockquote::after{
  top: calc(-5% - 5rem);
}

article.notebookpaper cite {
  font: normal normal 400 16px / 1.45cap "Gloria Hallelujah", cursive;
  font-size: 0.75rem;
  width:100%;
  /*color: #333;*/
  text-decoration: italic;
  text-align:right;
  margin-bottom:1.25rem;
  gap: 1.25rem;
  line-height: 1.25rem;
}

@media (max-width: 1400px) {
  article.notebookpaper::after {
    right: 89%;
  }
}

@media (max-width: 1250px) {
  article.notebookpaper blockquote::after {
    left: 100%;
  }
}

@media (max-width: 980px) {
  article.notebookpaper {
    width: 22%;
    padding: 0 2.2% 0 2.2%;
  }
}

@media (max-width: 600px) {
  article.notebookpaper::after {
    right: 85%;
  }
}

@media (max-width: 560px) {
  article.notebookpaper {
    width: 44%;
    padding: 0 4.5% 0 4.5%;
  }
  article.notebookpaper blockquote::after {
    left: 105%;
  }
  article.notebookpaper::after {
    right: 91%;
  }
}