#l-arrow::before,
#r-arrow::after {
   font-family: var(--ff-primary);
   font-size: 3rem;
   font-weight: var(--fw-med);
   position: fixed;
   padding: 1rem;
   margin: 0.5rem;
   color: rgba(255, 255, 255, 0);
   -webkit-text-stroke: 0.075rem var(--defaultState);
}
#l-arrow:hover::before,
#r-arrow:hover::after {
   color: var(--hoverState);
   -webkit-text-stroke: 0.075rem var(--hoverState);
}

#l-arrow:active::before,
#r-arrow:active::after {
   color: var(--activeState);
   -webkit-text-stroke: 0.075rem var(--activeState);
}

#l-arrow::before {
   content: "\003c";
   top: 50vh;
   left: 0;
}

#r-arrow::after {
   content: "\003e";
   top: 50vh;
   right: 0;
}