@font-face {
  font-family: "Inktrap";
  src: url(./font/WhyteInktrap-Regular.ttf);
  font-display: fallback;
}


:root{
  font-size: 62.5%; /* 62.5% of 16px = 10px */
  /* More on css variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/var also in lecture 6 */
  --bp-sm: 375px;
  --bp-large: 1280px;
  --bg-color: #f8f8f8;
  font-family: "Avenir Next", "futura-pt", sans-serif;
  /* We found overflow-x clip worked best for what we were trying to do here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x and in advanced css lecture */
  overflow-x: clip !important;
  /* We wanted to intergrate basic transitions to make the scrolling experience on our site smoother. We found this on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations */
  scroll-behavior: smooth;
}

*{
  background-color: var(--bg-color);
}

body {
  overflow-x: clip !important;
}

article {
  display: grid;
  /* 1.6rem is margin-inline */
  grid-template-columns:0.8rem repeat(5, 1fr) 0.8rem;
  gap: 0.8rem;
}

article > *{
  grid-column: 2/7;
}

h1 {
  margin-block-start: 6rem;
  font-family: Inktrap;
}

h1 > p:first-child{
  font-size: clamp(5rem,16vw,8rem);
  line-height: 1;
  padding-inline: 2rem 2rem;
  white-space: pre-line;
  text-transform: uppercase;
}
/* We built a system using pseudo-elements to insert structural lines within the layout. The ::after selector lets us add a line that visually cuts through the grid. https://developer.mozilla.org/en-US/docs/Web/CSS/::after#:~:text=%2F*%20properties%20*%2F%20%7D-,Description,quote%20marks%2C%20or%20other%20decoration */
h1 > p:first-child::after{
  content: "";
  display: block;
  background-color: black;
  height: 0.6rem;
  width: 150%;
  margin-block: 0rem 1.4rem;
  margin-inline-start: -8rem;
}

h1 > p:nth-child(2){
  font-size: clamp(2rem,6vw,5rem);
  line-height: 1.2;
  /* padding-block: 1rem ; */
  white-space: pre-line;
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
}

h1 > p:nth-child(2)::after{
  content: "";
  display: block;
  background-color: black;
  height: 0.6rem;
  width: 150%;
  margin-block: 1rem;
  margin-inline-start: -8rem;
}

header {
  /* transform-origin: right top; */
  transform: rotate(10deg) translate(3.5rem) ;
  position: relative;
}

header::after {
  content: "";
  display: block;
  background-color: black;
  height: 70rem;
  width: 0.6rem;
  margin-inline-end: 1rem;
  position:absolute;
  top: 0;
}
/* We wanted to include toggle function for the menu button and found this on MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input */
input#menu-toggle {
  display: none;
}


.menu {
  background-color: black;
  height: clamp(4.5rem,10vw,10rem);
  width: clamp(4.5rem,10vw,10rem);
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-color);
  font-size: clamp(1.2rem,2.6vw,3rem);
  text-transform: uppercase;
  font-family: "Avenir Next", "futura-pt", sans-serif;
  z-index: 4;
  cursor: pointer;
}

.menu-content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 120vh;
  right: 120vw;
  font-size: clamp(1.8rem,4.2vw,3rem);
  font-family: "Inktrap", "Avenir Next", "futura-pt", sans-serif;
  padding-inline: 3rem 8rem;
  padding-block: 14rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3rem;
  z-index: 3;
  transition: all 0.2s ease-in-out;
  transform: rotate(5deg) translateX(5rem);
  background-color: unset;
}

.menu-content::before {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: -1;
  top: -10vh;      
  left: -30vw;    
  width: 134vw;    
  height: 120vh; 
  transform: rotate(-5deg) translateX(-5rem);
  backdrop-filter: blur(3rem);
}

.menu-content::after{
  content: "";
  position: absolute;
  background-color: black;
  width: 0.6rem;
  height: 140vh;
  margin-inline-end: 4rem;
  top:0
}

.menu-content *{
  background-color: unset;
}


