task: Disable Board until players are selected

MullerTheScientist · Sep 30, 2024 · 4bb90ea · 4bb90ea
1 parent 28522b3
commit 4bb90ea
Show file tree

Hide file tree

Showing 3 changed files with 245 additions and 0 deletions.
diff --git a/client/src/components/CaretRight.tsx b/client/src/components/CaretRight.tsx
@@ -0,0 +1,149 @@
+const CaretRight: React.FC = () => {
+    return (
+      <div className="vecstore">
+        <svg
+          className="rot-down"
+          width="44"
+          height="79"
+          viewBox="0 0 44 79"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            fill="#0E0121"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="url(#paint0_linear_536_714)"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="#121212"
+            stroke-opacity="0.2"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_536_714"
+              x1="22.0317"
+              y1="0.654297"
+              x2="22.0317"
+              y2="78.3457"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#2DCCFD" />
+              <stop offset="1" stop-color="#FF01FF" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <svg
+          className="rot-down"
+          width="44"
+          height="79"
+          viewBox="0 0 44 79"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            fill="#0E0121"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="url(#paint0_linear_536_714)"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="#121212"
+            stroke-opacity="0.2"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_536_714"
+              x1="22.0317"
+              y1="0.654297"
+              x2="22.0317"
+              y2="78.3457"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#2DCCFD" />
+              <stop offset="1" stop-color="#FF01FF" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <svg
+          className="rot-down"
+          width="44"
+          height="79"
+          viewBox="0 0 44 79"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            fill="#0E0121"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="url(#paint0_linear_536_714)"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="#121212"
+            stroke-opacity="0.2"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_536_714"
+              x1="22.0317"
+              y1="0.654297"
+              x2="22.0317"
+              y2="78.3457"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#2DCCFD" />
+              <stop offset="1" stop-color="#FF01FF" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <svg
+          className="rot-down"
+          width="44"
+          height="79"
+          viewBox="0 0 44 79"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            fill="#0E0121"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="url(#paint0_linear_536_714)"
+          />
+          <path
+            d="M41.8325 41.6446L41.8323 41.6448L6.51982 76.9573C6.23816 77.239 5.90378 77.4624 5.53577 77.6148C5.16776 77.7673 4.77334 77.8457 4.37501 77.8457C3.97669 77.8457 3.58226 77.7673 3.21425 77.6148C2.84624 77.4624 2.51186 77.239 2.2302 76.9573C1.94854 76.6757 1.72512 76.3413 1.57269 75.9733L1.11075 76.1646L1.57268 75.9733C1.42025 75.6053 1.3418 75.2108 1.3418 74.8125C1.3418 74.4142 1.42025 74.0198 1.57268 73.6518L1.11075 73.4604L1.57269 73.6518C1.72512 73.2838 1.94854 72.9494 2.23021 72.6677L23.7327 51.1681C30.1774 44.7242 30.1774 34.2758 23.7327 27.832L2.2302 6.33232C2.23019 6.33231 2.23019 6.3323 2.23018 6.33229C1.66136 5.76346 1.3418 4.99196 1.3418 4.18751C1.3418 3.38305 1.66137 2.61154 2.2302 2.0427C2.79904 1.47387 3.57055 1.1543 4.37501 1.1543C5.17947 1.1543 5.95098 1.47387 6.51982 2.0427L41.8323 37.3552L41.8325 37.3554C42.1143 37.6369 42.3379 37.9712 42.4905 38.3392C42.643 38.7072 42.7215 39.1017 42.7215 39.5C42.7215 39.8984 42.643 40.2928 42.4905 40.6608C42.3379 41.0288 42.1143 41.3631 41.8325 41.6446Z"
+            stroke="#121212"
+            stroke-opacity="0.2"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_536_714"
+              x1="22.0317"
+              y1="0.654297"
+              x2="22.0317"
+              y2="78.3457"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#2DCCFD" />
+              <stop offset="1" stop-color="#FF01FF" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    );
+  };
+
+  export default CaretRight;
+
diff --git a/client/src/components/Ludo.tsx b/client/src/components/Ludo.tsx
@@ -6,6 +6,7 @@ import { useSize } from "../hooks/size-hook";
 import { markers } from "../hooks/utils";
 import "../styles/Ludo.scss";
 import { BoardContext } from "../context/board-context";
+import CaretRight from "./CaretRight";
 
 const Ludo: React.FC = () => {
   const { size, tileMap } = useSize();
@@ -20,6 +21,16 @@ const Ludo: React.FC = () => {
           .slice(0, options.playersLength * 4)
           .map((m) => <Marker key={m} pos={m} size={size} tileMap={tileMap} />)}
       <LudoTiles />
+      {!options.playersLength && (
+        <div className="overlay">
+          <div className="overlay-child">
+            <p className="text-white">
+              Choose the number of players first to begin
+            </p>
+            <CaretRight />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/client/src/styles/Ludo.scss b/client/src/styles/Ludo.scss
@@ -240,6 +240,91 @@
     0 15px 12px rgba(0, 0, 0, 0.22);
 }
 
+.overlay{
+  background-color: rgba($color: #F5F5F5, $alpha: 0.3);
+  backdrop-filter: blur(10px);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  margin-block-start: 0;
+  inset-block-start: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  cursor: default;
+}
+
+.text-white {
+  color: #F5F5F5;
+  font-size: 2rem;
+  font-weight: 600;
+  text-shadow: 1px 1px 1px black;
+}
+
+.vecstore{
+  margin: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  @media only screen and (min-width: 992px) {
+    flex-direction: row;
+  }
+}
+
+.rot-down {
+  transform: rotate(90deg);
+  opacity: 0;
+  animation: fade 0.8s infinite ease-out;
+
+  @media only screen and (min-width: 992px) {
+    transform: none;
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 1;
+    fill: #000179;
+  }
+  50% {
+    opacity: 0.5;
+    fill: #2C0E4E;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.rot-down:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.rot-down:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.rot-down:nth-child(3) {
+  animation-delay: .4s;
+}
+
+.rot-down:nth-child(4) {
+  animation-delay: 0.6s;
+}
+
+.rot-down:nth-child(3), .rot-down:nth-child(4) {
+  @media only screen and (max-width: 992px) {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .overlay-child {
+    width: 50%;
+  }
+}
+
 @media only screen and (max-width: 600px) {
   .container {
     width: 400px;