Replace svgs with original pngs to improve (safari) quality

components/Footer.js

@@ -15,7 +15,7 @@ const Foooter = () => {
         <div className="w-full justify-between sm:flex sm:items-center sm:justify-between">
           <Footer.Brand
             href={spy ? (fr? '/fr/moohp' : '/moohp') : (fr? '/fr' : '/')}
-            src={spy ? '/logo/moohp-logo.svg' : '/logo/mari-logo.svg'}
+            src={spy ? '/logo/moohp-logo.png' : '/logo/mari-logo.png'}
             alt={spy ? "MOOHP logo" : "M.A.R.I. logo"}
             name={spy ? "MOOHP" : "M.A.R.I."}
             className={classNames("flex justify-center md:block footerBrand", { 'invertedLogo': spy })}

components/avia-robot/Avia.js

@@ -16,7 +16,7 @@ const Avia = ({ fr }) => {
     <>
 			<div className={styles.header}><Typewrite page={fr ? 'aviaFr' : 'avia'} /></div>
 			<div className={styles.intro}>
-				<img src="/logo/avia-logo.svg" alt="AVIA Logo" className={styles.aviaLogo} />
+				<img src="/logo/avia-logo.png" alt="AVIA Logo" className={styles.aviaLogo} />
 				<p>
 					<strong>{fr ? `Nous sommes contents que vous soyez là, agent${name}! ` : `We're glad you made it, Agent${name}! `}</strong>
 					{fr ? `La CRC, une association à but non lucratif qui organise des compétitions de robotique annuelles, a demandé de l'aide 
@@ -34,7 +34,7 @@ const Avia = ({ fr }) => {
 						science, technology, and engineering with visual arts and humanities; the Machinery, Manufacturing, Hacking, Virtual 
 						Network, and Marketing divisions are integral to this mission!`}
 				</p>
-				<img src="/logo/crc-logo.svg" alt="CRC Logo" className={styles.crcLogo} />
+				<img src="/logo/crc-logo.png" alt="CRC Logo" className={styles.crcLogo} />
 			</div>
 
 			<h1 className={styles.header}><strong>{fr ? `AVIA procédera comme suit:` : `AVIA will proceed as follows:`}</strong></h1>

components/home/MoohpHero.js

@@ -3,7 +3,7 @@ import styles from '../../styles/Moohp.module.css';
 const MoohpHero = () => {
   return (
     <div className={styles.hero}>
-      <img src='/logo/moohp-logo-alt.svg' alt='MOOHP' />
+      <img src='/logo/moohp-logo-alt.png' alt='MOOHP' />
     </div>
   );
 }

components/home/MoohpIntro.js

@@ -30,7 +30,7 @@ const MoohpIntro = ({ fr }) => {
     <div className={styles.intro}>
       <h3>{fr ? 'Bienvenue à MOOHP!' : 'Welcome to MOOHP!'}</h3>
       <div className={styles.jerryWelcome}>
-        <img className={styles.compowderJerry} src='/jerry/compowder-jerry.svg' alt={fr ? 'Hologramme de Jerry dans le compowder' : 'Hologram of Jerry in the Compowder'} />
+        <img className={styles.compowderJerry} src='/jerry/compowder-jerry.png' alt={fr ? 'Hologramme de Jerry dans le compowder' : 'Hologram of Jerry in the Compowder'} />
 
         <div className={classNames(`${styles.welcomeAgent}`, { 'hide': !hideInitial, 'quickFadeIn': hideInitial })}>
           <p className={styles.personalizedGreeting}>

components/home/Testimonial.js

@@ -9,7 +9,7 @@ const Testimonial = ({ fr }) => {
 				<p className={styles.name}>{fr ? 'Jared Lewis, ancien élève de M.A.R.I. et ' : 'Jared Lewis, M.A.R.I. Alumni & '}<Link className={styles.hintLink} href={fr ? '/fr/moohp' : '/moohp'}>{fr ? 'vice-président de MOOHP' : 'MOOHP Vice President'}</Link></p>
 			</div>
 			<img 
-					src="/testimonial/jared.svg"
+					src="/testimonial/jared.png"
 					alt={fr ? 'Image de Jared Lewis' : 'Picture of Jared Lewis'}
 					className={styles.jared}
 			/>

components/nav/RegNav.js

@@ -47,10 +47,10 @@ const RegNav = () => {
       </Navbar.Collapse>
       <div className='block m-auto relative'>
         <Link href={fr? '/fr' : '/'} id='regLogo' className={classNames('navLogo', { 'showLogo': showLogo, 'hideLogo': hideLogo, 'pause': paused })} onMouseOver={revealLogo} onTouchStart={revealLogo} onMouseLeave={pause} onTouchEnd={pause}>
-          <img src='/logo/mari-logo.svg' alt='M.A.R.I Logo' />
+          <img src='/logo/mari-logo.png' alt='M.A.R.I Logo' />
         </Link>
         <Link href={fr? '/fr/moohp' : '/moohp'} id='hiddenLogo' className='navLogo' onMouseOver={play} onTouchStart={play} onMouseLeave={coverLogo} onTouchEnd={coverLogo}>
-          <img src='/logo/moohp-logo.svg' alt='MOOHP logo' />
+          <img src='/logo/moohp-logo.png' alt='MOOHP logo' />
         </Link>
       </div>
       <Navbar.Collapse className='navSecondCollapse'>

components/nav/SpyNav.js

@@ -50,10 +50,10 @@ const SpyNav = () => {
       </Navbar.Collapse>
       <div className='block m-auto relative'>
         <div id='spyLogo' className={classNames('navLogo', { 'showLogoTwo': showLogo, 'hideLogoTwo': hideLogo, 'pause': paused })} onMouseOver={revealLogo} onTouchStart={revealLogo} onMouseLeave={pause} onTouchEnd={pause}>
-          <img src='/logo/moohp-logo.svg' alt={fr? 'Logo de MOOHP' : 'MOOHP logo'} />
+          <img src='/logo/moohp-logo.png' alt={fr? 'Logo de MOOHP' : 'MOOHP logo'} />
         </div>
         <Link href={fr? '/fr' : '/'} id='hiddenRegLogo' className='navLogo' onMouseOver={play} onTouchStart={play} onMouseLeave={coverLogo} onTouchEnd={coverLogo}>
-          <img src='/logo/mari-logo.svg' alt={fr? 'Logo de M.A.R.I.' : 'M.A.R.I logo'} />
+          <img src='/logo/mari-logo.png' alt={fr? 'Logo de M.A.R.I.' : 'M.A.R.I logo'} />
         </Link>
       </div>
       <Navbar.Collapse className='navSecondCollapse'>

styles/Moohp.module.css

@@ -303,14 +303,15 @@
   #leftLogo, #rightLogo {
     height: 250px;
     width: 150px;
+    background-size: 100%;
   }
 
   #leftLogo {
-    background-image: url(/puzzle/left.svg);
+    background-image: url(/puzzle/left.png);
   }
 
   #rightLogo {
-    background-image: url(/puzzle/right.svg);
+    background-image: url(/puzzle/right.png);
   }
 
   .moohpDesc {

styles/globals.css

@@ -220,13 +220,15 @@
     box-shadow: 0 0 0 2.5px #000;
     cursor: pointer;
     background-color: #fff;
-    background-image: url(/jerry/clown-jerry-mari.svg);
+    background-size: 100%;
+    background-position: 50% 60%;
+    background-image: url(/jerry/clown-jerry-mari.png);
     background-repeat: no-repeat;
     z-index: 75;
   }
 
   .activePopUp {
-    background-image: url(/jerry/clown-jerry-moohp.svg);
+    background-image: url(/jerry/clown-jerry-moohp.png);
   }
 
   .popUpTooltip {
@@ -414,20 +416,24 @@
     border-top: solid 0.5px #eee;
   }
 
+  .one, .two, .three, .four {
+    background-size: 100%;
+  }
+
   .one {
-    background-image: url(/puzzle/one-sm.svg);
+    background-image: url(/puzzle/one.png);
   }
 
   .two {
-    background-image: url(/puzzle/two-sm.svg);
+    background-image: url(/puzzle/two.png);
   }
 
   .three {
-    background-image: url(/puzzle/three-sm.svg);
+    background-image: url(/puzzle/three.png);
   }
 
   .four {
-    background-image: url(/puzzle/four-sm.svg);
+    background-image: url(/puzzle/four.png);
   }
 
   .hide {
@@ -508,7 +514,6 @@
     .jerryPopUp {
       width: 7em;
       height: 7em;
-      background-position: 50% 135%;
     }
 
     .popUpTooltip {
@@ -723,7 +728,7 @@
       width: 300px;
       height: 250px;
     }
-
+/* 
     .one {
       background-image: url(/puzzle/one.svg);
     }
@@ -738,7 +743,7 @@
 
     .four {
       background-image: url(/puzzle/four.svg);
-    }
+    } */
 
     .bottomNav h3.whereNext {
       font-size: 1.7rem;