.menu-content > P{
  text-transform: uppercase;
  margin-inline-start: 2rem;
  font-size: clamp(5rem,15vw,10rem);
}

.menu-content > P::after{
  content: "";
  display: block;
  background-color: black;
  height: 0.4rem;
  width: 200vw;
  margin-block: 1rem;
  margin-inline-start: -40vw;
}

.menu-content > ul{
  display: flex;
  flex-direction: column;
  gap: clamp(2rem,8vw,6rem);
  line-height: 1.3;
  margin-inline-start: 2rem;
}



.menu-content > ul > li::after{
  content: "";
  display: block;
  background-color: black;
  height: 0.4rem;
  width: 180vw;
  margin-block: 1rem;
  margin-inline-start: -30vw;
  position: absolute;
}

#menu-toggle:checked ~ .menu-content {
  top: 0;
  right: 0;
}

.date-author {
  font-size: clamp(1.6rem,1.6vw,3rem); 
  margin-block-start: 7rem;
}

.intro{
  margin-block-start: 2.4rem;
  font-size: clamp(2rem,2.5vw,3rem);
  line-height: 1.3;
}

section.intro > p{
  margin-block: 1.8rem;
  line-height: 1.4;
  
}
 
h2 {
  font-family: Inktrap;
  position: relative; 
  transform: rotate(10deg) translateX(2rem);
  background-color: var(--bg-color);
  position: sticky ;
  top:3.5rem ;
  margin-block: 15rem 5rem;
  hyphens: auto;
  z-index:2;
  /* the white space on the top */
  box-shadow: -5rem -8rem 0 2rem var(--bg-color); 
  /* scroll-margin-top: 6rem;  */

}
/* White space beside the H2 */
h2::before {
  content: "";
  position: absolute;
  background-color: var(--bg-color);
  z-index: -1;
  width: 100vw;
  height: 100%;
  top: 0;
  left: -100%;
}

h2 > * {
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
}

