/* adding heaps of notes for myself to ensure i truly understand what each element is doing  */

@font-face {
  font-family: "postit";
  src: url("../fonts/postit.ttf") format("truetype");
  font-display: swap;
  
}

/* This is the popup window with the post-it not with information about all of the CDS... this is for the body content */
.popup-content {
  width: 300px;
  height: 400px;
  background-image: url("postit.jpg");
  background-size: cover;
  padding: 20px;
  padding-left: 100px; /* move text to the right */
  font-family: postit;
  font-size: 50px;
  position: relative; /* This is the base font size for text inside the postit box, unless it is overridden with h2, p, or a (which is headings, paragraphs and links) */
}

  
/* This is h2 e.g. <h2> for a title or a header so it's bigger than the body text in the post-it note */  

.popup-content h2 {
  font-size: 30px;
  margin-top: 10px;
}
/* This is p e.g. <p> if you're wanting smaller text than the body or the title above  */  
.popup-content p {
  font-size: 20px;
  margin: 4px 0;
  line-height: 1.2;
}
/* this is for the links within the post-it note pop up*/ 
.popup-content a {
  font-size: 18px;
  font-family: postit;
  text-decoration: none;
  color: #e74477;
}


body {
  margin: 0;
  padding: 0;
  background: #f7f2e9;
  font-family: sans-serif;
}

/* Scrapbook spread */
.scrapbook {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  padding: 0;
  gap: 0;
}


.page {
  width: 50%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.left {
  transform: rotate(0deg);
}
.right {
  position: relative;
  top: -3.6px;
  transform: rotate(-0.08deg)
}
/* these are for the cd details in the popup so i can align the lines easier */
.line-title {
  position: relative;
  top: 2px;     
  left: 10px;   
}

.line-artist {
  position: relative;
  top: 2px;
  left: 7px;
}

.line-year {
  position: relative;
  top: -2px;
  left: 7px;
}

.line-notes {
  position: relative;
  top: -6px;
  left: 7px;
}

.line-faves {
  position: relative;
  top: -7px;
  left: 7px;
}

.album-art {
  display: block;
  width: 200px;      
  height: auto;
  margin: 20px auto 0 auto;  
  border-radius: 6px;        
}