JayVanDyke

That hover animation comes from the Site Styles > Animations > Flex. I honestly had no idea that animation added an underline to the nav links. You can also just change your site animation to something else and it will go away. If you set it to "none" or "fade" or something then your original code might work.
 
This gets rid of the hover if you keep your current settings.
.tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after, .tweak-global-animations-animation-type-flex .header-nav-folder-item a::after { display: none !important; } Can you add your code back to the site? It doesn't look like it's there anymore.

See if this works
#not-found .pageWrapper { padding-top: 100px !important; //adjust as needed } #cart .pageWrapper { padding-top: 100px !important; //adjust as needed }  

@abigailallen I think I'm looking at the same spot on your site. You might need to get a more specific selector.
Try this
.sqs-block-summary-v2 { .summary-title .summary-title-link, .summary-heading .summary-collection-title { font-family: 'proxima-sera' !important; font-weight: 300 !important; font-size: 18px !important; color: #ccccc !important; text-transform: none !important; font-style: none !important; } } @media only screen and (max-width: 640px) { .user-items-list-simple { //change these for side padding on mobile padding-left: 4vw !important; padding-right: 4vw !important; } }

you probably have to target the navigation links specifically. 
 
Try this
h1, h2, h3, .header-nav-item a { font-family: 'pixChicago' !important; }  

@DesignPearl try this in your custom CSS
.ProductItem-gallery-slides-item img { object-fit: contain !important; }  

It looks like you have some custom css in there affecting the color. See if you can find it from screenshot below. if not you can try adding this to the end of your css file
.header-nav .header-nav-item--folder .header-nav-folder-content a:hover { color: white !important; //change me for the color }

maybe this would do it?
.course-list__list-chapter-item-chapter-meta span:first-child { display: none !important; }

You might need to rethink your design but this plugin could work. Uses a list section and then autoplays videos hosted on Vimeo or YouTube I believe. https://squarerefresh.com/plugins/autoplay-video-hover. Aside from that maybe your rollover image could be a gif?

@KevinWalton so you shouldnt need the javascript to do anything here.
This css should work. You already have this
header { mix-blend-mode: difference; } but change it to what @tuanphanwas saying above.
body:not(.header--menu-open) header { mix-blend-mode: difference; }  

@mindofalexander 
 
Your pagination title question
1. add a code block anywhere on the portfolio item page
2. copy one of these snippets into it and adjust the title as needed. If both links on that page need to be changed then you'll need both of these code snippets below.
<style> /*for right side pagination link*/ .item-pagination-link--next .item-pagination-title { font-size: 0 !important; &:after { content: 'new title name here'; font-size: 20px; /*from your code*/ font-family: var(--portfolio-item-pagination-font-font-family); font-style: var(--portfolio-item-pagination-font-font-style); font-weight: var(--portfolio-item-pagination-font-font-weight); letter-spacing: var(--portfolio-item-pagination-font-letter-spacing); text-transform: var(--portfolio-item-pagination-font-text-transform); } } </style>  
<style> /*for left side pagination link*/ .item-pagination-link--prev .item-pagination-title { font-size: 0 !important; &:after { content: 'new title name here'; font-size: 20px; /*from your code*/ font-family: var(--portfolio-item-pagination-font-font-family); font-style: var(--portfolio-item-pagination-font-font-style); font-weight: var(--portfolio-item-pagination-font-font-weight); letter-spacing: var(--portfolio-item-pagination-font-letter-spacing); text-transform: var(--portfolio-item-pagination-font-text-transform); } } </style>  
 
Your alignment question:
You have custom CSS added to your page that is this..
If you want the links to not push over to the right or left you will need to remove this. The reason those links are pushing over to the side is because your code doesn't allow the words to wrap so instead they keep stretching to the side past where your page content ends. You can play with font sizes to achieve the same goal but that might be kind of a pain.
 
Adding links in places they don't exist question:
 
The short answer is this isn't something that is super simple to do and I don't know of an existing plugin that will achieve this. You will need to either learn to write or hire someone who can write you a script to add this to the pages that need it.
 

Ahh yea....sorry it was trying to load your editor instead of the page. I should have realized but not enough coffee today maybe 🙃
Try this
section[data-section-id="651597d004d0441072b29cc5"] .sqs-block-video { .sqs-block-content, .intrinsic, .embed-block-wrapper, .sqs-native-video { position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; padding: 0 !important; } .video-player { padding: 0 !important; video { object-fit: cover !important; } } }  

either remove !important from the second rule or add it to the first one. The important is overriding your hover state.

It looks like you have 2 things happening. There's an error in your split header code you may want to reach out to them about. Also it's saying that the rope graphic is not found. you may want to reupload it and get a fresh link.

Try this and see if it works. If it doesn't leave it in place and let me know. It doesn't look like you have jquery installed so this adds that as well. If you do then you can ignore the first line. Add this to your code injection footer area.
edit: SS doesn't offer this particular thing so you need to make it in the additional info area like you did and then move it with some code
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <script> $(document).ready(function() { var accordion = $(".ProductItem-additional .sqs-block-accordion"); var excerpt = $(".ProductItem-details-excerpt"); excerpt.append(accordion); }); </script>  

This might do it for you. The tricky part here will be making sure to add in the non gallery pages if you add anymore. I'm fairly certain I targeted the correct ones but if it doesn't work let me know and leave the code in place.

 
@media only screen and (max-width:640px){ body:not(#collection-5ec1771c5bddb16cf6d2328c):not(#collection-5ec176a35ff2e369e5d3be95) { #sections .page-section:first-child { padding-top: 0px !important; box-sizing: border-box; min-height: 100vh; } } }