diff --git a/components/ShapesBackground.module.css b/components/ShapesBackground.module.css
index c68bcc52..8ecc4df2 100644
--- a/components/ShapesBackground.module.css
+++ b/components/ShapesBackground.module.css
@@ -9,35 +9,20 @@
.shape {
position: absolute;
-}
-.blue {
- filter: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
+ --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
brightness(92%) contrast(93%);
-}
-
-.teal {
- filter: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
+ --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
brightness(91%) contrast(88%);
}
-.opacity20 {
- opacity: 20%;
-}
-
-.opacity25 {
- opacity: 25%;
-}
-
-.opacity30 {
- opacity: 30%;
-}
-
.homeDots {
top: calc(0.06 * (580rem / 0.65) / 16);
left: calc(-32rem / 16);
width: calc(168rem / 16);
height: calc(204rem / 16);
+ filter: var(--teal);
+ opacity: 25%;
}
.homeHash1 {
@@ -45,6 +30,8 @@
left: 12vw;
width: calc(60rem / 16);
height: calc(60rem / 16);
+ filter: var(--blue);
+ opacity: 20%;
}
.homeTriangle1 {
@@ -53,6 +40,8 @@
width: calc(68rem / 16);
height: calc(68rem / 16);
transform: rotate(18deg);
+ filter: var(--teal);
+ opacity: 30%;
}
.homeWaves1 {
@@ -60,6 +49,8 @@
left: 24vw;
width: calc(116rem / 16);
height: calc(58rem / 16);
+ filter: var(--teal);
+ opacity: 20%;
}
.homeTriangle2 {
@@ -68,6 +59,8 @@
width: calc(68rem / 16);
height: calc(68rem / 16);
transform: rotate(-26deg);
+ filter: var(--blue);
+ opacity: 20%;
}
.homePlus {
@@ -75,6 +68,8 @@
right: 22vw;
width: calc(48rem / 16);
height: calc(48rem / 16);
+ filter: var(--blue);
+ opacity: 20%;
}
.homeWaves2 {
@@ -82,6 +77,8 @@
right: 18vw;
width: calc(102rem / 16);
height: calc(50rem / 16);
+ filter: var(--teal);
+ opacity: 20%;
}
.homeHash2 {
@@ -89,6 +86,8 @@
right: 9vw;
width: calc(60rem / 16);
height: calc(60rem / 16);
+ filter: var(--blue);
+ opacity: 20%;
}
@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx
index 6ca63e6b..c8bc1269 100644
--- a/components/ShapesBackground.tsx
+++ b/components/ShapesBackground.tsx
@@ -48,38 +48,14 @@ function Shape(props: { shape: ShapeType; className: string }) {
function HomeShapes() {
return (
<>
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
>
);
}