background and page-container styling

src/css/style.css

 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
 :root {
     --primary: #AC42FF;
     --secondary: #F15154;
@@ -13,15 +14,27 @@
 }
 
 html {
-   scroll-behavior: smooth; 
+    scroll-behavior: smooth;
 }
 
 body {
     font-family: 'Poppins', sans-serif;
+    background-image: url('../img/background.svg');
+    background-size: 250vw;
+    background-position: center;
+    background-repeat: repeat;
+}
+
+.page-container {
+    width: 100%;
+    max-width: 1240px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-}
+}
\ No newline at end of file

src/img/background.svg

+<svg width="3202" height="3055" viewBox="0 0 3202 3055" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f)">
+<circle cx="933.5" cy="1739.5" r="333.5" fill="#AC42FF" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter1_f)">
+<circle cx="2215" cy="878" r="278" fill="#F15154"/>
+</g>
+<g filter="url(#filter2_f)">
+<circle cx="2324" cy="2177" r="278" fill="#7DEFFF"/>
+</g>
+<defs>
+<filter id="filter0_f" x="0" y="806" width="1867" height="1867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter1_f" x="1337" y="0" width="1756" height="1756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter2_f" x="1446" y="1299" width="1756" height="1756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</svg>