VHS tape overlay code snippet + how specific CSS rules work

In lieu of Layouts still not accepting new submissions, here's a small piece of code that puts a VHS filter over your whole layout. 

body:before {
  content: "";
  background-image: url(https://i.pinimg.com/originals/2c/bb/a7/2cbba736bdf07130106a7a916fe68b8b.gif);
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 100;
  opacity: 0.2;
  pointer-events: none;
}

Here's how each piece works:

• Content: required for stuff that uses ":before." We're not adding new words, and the content is not necessarily empty, so we're putting quotations without anything in between to allow for this pseudo-element to be manipulated. ("Pseudo-elements" are elements that like...aren't really "there" but you can make them appear. So stuff like :after, :before, :first-letter. Not to be confused with "pseudo-classes.")
  
  Every element on your page has exactly ONE :before and :after pseudo-element. You cannot have 2 :befores or 2 :afters. If your body element already has one of these, you can change it to another element, like nav or .container or main.
  
  
• Background-image: this is where the URL for the filter goes.
  
  
• Background-size: stretching it so that it fills the entire box.
  
  
• Width + height: elements and pseudo-elements don't have set widths or heights, so by default, they are zero. We're making them both 100% to cover your entire screen, which in turn makes background-size work the way it does.
  
  
• Display: differentiating this pseudo-element from text, more or less.
  
  
• Position: Necessary to make "Top" and "Left" work and prevents the pseudo-element from displacing all the text on the page.
  
  
• Top + left: forcing the pseudo-element's position to the very top and left corner of your screen.
  
  
• Z-index: ensures that the VHS filter is above everything else on your page. Prevents any one element from not being affected by the filter. 100 is overkill, generally, but it's not a big deal.
  
  
• Opacity: this sets how see-through the filter is. The URL we used is a GIF, and GIFs do not support partial transparency, so we're setting it here. Can be adjusted as necessary from 0.0 to 1.0 to change how strong the effect is.
  
  
• Pointer-events: prevents the new pseudo-element from blocking your ability to click on anything else on your page. Very very important, do not remove lol.

W3 Schools CSS Reference is your best friend for finding out what all these declarations do so if you're ever confused, go there and find the declaration that's confusing and read about it. It also has demos so you can play around with the declarations for yourself and figure out how they work.