h2 > .section-number {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

h2 > .section-number > div:first-child {
  display: inline-block;
  line-height: 1;
  padding-block-start: 2rem;
  height: fit-content;
  font-size: 4.2rem;
  text-decoration-color: rgba(0, 0, 0, 0);
  position: relative;
}


h2 > .section-number > div:nth-child(2) {
  background-color: rgb(0, 0, 0);
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  border-radius: 50%; 
}

h2 > .section-number::after {
  content: "";
  display: block;
  background-color: black;
  height: 0.4rem;
  width: 150%;
  margin-inline-start: -10rem;
  position: absolute;
  top: 0;
}


h2 > span {
  display: block;
  line-height: 1.3;
  font-size: clamp(2rem,3vw,2.8rem); 
  text-transform: uppercase;
  /* text-decoration: underline; */
  text-underline-offset: 0.7rem;
}

h2 > span::after {
  content: "";
  display: block;
  background-color: black;
  height: 0.4rem;
  width: 180vw;
  margin-block-start: 1rem;
  margin-inline-start: -10rem;
}

h2 > .section-number::after {
  content: "";
  display: block;
  background-color: black;
  height: 0.4rem;
  width: 200vw;
  margin-inline-start: -90vw;
  position: absolute;
  top: 0;
}


h2::after{
  content: "";
  display: block;
  background-color: rgb(0, 0, 0);
  height: 70rem;
  width: 0.4rem;
  margin-inline-end: 1rem;
  position:absolute;
  top: 0;
  left:-2rem;
}

section.bodytext {
  display: grid;
  grid-template-columns:repeat(5, 1fr);
  gap: 0.8rem;
}

section.bodytext > * {
  grid-column: 1/6;
}

.clipped-border {
  /* 1. 设置形状 */
  clip-path: polygon(0% 0%, 97% 0%, 100% 100%, 0% 100%);
  /* 2. 背景色就是边框颜色 */
  background-color: rgb(0, 0, 0); 
  /* 3. Padding 大小就是边框粗细 */
  padding: 4px; 
  /* 确保它是行内块或块级 */
  display: inline-block; 
  /* 解决 Grid item 会自动拉伸宽度导致留白的问题 */
  width: fit-content;
  /* 可选：去掉图片默认间隙 */
  line-height: 0; 
  /* max-width: 100%; */
}

.clipped-border img {
  /* 让图片填满容器（减去padding区域） */
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  /* 关键：图片也要应用同样的形状，或者利用父元素的形状裁切（如果形状简单可以直接靠父元素，复杂形状建议让图片撑满内容区自然适配） */
   clip-path: polygon(0% 0%, 97% 0%, 100% 100%, 0% 100%);
  /* 或者如果形状简单，直接 width: 100% 撑满即可，因为父元素已经 clip 过了 */
}

div.caption{
  font-size: clamp(1.4rem,1vw,1.8rem);
  /* text-align: center; */
  margin-block-top: 0.8rem;
}

section.bodytext > p { 
  font-size: clamp(1.8rem,2.2vw,2.4rem); 
  line-height: 1.45;
  margin-block: 1rem;
}

section.bodytext > p.quote {
  display: block;
  grid-column: 2/6;
  font-size: clamp(2rem,2.4vw,2.8rem); 
  line-height: 1.45;
  margin-block: 4rem 3rem;
  padding-inline-start: 1rem;
  /* border-left: 0.4rem solid black; */
  /* text-decoration: underline;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em; */
  border-left: 0.4rem solid black;
  transform: rotate(5deg);
}

span.outlink{
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em;
  transform: rotate(2deg);
  transition: all 0.2s ease-in-out;
}

span.outlink:hover{
  transform: rotate(0deg);
}

span.noBreak
{ white-space: nowrap; } 

footer{
  /* background-color: rgb(204, 204, 204); */
  /* padding: 4rem 2rem; */
  padding-inline: 3rem 5rem;
  transform: rotate(-10deg) translateX(2rem);
  margin-block-start: 18rem;
  position: relative;
}

footer > p:first-child{
  font-family: "Inktrap";
  font-size: clamp(4.5rem,5vw,8rem);
  line-height: 1.2;
  text-transform: uppercase;
  position: relative;
  padding-block-start: 2rem ;
}

footer > p:first-child::after{
  content: "";
  display: block;
  width: 120vw;
  height: 0.6rem;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  margin-inline-start: -8rem;
}

footer > p:last-child{
  font-family: "Inktrap";
  font-size: clamp(2.2rem,2.2vw,3.4rem);
  line-height: 1.2;
  position: relative;
  padding-block-start: 2rem ;
}
footer > p:last-child::after{
  content: "";
  display: block;
  width: 120vw;
  height: 0.6rem;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  margin-inline-start: -10rem;
}

footer > p {
  color: rgb(0, 0, 0);
  margin-inline: 1rem;
  font-size: 1.6rem;
}

footer::after {
  content: "";
  display: block;
  background-color: black;
  height: 80vh;
  width: 0.6rem;
  margin-inline-end: 1rem;
  position:absolute;
  top: 0;
  right: 4rem;
}





/* Media Queries for BigScreen */

@media screen and (min-width:480px){
  h2 {
    font-family: Inktrap;
    position: relative; 
    transform: rotate(10deg) translateX(2rem);
    background-color: var(--bg-color);
    position: sticky;
    top: 6rem;
    margin-block: 18rem 5rem;
    hyphens: auto;
    z-index:2;
    /* the white space on the top */
    box-shadow: -5rem -10rem 0 2rem var(--bg-color); 
  }
}


@media screen and (min-width: 715px) {

  h1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-block-start: 5rem;
    
  }

  h1 > p:first-child{
    font-size: clamp(5rem,12vw,14rem);
    width: fit-content;
    white-space: pre;
    text-align: right;
    position: relative;
  }

  h1 > p:first-child::before{
    content: "";
    display: block;
    background-color: black;
    height: 300%;
    width: 0.6rem;
    position: absolute;
    top: 100%;
    left: 6rem;
  }


  h1 > p:first-child::after{
    content: "";
    display: block;
    background-color: black;
    height: 150%;
    width: 0.6rem;
    position: absolute;
    bottom: -1.5rem;
    right: 0;
  }


  h1 > p:nth-child(2){
    /* Don‘t need it to automatically word wrap */
    white-space: pre;
    font-size: clamp(2rem,4vw,4.5rem);
    transform: rotate(-90deg) translateY(clamp(30rem,47vw,55rem));
    transform-origin: left bottom;
    background-color: unset;
  }

  h1 > p:nth-child(2)::after{
    content: "";
    display: none;
  }

  article {
  display: grid;
  /* 1.6rem is margin-inline */
  grid-template-columns:3rem repeat(8, 1fr) 3rem;
  gap: 0.8rem;
  }

  header {
    /* transform-origin: right top; */
    transform: rotate(10deg) translateX(4rem) ;
    position: relative;
  }

  header::after {
  content: "";
  display: block;
  background-color: black;
  height: 0.6rem;
  width: 130vw;
  margin-inline-end: 1rem;
  position: absolute;
  top: 100%;
  left: -12vw;
  }

  div.date-author {
      grid-column: 3/10;
  }

  .intro{
    /* font-size: 3rem; */
    grid-column: 3/10;
  }

  .menu {
 
    top: 2rem;
    left: 2rem;
  }

  .menu-content {
    font-size: clamp(2rem,3vw,3rem);
    transform: rotate(5deg) translateX(clamp(5rem,10vw,20rem));
  }

  .menu-content::before {
    top: -15vh;      
    left: -40vw;    
  }

  .menu-content > P{
    font-size: clamp(8rem,11vw,18rem);
  }

  .menu-content > P::after{
    content: "";
    display: block;
    background-color: black;
    height: 0.4rem;
    margin-block: 1rem;
  }

  .menu-content > ul{
    gap: clamp(2rem,5vw,5rem);
  }



  section.bodytext {
    grid-column: 3/10;
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 0.8rem;
  }

  section.bodytext > p{
    grid-column: 1/6;
  }

  section.bodytext > p.quote {
    transform: rotate(-2deg);
    margin-block: 4rem 4rem;
  }

  section.bodytext > h2{
    grid-column: 1/7;
    display: flex;
    flex-direction: row-reverse;
    transform: rotate(-7deg) translateX(0rem);
    justify-content: flex-start;
    align-items: flex-end;
    height: fit-content;
    position: sticky ;
    top:clamp(3.5rem,4vw,11rem) ;
    margin-block: 20rem 8rem;
    /* background-color: unset; */
    box-shadow: 0rem -10rem 0 5rem var(--bg-color);
  }

  /* white space beside */
  h2::before {
    content: "";
    position: absolute;
    background-color: var(--bg-color);
    z-index: -1;
    width: 100vw;
    height: 100%;
    top: 0;
    left: -100%;
  }

  h2:after {
    content:"";
    display: none;
  }


  h2 > .section-number > div:first-child {
    display: inline-block;
    line-height: 0.65;
    padding-block-start: 4rem;
    height: fit-content;
    font-size: 8rem;
    text-decoration-color: rgba(0, 0, 0, 0);
    position: relative;
  }

  h2 > .section-number{
    position: relative;
    padding-block: 1rem -1rem;

  }

  h2 > .section-number::before {
    content: "";
    background-color: black;
    width: 0.4rem;
    height: 120vh;
    position: absolute;
    right: 0;
    top: 0;
  }


  h2 > .section-number > div:nth-child(2) {
    background-color: rgb(0, 0, 0);
    flex-shrink: 0;
    height: 2rem;
    width: 2rem;
    border-radius: 50%; 
  }

  h2>span {
    display: block;
    text-align: right;
    position: relative;
    white-space: pre-line;
    padding-top: 0rem;
    background-color: unset;
    /* top: 1rem; */
  }


  h2 > span::after {
    content: "";
    margin-inline-start: -90vw;
    position: absolute;
    bottom: 0rem;
    left: 0;
  }

  span.outlink{
    transform: rotate(-2deg);
  }

  footer{
    grid-column: 2/10;
    padding-inline: 10rem 8rem;
    transform: rotate(10deg) translateX(4rem);
    margin-block-start: 40rem;
  }

  footer::after {
    display: none;
    left: 0rem;
    height: 80vh;
  }

  footer > p:first-child::after{
  margin-inline-start: -25vw
  }

  footer > p:last-child::after{
    margin-inline-start: -25vw
  }

}
  


