From 0c10b25f9fd7034ed643bfa2523426e7fe5690db Mon Sep 17 00:00:00 2001
From: Pratiksha Sankhe <sankhepratiksha3@gmail.com>
Date: Mon, 27 Feb 2023 20:36:13 +0530
Subject: [PATCH] change in size of arrow

---
 com-dict-client/src/containers/home/arrow.css | 111 +++++++++---------
 1 file changed, 56 insertions(+), 55 deletions(-)

diff --git a/com-dict-client/src/containers/home/arrow.css b/com-dict-client/src/containers/home/arrow.css
index fbc4b05..518425d 100644
--- a/com-dict-client/src/containers/home/arrow.css
+++ b/com-dict-client/src/containers/home/arrow.css
@@ -1,63 +1,64 @@
 .arrows {
-    position: relative;
-    width: 12vmin;
-    height: 12vmin;
-    transform: translate(-50%, -50%);
+  position: relative;
+  width: 6vmin;
+  height: 6vmin;
+  transform: translate(-50%, -50%);
+  padding-right: 30%;
+}
+
+.arrows:before {
+  content: "";
+  position: absolute;
+  margin-top: 10vmin;
+  width: 100%;
+  height: 100%;
+  border-left: 6.66667px solid rgba(0, 0, 0, 0.7);
+  border-bottom: 6.66667px solid rgba(0, 0, 0, 0.7);
+  transform: translate(26.66667px, 106.66667px) rotate(-45deg);
+  animation: arrows 2s linear infinite;
+}
+
+.arrows:after {
+  content: "";
+  position: absolute;
+  margin-top: 10vmin;
+  width: 100%;
+  height: 100%;
+  border-left: 16.66667px solid rgba(0, 0, 0, 0.7);
+  border-bottom: 16.66667px solid rgba(0, 0, 0, 0.7);
+  transform: translate(53.33333px, 0px) rotate(-45deg);
+  animation: arrows 2s linear infinite -1s;
+}
+
+@keyframes arrows {
+  0% {
+    border-left: 26.66667px solid transparent;
+    border-bottom: 26.66667px solid transparent;
+    transform: translate(-13.33333px, -53.33333px) rotate(-45deg);
   }
-  
-  .arrows:before {
-    content: '';
-    position: absolute;
-    margin-top: 10vmin;
-    width: 100%;
-    height: 100%;
-    border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
-    border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
-    transform: translate(26.66667px, 106.66667px) rotate(-45deg);
-    animation: arrows 2s linear infinite;
+  10%,
+  90% {
+    border-left: 26.66667px solid transparent;
+    border-bottom: 26.66667px solid transparent;
   }
-  
-  .arrows:after {
-    content: '';
-    position: absolute;
-    margin-top: 10vmin;
-    width: 100%;
-    height: 100%;
+  50% {
     border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
     border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
-    transform: translate(53.33333px, 0px) rotate(-45deg);
-    animation: arrows 2s linear infinite -1s;
+    transform: translate(-13.33333px, 0px) rotate(-45deg);
   }
-  
-  @keyframes arrows {
-    0% {
-      border-left: 26.66667px solid transparent;
-      border-bottom: 26.66667px solid transparent;
-      transform: translate(-13.33333px, -53.33333px) rotate(-45deg);
-    }
-    10%, 90% {
-      border-left: 26.66667px solid transparent;
-      border-bottom: 26.66667px solid transparent;
-    }
-    50% {
-      border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
-      border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
-      transform: translate(-13.33333px, 0px) rotate(-45deg);
-    }
-    100% {
-      border-left: 26.66667px solid transparent;
-      border-bottom: 26.66667px solid transparent;
-      transform: translate(-13.33333px, 53.33333px) rotate(-45deg);
-    }
+  100% {
+    border-left: 26.66667px solid transparent;
+    border-bottom: 26.66667px solid transparent;
+    transform: translate(-13.33333px, 53.33333px) rotate(-45deg);
   }
+}
 
-  #rotate-text {
-    padding-top: 20vmin;
-    margin-left: -30vmin;
-    line-height: 2vmin;
-    width: 40vmin;
-    /* display:block; */
-    transform: rotate(-90deg); 
-    transform: rotate(-90deg); 
- }
- 
\ No newline at end of file
+#rotate-text {
+  padding-top: 20vmin;
+  margin-left: -30vmin;
+  line-height: 2vmin;
+  width: 40vmin;
+  /* display:block; */
+  transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}