Delete index.css

index.css

@@ -1,329 +0,0 @@
-html {
-  font-family: "Inter", sans-serif;
-}
-
-body {
-  margin: 0;
-<<<<<<< HEAD
-  padding: 0;
-  overflow-x: hidden; /* Enable scrolling on the y-axis */
-=======
-  display: flex;
-  flex-direction: column;
->>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
-}
-
-/* GTA Text */
-h1 {
-  text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
-}
-/* Vice City Text */
-h2 {
-  font-family: "Satisfy", cursive;
-  text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
-}
-
-<<<<<<< HEAD
-#backgroundVideo video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh; /* Adjust the height as needed */
-  object-fit: cover;
-}
-
-#backgroundVideo {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh; /* Adjust the height as needed */
-}
-
-#placeholder {
-  position: relative;
-  left: 0;
-  width: 100%;
-  height: 75vh; /* Adjust the height as needed */
-  background-color: transparent; /* Set the background color to transparent */
-  z-index: 20; /* Place the background behind other elements */
-}
-
-=======
->>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
-div #logo_container::before {
-  z-index: 20;
-  content: "";
-  width: 100%;
-  height: 100%;
-  top: 157%;
-  left: 0;
-  position: absolute;
-  transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
-}
-
-.container {
-  position: relative;
-  z-index: 20;
-}
-
-#videoElement {
-  opacity: 0;
-<<<<<<< HEAD
-  width: 80%;
-  transition: opacity 3s ease-in-out;
-  margin-top: 155px;
-
-=======
-  transition: opacity 3s ease-in-out;
->>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
-}
-
-#videoElement.fade-in {
-  opacity: 1;
-<<<<<<< HEAD
-=======
-  margin-top: 155px;
->>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
-
-}
-
-.fade-out {
-  opacity: 0.09;
-<<<<<<< HEAD
-  transition: opacity 16s ease-in-out;
-}
-
-/* Modern React Native Design Principles */
-/* 1. Minimalistic Design */
-
-#playPauseBtn {
-  background-color: #ffea8c;
-  opacity: 35;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: background-color 0.2s ease;
-}
-
-#playPauseBtn img {
-  width: 30px;
-  height: 30px;
-}
-
-#playPauseBtn:active {
-  background-color: #b1b1b186;
-  transition: background-color 0.2s ease;
-}
-
-#playPauseBtn:active img {
-  transform: scale(1.2);
-  transition: transform 0.2s ease;
-}
-
-#playPauseBtn:active::after {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  background-color: rgb(218, 0, 0);
-  border-radius: 50%;
-  animation: ripple 0.4s linear;
-}
-
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(2.5);
-    opacity: 0;
-  }
-}
-
-/* Add a floating up and down animation */
-@keyframes floatUpDown {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-15px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-#playPauseBtn:not(:hover) {
-  animation: floatUpDown 5s ease-in-out infinite;
-}
-
-/* Tooltip */
-#playPauseBtn .tooltip-text {
-  visibility: hidden;
-  width: 120px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px 0;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -60px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-#playPauseBtn:hover .tooltip-text {
-  visibility: visible;
-  opacity: 1;
-}
-
-#playPauseBtn .tooltip-text::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #555 transparent transparent transparent transparent;
-}
-
-/* Style the scrollbar */
-::-webkit-scrollbar {
-  width: 5px; /* Adjust the width as needed */
-  height: 12px; /* Adjust the height as needed */
-}
-
-::-webkit-scrollbar-track {
-  background: transparent; /* Set the background color of the scrollbar track */
-  border-radius: 10px; /* Adjust the border radius as needed */
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888888; /* Set the background color of the scrollbar thumb */
-  border-radius: 12px; /* Adjust the border radius as needed */
-}
-
-/* Responsive styles */
-=======
-  transition: opacity 8s ease-in-out;
-}
-
-/* Example responsive styles */
->>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
-@media (max-width: 768px) {
-  #playPauseBtn {
-    width: 40px;
-    height: 40px;
-  }
-
-  #playPauseBtn img {
-    width: 25px;
-    height: 25px;
-  }
-}
-
-@media (max-width: 480px) {
-  #playPauseBtn {
-    width: 30px;
-    height: 30px;
-  }
-
-  #playPauseBtn img {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-<<<<<<< HEAD
-@media only screen and (max-width: 768px) {
-  #backgroundVideo {
-    height: auto; /* Adjust the height as needed */
-    min-height: 100vh; /* Adjust the minimum height as needed */
-  }
-}
-=======
-/* Modern React Native Design Principles */
-/* 1. Minimalistic Design */
-
-#playPauseBtn {
-  background-color: #00ff40; 
-  opacity: 35;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: background-color 0.2s ease;
-}
-
-#playPauseBtn img {
-  width: 30px;
-  height: 30px;
-}
-
-#playPauseBtn:active {
-  background-color: #b1b1b186;
-  transition: background-color 0.2s ease;
-}
-
-#playPauseBtn:active img {
-  transform: scale(1.2);
-  transition: transform 0.2s ease;
-}
-
-#playPauseBtn:active::after {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  background-color: rgb(218, 0, 0);
-  border-radius: 50%;
-  animation: ripple 0.4s linear;
-}
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(2.5);
-    opacity: 0;
-  }
-}
-
-/* Add a floating up and down animation */
-@keyframes floatUpDown {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-15px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
-#playPauseBtn:not(:hover) {
-  animation: floatUpDown 5s ease-in-out infinite;
-}
-/* 2. Animations and Transitions */
-/* 3. Consistent Typography */
-/* 4. Accessibility */
-/* 5. Responsive Design */
->>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702