Backup merged

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

css/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 :root{
   --bgc-black: #202020;
@@ -11,7 +12,7 @@
 
 html{
   background: var(--dot-bg);
-  font-family: "JetBrains Mono", monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "JetBrains Mono", monospace;
 }
 
 @font-face {
@@ -29,6 +30,22 @@ p{
   font-family: 'Google Sans Text Regular', fallback, sans-serif;
 
 }
+
+::-webkit-scrollbar{
+  width: 5px;
+  background-color: var(--bgc-black);
+
+}
+::-webkit-scrollbar-thumb{
+  background-color: whitesmoke;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:active{
+  background-color: #5c5a5a;
+}
+
+
+
 /* Hero section */
 .hero-section{
   /* background: url("../logo.svg"); */
@@ -46,22 +63,37 @@ p{
   padding: 5rem;
 }
 
+.bg-td{
+  background-color: blue;
+}
 .heading {
   color: #eee;
   font-size: 2rem;
   font-weight: 300;
   text-transform: uppercase;
 }
+
 
-/* Main section */
-main{
+/* Body section */
+body{
+  font-family:"JetBrains Mono", 'monospace' ;
   background:
-        linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
-        linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
-        var(--dot-color);
-  animation: moveDots 100s linear infinite;
+  linear-gradient(90deg, var(--dot-bg) 0, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent calc(var(--dot-space) - var(--dot-size)), transparent 100%) center / var(--dot-space) var(--dot-space),
+  linear-gradient(var(--dot-bg) 0, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent calc(var(--dot-space) - var(--dot-size)), transparent 100%) center / var(--dot-space) var(--dot-space),
+  var(--dot-color);
+  animation: moveDots 500s linear infinite;
+
 }
 
+@keyframes moveDots {
+  from {
+    background-position: 50% 100%, 0 100%;
+  }
+  to {
+    background-position: 50% 0, 0 0;
+  }
+
+}
 .group:hover img {
   filter: grayscale(0);
 }
@@ -92,6 +124,7 @@ main{
 }
 
 .fancy-table td {
+  /* background-color: var(--dot-bg); */
   width: 5rem;
   height: 6rem;
   text-align: center;
@@ -117,4 +150,147 @@ main{
 
 .fancy-table td.table-text-blue {
   color: #00f;
+}
+
+
+
+/* Impacats CSS */
+
+#impacts {
+  user-select: none;
+
+  margin: 4rem auto 2rem auto;
+}
+section.my-alert {
+  padding: 0.75rem 0; /* 12px */;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 3rem; /* 48px */
+}
+
+section.my-alert > div.my-alert__unique1 {
+  font-size: 1.2rem; /* 32px */
+  text-align: center;
+  font-weight: 600;
+  background-color: #1F2937;
+  border-color:rgb(16 21 29);
+  border-width: 2px;
+  color: white;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  padding-left: 0.75rem; /* 12px */
+  padding-right: 0.75rem; /* 12px */
+  padding-top: 0.25rem; /* 4px */
+  padding-bottom: 0.25rem; /* 4px */
+  border-radius: 0.75rem; /* 12px */
+}
+
+section.my-alert > div.my-alert__unique2 {
+  border-color:rgb(16 21 29);
+  color: white;
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  font-weight: 400;
+  border-width: 2px;
+  padding-top: 2rem; /* 32px */
+  padding-bottom: 2rem; /* 32px */
+  border-radius: 0.75rem; /* 12px */
+  background-color: #1F2937;
+}
+
+section.my-alert > div > div {
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+section.my-alert > div > div > p.my-alert__unique_h {
+  font-size: 4.5rem; /* 72px */
+  line-height: 1;
+  font-family: "JetBrains Mono", monospace;
+
+}
+
+section.my-alert > div > div > p.my-alert__unique_s {
+  letter-spacing: 0.05em;
+}
+
+section.my-alert > div > a {
+  background-color: rgb(35, 75, 132);
+  width: 1px;
+  border-radius: 0.25rem; /* 4px */
+}
+
+.hero_logo_text{
+  color: white;
+  font-weight: 600;
+
+}
+
+/* Impacts media query */
+@media (max-width: 950px) {
+  .my-alert__unique2{
+    flex-direction: column;
+    padding: 0;
+
+  }
+  .media950{
+    padding:2rem 2rem 2rem 2.8rem;
+    border-bottom: 1px solid #3a3a5a;
+    margin: 0 1rem 0 1rem;
+
+  }
+
+  section.my-alert > div > div > p.my-alert__unique_h {
+      font-size: 3.5rem;
+  }
+  .media950:last-child{
+    border-bottom: none;
+  }
+}
+
+/* Mobile Style for Hero Section */
+@media screen and (max-width: 1110px) {
+  .fancy-table {
+    margin: 24px;
+    font-size: 2.5rem;
+  }
+  .fancy-table td {
+    width: 4rem;
+    height: 5rem;
+  }
+}
+@media screen and (max-width: 600px) {
+  .fancy-table {
+    margin: 24px;
+    font-size: 1.5rem;
+  }
+
+  .fancy-table td {
+    width: 2.7rem;
+    height: 3rem;
+  }
+}
+
+@media screen and (max-width: 1024px){
+  .hero_logo_text{
+    font-size: 0.8rem;
+  }
+}
+
+@media screen and (max-width: 768px){
+  .hero_logo_text{
+    font-size: 0.8rem;
+  }
+  .hero_logo{
+    width: 90%;
+  }
+  .logo_hero_wrap{
+    margin-top: 1rem;
+  }
 }

css/tailwind.css

@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
+/* tailwind.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

css/team.css

@@ -0,0 +1,63 @@
+
+:root{
+    --bgc-black: #202020;
+    --c-white: #f5f5f5;
+    --dot-bg: #10151D; 
+    --dot-color: white;
+    --dot-size: 1px;
+    --dot-space: 50px;
+    scroll-behavior: smooth;
+  }
+
+  html{
+    background: var(--dot-bg);
+    font-family: "JetBrains Mono", monospace;
+  }
+
+  @font-face {
+    font-family: 'Google Sans Display Regular';  /* you can name it whatever you want */
+    src: url('fonts/Google Sans Display Regular/Google Sans Display Regular.ttf');  /* replace with your font's path and file name */
+  }
+  @font-face {
+    font-family: 'Google Sans Text Regular';  /* you can name it whatever you want */
+    src: url('fonts/OnlineWebFonts_COM_5c4fcd687637035e8854b4e9b94e727c/Google Sans Text Regular/Google Sans Text Regular.ttf');  /* replace with your font's path and file name */
+  }
+  h1 {
+    font-family: 'Google Sans Display Regular', fallback, sans-serif;
+  }
+  p{
+    font-family: 'Google Sans Text Regular', fallback, sans-serif;
+  }
+  .main{
+    font-family: "JetBrains Mono", monospace;
+
+  }
+
+  ::-webkit-scrollbar{
+    width: 5px;
+    background-color: var(--bgc-black);
+  }
+  ::-webkit-scrollbar-thumb{
+    background-color: whitesmoke;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb:active{
+    background-color: #5c5a5a;
+  }
+body{
+    color: white;
+}
+
+  @keyframes moveDots {
+    from {
+      background-position: 50% 100%, 0 100%;
+    }
+    to {
+      background-position: 50% 0, 0 0;
+    }
+
+  }
+  /* .card > div{
+    height: 200px;
+    width: 200px;
+  } */