@media screen and (min-width: 1024px) {
  h1 {
    margin-block-start: 0rem;
    transform: translateX(10vw);
  }

  h1 > p:first-child::before{
    left: 2rem;
   }
}

@media screen and (min-width: 1400px) {
 article {
  display: grid;
  /* 1.6rem is margin-inline */
  grid-template-columns:12vw repeat(8, 1fr) 12vw;
  gap: 0.8rem;
  }

  header {
    transform: rotate(10deg) translateX(0rem) ;
  }

  h1 > p:first-child::before{
    left: -10vw;
   }

  section.bodytext >h2 {
    /* top:clamp(3.5rem,5.4vw,11rem); */
    box-shadow: 0rem -13rem 0 6rem var(--bg-color);
  }

  h2 > .section-number::before{
    right: -6vw;
  }

  section.bodytext > h2{
    transform: rotate(-5deg) translateX(5rem);
  }
}

@media print {
:root{
  font-size: 75%;
}
  h1{
    margin-block-start: 0rem;
    grid-column: 0/10;
    scale: 110%;
    
  }

  h1 > p:first-child{
    white-space: nowrap;
    transform: rotate(0deg) translateX(1rem) translateY(-2rem);
    font-size: clamp(3rem,6vw,6rem);
    width: fit-content;
    text-align: left;
    position: relative;
    margin-block: 15vw 5rem;
  }

    h1 > p:first-child::before{
    content: "";
    display: none !important;
  }

  h1 > p:first-child::after{
    content: "";
    display: none;
  }

  h1 > p:nth-child(2){
    /* Don‘t need it to automatically word wrap */
    font-size: clamp(1.5rem,4.3vw,6rem);
    transform: rotate(0deg) translateX(1rem) translateY(-2rem);
    background-color: unset;
    white-space: normal;
  }

  h1 > p:nth-child(2)::after{
    content: "";
    display: none !important;
  }

  article {
  display: grid;
  /* 1.6rem is margin-inline */
  grid-template-columns:3rem repeat(8, 1fr) 3rem;
  gap: 0.8rem;
  }

  header {
    /* transform-origin: right top; */
    transform: rotate(10deg) translateX(4rem) ;
    position: relative;
  }

  header::after {
  content: "";
  display: none !important;
}

  div.date-author {
    grid-column: 2/10;
    margin-block-start: 2rem;
  }

  .intro{
  grid-column: 2/10;
  font-size: 2rem;
  }

  .menu {
  display: none !important;
}

h2 {
  font-family: Inktrap;
  position: relative; 
  transform: rotate(5deg) translateX(2rem);
  background-color: var(--bg-color);
  hyphens: auto;
  font-size: clamp(4rem,6vw,6rem);
  /* the white space on the top */
  position: sticky !important;
  top: auto !important;
  box-shadow: none;
  padding-block-start: -4rem;
  margin-block-end: 1rem;

}

/* White space beside the H2 */
h2::before {
  content: "";
  display:none !important;
  background-color: var(--bg-color);
  z-index: -1;
  width: 100vw;
  height: 100%;
  top: 0;
  left: -100%;
}

h2 > * {
  padding-inline-start: 2rem;
  padding-inline-end: 2rem;
}

h2 > .section-number {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

h2 > .section-number > div:first-child {
  display: inline-block;
  line-height: 1;
  padding-block-start: 2rem;
  height: fit-content;
  font-size: 4.2rem;
  position: relative;
}


h2 > .section-number > div:nth-child(2) {
  background-color: rgb(0, 0, 0);
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  border-radius: 50%; 
}

h2 > .section-number::after {
  content: "";
  display: none !important;
  background-color: black;
  height: 0rem;
  width: 150%;
  margin-inline-start: -10rem;
  position: absolute;
  top: 0;
  opacity: 0;
}


h2 > span {
  display: block;
  line-height: 1.3;
  font-size: clamp(3rem,5vw,8rem);
  text-transform: uppercase;
  /* text-decoration: underline; */
  text-underline-offset: 0.7rem;
}

h2 > span::after {
  content: "";
  display: none !important;
  background-color: black;
  height: 0rem;
  width: 0rem;
  margin-block-start: 1rem;
  margin-inline-start: 0rem;
}

h2 > .section-number::after {
  content: "";
  display:none !important;
  background-color: black;
  height: 0rem;
  width: 0rem;
  margin-inline-start: -80vw;
  position: absolute;
  top: 0;
}


h2::after{
  content: "";
  display: none !important;
  background-color: rgb(0, 0, 0);
  height: 0rem;
  width: 0rem;
  margin-inline-end: 1rem;
  position:absolute;
  top: 0;
}
section.bodytext {
  display: grid;
  grid-template-columns:repeat(10, 1fr);
  gap: 0.8rem;
  grid-column: 1/12;
  margin-inline-start: 3rem;
}

section.bodytext > * {
  grid-column: 1/10;
  font-size: 1.8rem; 
  line-height: 1.45;

}

section.bodytext > p { 
  font-size: 1.8rem; 
  line-height: 1.45;
  margin-block: 1rem;

}

section.bodytext > p.quote {
  display: block;
  grid-column: 1/10;
  font-size: 1.8rem; 
  line-height: 1.45;
  padding-inline-start: 3rem;
  /* border-left: 0.4rem solid black; */
  /* text-decoration: underline;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em; */
  border-left: 0.4rem solid black;
  transform: rotate(5deg);
  /* found this on mdn https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside because it was cutting our pull quotes halfway; */
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  page-break-inside: avoid-page !important;
  margin-block-start: 6rem !important;
  margin-block-end: 3.5rem;
}

span.outlink{
  display: none;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em;
  transform: rotate(2deg);
}

span.noBreak
{ white-space: nowrap; } 

footer{
  /* background-color: rgb(204, 204, 204); */
  /* padding: 4rem 2rem; */
  padding-inline: 3rem 5rem;
  transform: rotate(-15deg) translateX(2rem);
  margin-block-start: 5rem;
  display:none;
}

footer > p:first-child{
  font-family: "Inktrap";
  font-size: 4.5rem;
  line-height: 1.2;
  text-transform: uppercase;
  position: relative;
  padding-block-start: 2rem ;
}

footer > p:first-child::after{
  content: "";
  display: none;
  width: 120vw;
  height: 0.6rem;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  margin-inline-start: -6rem;
}

footer > p:last-child{
  font-family: "Inktrap";
  font-size: 1.8rem;
  line-height: 1.2;
  position: relative;
  padding-block-start: 2rem ;
}
footer > p:last-child::after{
  content: "";
  display: none;
  width: 120vw;
  height: 0.6rem;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  margin-inline-start: -10rem;
}

footer > p {
  color: rgb(0, 0, 0);
  margin-inline: 1rem;
  font-size: 1.6rem;
}
footer::after {
  content: "";
  display: none;
  background-color: black;
  height: 130%;
  width: 0.6rem;
  margin-inline-end: 1rem;
  position:absolute;
  top: 0;
  right: 4rem;
}
/* To fix lines showing up in the print, I applied display none !important above to hide the lines from showing up, but this still left a white gap in the content. I referenced https://developer.mozilla.org/en-US/docs/Web/CSS/@media. We also tried targeting just the menu which seemed to have resolved the problem. */
  .menu,
  .menu-content,
  .menu-content::before,
  .menu-content::after,
  header::after {
    display: none !important;
    content: none !important;
  }
/* learnt this on MDN to override previous display */
h2 {
  break-before: page !important;
  page-break-before: always !important;
  margin-block-start: 3rem !important;
}
}