welcome update

css/sections/welcome.css

@@ -1,7 +1,7 @@
 #welcome {
   margin-top: var(--nav-height);
   padding: 0;
-  background: url("/media/images/welcome-background-1080p.jpg") center;
+  background: url("/media/images/welcome-background-1080p.webp") center;
   background-size: cover;
   height: calc(100vh - var(--nav-height));
   display: flex;
@@ -17,12 +17,19 @@
 }
 
 #welcome h1 {
-  margin-right: 20%;
+  margin: 1rem 20% 1rem 1rem;
-  padding: 2rem;
+  border: solid 0.25rem #5791FF;
+  border-radius: 50px;
+  padding: 0.5rem 1.25rem;
+  background-color: black;
 }
 
 #welcome h4 {
   margin: 0 0 0 20%;
+  border: solid 0.25rem #5791FF;
+  border-radius: 50px;
+  padding: 0.5rem 1.25rem;
+  background-color: black;
 }
 
 #scroll-down {
@@ -37,18 +44,20 @@
 }
 
 @media only screen and (max-width: 1280px) {
-  #welcome .container {
+  #welcome {
-      background: url("/media/images/welcome-background-720p.jpg") center;
+      background: url("/media/images/welcome-background-720p.webp") center;
+      background-size: cover;
   }
   #welcome h4 {
       margin: 2rem;
   }
   #welcome h1 {
-      margin: 0;
+      margin: 1rem;
   }
 }
 @media only screen and (max-width: 500px) {
-  #welcome .container {
+  #welcome {
-      background: url("/media/images/welcome-background-mobile.jpg") center;
+      background: url("/media/images/welcome-background-mobile.webp") center;
+      background-size: cover;
   }
 }

css/utils/base.css

@@ -113,13 +113,18 @@ section {
     padding: 5rem 0 5rem 0;
 }
 
-
 /* CUSTOM */
 
 span {
     color: var(--text-color-2);
 }
 
+h1 .q {
+    height: 3rem;
+    width: 3rem;
+    margin: 0 0.1rem;
+}
+
 .link {
     text-decoration: underline;
     color: var(--text-color-2);

pages/en/index.html

@@ -41,10 +41,11 @@
   </header>
   <section id="welcome">
     <h1>
-      The Tele<span>Q</span>om Project
+      <!-- The Tele<span>Q</span>om Project -->
+      Tele<img class="q" src="/media/images/Q.png">om Project
     </h1>
     <h4>
-      Telecommunications with <span>Québec</span>'s Values
+      Telecommunications with <span>Québec</span>'s values
     </h4>
     <a href="#about" id="scroll-down">
       <img src="/media/images/down.png" alt="Icone defilement">

pages/fr/index.html

@@ -41,7 +41,7 @@
   </header>
   <section id="welcome">
     <h1 class="welcome-title">
-      Le Projet Tele<span>Q</span>om
+      Projet Tele<span>Q</span>om
     </h1>
     <h4 class="welcome-text">
       La Télécommunication aux Valeurs <span>Québécoises</span>