diff --git a/links.css b/links.css
new file mode 100644
index 0000000..0eac183
--- /dev/null
+++ b/links.css
@@ -0,0 +1,143 @@
+.home-button {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ width: 25px !important;
+ height: 25px !important;
+ text-align: center;
+ border-radius: 50%;
+ background-color: #ffffff;
+ color: #000000;
+ font-size: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ padding: 10px !important;
+}
+
+.home-button:hover {
+ background-color: #e0e0e0;
+ transform: scale(1.1);
+ transition: background-color 0.3s, transform 0.3s;
+}
+
+.xxlarge {
+ width: 500px;
+ height: 500px;
+ left: 50%;
+ bottom: -250px;
+ animation-delay: 0s;
+}
+
+.xlarge {
+ width: 400px;
+ height: 400px;
+ left: 45%;
+ bottom: -200px;
+ animation-delay: -2s;
+}
+
+.large {
+ width: 300px;
+ height: 300px;
+ left: 40%;
+ bottom: -150px;
+ animation-delay: -4s;
+}
+
+.mediun {
+ width: 200px;
+ height: 200px;
+ left: 35%;
+ bottom: -100px;
+ animation-delay: -6s;
+}
+
+.small {
+ width: 100px;
+ height: 100px;
+ left: 30%;
+ bottom: -50px;
+ animation-delay: -8s;
+}
+
+body,
+html {
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+}
+
+.ripple-background {
+ position: relative;
+ height: 100%;
+ background-color: #000;
+ /* Consider a dark background for contrast */
+}
+
+.circle {
+ position: absolute;
+ border-radius: 50%;
+ animation: ripple 15s infinite ease-in-out;
+ box-shadow: 0px 0px 1px 0px #fff;
+ opacity: 0;
+}
+
+.links-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ z-index: 1;
+}
+
+.link {
+ background-color: #ffffffc2;
+ color: #000000;
+ text-decoration: none;
+ padding: 10px 20px;
+ margin: 5px 0;
+ border-radius: 5px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ transition: background-color 0.3s, transform 0.3s;
+ display: block;
+ width: max-content;
+ max-width: 90%;
+}
+
+.link:hover {
+ background-color: #e0e0e0;
+ /* Slightly darker background on hover */
+ transform: translateY(-2px);
+ /* Slight lift effect */
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fade-in {
+ animation: fadeIn 5s ease-in;
+ opacity: 0;
+ animation-fill-mode: forwards;
+}
+
+
+@keyframes ripple {
+ 0% {
+ transform: scale(0);
+ opacity: 0.75;
+ }
+
+ 100% {
+ transform: scale(4);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/links.html b/links.html
index 1f36445..4ca6651 100644
--- a/links.html
+++ b/links.html
@@ -4,152 +4,15 @@
+
+
+
+
+
Ripple Effect Background
-
+