tilted div at home page

src/assets/css/main.css

@@ -29,6 +29,16 @@ body {
   color: #505056;
   overflow-x: hidden;
 }
+
+body[data-theme="dark"] {
+  --logo: url("../images/wrenchboard-logo-text.png") no-repeat;
+}
+
+body[data-theme="light"] {
+  --logo: url("../images/wrenchboard.png") no-repeat;
+}
+
+
 /* ==========================================vue */
 * {
   margin: 0;
@@ -1452,10 +1462,21 @@ p {
   letter-spacing: 2px;
   text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
 }
-.appie-title .earn-rewards{
-  border-radius: 7px;
-  background-color: rgb(245, 71, 71) !important;
+/* .appie-title .earn-rewards{ */
+  /* border-radius: 7px;
+  background-color: rgb(245, 71, 71) !important; */
   /* text-shadow: 2px 2px 2px #fff; */
+/* } */
+
+.earn-rewards::before {
+  background: #f54747!important;
+  border-radius: 7px;
+  content: "";
+  height: 3.8rem;
+  position: absolute;
+  width: 17rem;
+  z-index: -1;
+  transform: translate(-10px, 5px) rotate(357deg);
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1200px) {