From 5a85eba492799f97b34d3078ddd955e4cc7e90a8 Mon Sep 17 00:00:00 2001
From: Squirrel <rylancarey2011@gmail.com>
Date: Wed, 4 Dec 2024 20:41:12 -0800
Subject: [PATCH] Update index.css

---
 css/index.css | 523 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 519 insertions(+), 4 deletions(-)

diff --git a/css/index.css b/css/index.css
index a782728..d678971 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,76 @@
+/*Noma plz help fix the normal css cause I'm too lazy plz greg*/
+.downloads {
+margin-top: 140%;
+position: absolute;
+width: 100%;
+max-width: 600px;
+height: auto;
+padding: 20px;
+border-radius: 10px;
+background-color: rgb(32, 4, 52);
+color: rgb(131, 192, 201);
+box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+text-align: center;
+font-size: 1.1rem;
+line-height: 1.6;
+margin-left: auto;
+margin-right: auto;
+display: flex;
+flex-direction: column;
+align-items: center;
+top: 130%;
+left: 50%;
+transform: translateX(-50%);
+}
+
+.desc {
+font-size: x-large;
+margin: 10px 0;
+}
+
+.downloads a {
+color: rgb(0, 200, 255);
+}
+
+.link a {
+color: rgb(0, 200, 255);
+text-decoration: none;
+}
+
+.link a:hover {
+text-decoration: underline;
+}
+
+.next, .back {
+background-color: #007bff;
+color: white;
+height: 50px;
+font-size: 0.6em;
+border-radius: 6px;
+cursor: pointer;
+border: none;
+transition: background-color 0.3s ease, transform 0.3s ease;
+margin-top: 20px;
+padding: 10px 20px;
+}
+
+.next:hover, .back:hover {
+background-color: #0056b3;
+transform: translateY(-2px);
+}
+
+
+.page-2 {
+display: none;
+}
+
+.page-2 h3,
+.page-2 p {
+color: rgb(131, 192, 201);
+}
+#download {
+margin-top: 110%;
+}
 
 
 .download {
@@ -39,7 +112,7 @@
 }
 
 body {
-    background-image: linear-gradient(to bottom, rgb(77, 26, 122) 0%, rgb(57, 72, 148) 100%);
+    background-image: linear-gradient(to bottom, rgb(35, 80, 66) 0%, rgb(57, 72, 148) 100%);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: 100% 100%;
@@ -63,9 +136,10 @@ body {
 }
 .image-main {
     margin: 0;
-    margin-top: -330px;
-    margin-left: 900px;
-    height: 520px;
+    margin-top: 230px;
+    height: 400px;
+    width: auto;
+    margin-left: 675px;
     transform: rotate3d(0.5, -0.866, 0, 15deg) rotate(1deg);
     box-shadow: 2em 4em 6em -2em rgba(198, 135, 227, 0.5), 1em 2em 3.5em -2.5em rgba(216, 124, 124, 0.5);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
@@ -78,6 +152,447 @@ body {
     transform: rotate3d(0, 0, 0, 0deg) rotate(0deg);
     box-shadow: 2em 4em 6em -2em rgba(203, 89, 255, 0.807), 1em 2em 3.5em -2.5em rgba(4, 238, 215, 0.818);
 }
+#logo-text {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    font-size: x-large;
+    position: absolute;
+    margin-left: 100px;
+    margin-top: 13px;
+    color: rgb(131, 192, 201);
+    transition: all 0.5s ease-out;
+}
+#logo-text:hover {
+    transition: all 0.5s ease-in-out;
+    color: yellow;
+}
+.logo {
+    position: absolute;
+    max-width: 70px;
+    max-height: 70px;
+    margin-left: -580px;
+    margin-top: 1px;
+}
+
+.main {
+    margin-top: 20px;
+}
+.image-main:hover ~ .a2, 
+.image-main:hover ~ .made-by,
+.image-main:hover ~ .best-browser-thing {
+transform: rotate3d(0, 0, 0, 0deg) rotate(0deg);
+}
+.best-browser-thing {
+text-shadow: #932a2a;
+margin-left: 30px;
+margin-top: 367px;
+color: rgb(131, 192, 201);
+position: absolute;
+display: inline-block;
+}
+.good-way {
+font-size: x-large;
+margin-left: 212px;
+margin-top: 452px;
+color: rgb(131, 192, 201);
+position: absolute;
+display: inline-block;
+}
+.download {
+margin-top: 500px;
+}
+.dot {
+color: rgb(131, 192, 201);
+font-size: 2em;
+vertical-align: middle;
+margin-left: 5px;
+
+}
+
+.a2 {
+    transform: rotate3d(0.5, -0.866, 0, 15deg) rotate(1deg);
+    margin-top: 120px;
+    transition: transform 0.4s ease;
+    display: inline-block;
+    margin-left: 895px;
+    color: rgb(181, 131, 201);
+    height: 0;
+    width: 0;
+    
+}
+
+.made-by {
+    color: rgb(0, 200, 255);
+    transform: rotate3d(0.5, -0.866, 0, 15deg) rotate(1deg);
+    width: auto;
+    font-size: smaller;
+    transition: transform 0.4s ease;
+    margin-left: 690px;
+    
+}
+.footer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(9, 63, 50, 0.616);
+    color: white;
+    padding: 10px;
+    text-align: center;
+    z-index: 1000;
+}
+
+.footer a {
+    color: white;
+    text-decoration: none;
+    margin: 0 15px;
+    font-size: 18px;
+}
+
+.footer a:hover {
+    color:rgb(0, 200, 255);
+    text-decoration: underline;
+}
+.container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 500px;
+    padding: 0 100px;
+}
+
+#info, #info2 {
+    margin-top: 120px;
+    width: 100%;
+    max-width: 600px;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: rgb(32, 4, 52);
+    color: rgb(131, 192, 201);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+#info:hover, #info2:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
+}
+
+#info2 > #info-text2 {
+    font-size: 0.5em; 
+}
+#info > #info-text {
+    font-size: 0.5em;
+}
+#info2:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
+}
+#info:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
+}
+html {
+    scroll-behavior: smooth;
+}
+.what {
+    margin-top: 570px;
+    text-align: center;
+    color: rgb(131, 192, 201);
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    }
+.devs {
+        text-align: center;
+        color: rgb(131, 192, 201);
+        position: absolute;
+        margin-top: -90px;
+        left: 50%;
+        transform: translate(-50%, -50%);
+}
+.dev-grid {
+    margin-left: 4px;
+    margin-top: 180%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 2.5rem;
+    padding: 1rem;
+    background-color: rgba(0, 58, 128, 0.47);
+    border-radius: 15px;
+    overflow-x: auto;
+    white-space: nowrap;
+    max-height: 70vh; 
+    margin-bottom: 2rem;
+    
+}
+
+.dev-card {
+    background-color: rgb(75, 11, 120);
+    padding: 0.8rem;
+    border-radius: 10px;
+    text-align: center;
+    color: #fff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    display: inline-block;
+    width: 300px;
+    margin-left: 3rem;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.dev-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
+}
+.dev-pfp {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin-bottom: 1rem;
+    object-fit: cover;
+    border: 3px solid #fff;
+}
+
+.github-icon img {
+    width: 30px;
+    height: 30px;
+    margin-top: 1rem;
+    display: inline-block;
+}
+
+.dev-card h3 {
+    font-size: 1rem;
+    margin: 0.5rem 0;
+    font-weight: bold;
+}
+
+.dev-card p {
+    font-size: 0.4rem;
+    margin: 0.5rem 0;
+    color: #b0b0b0;
+}
+#about {
+    position: absolute;
+    margin-top: 360px;
+}
+.gloss {
+    position: absolute;
+    color: rgb(146, 19, 219);
+    top: 87%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.gloss a {
+    text-decoration: none;
+    color:rgb(72, 206, 244)
+}
+.gloss a:hover {
+color:rgb(192, 210, 31);
+text-decoration: underline;
+}
+.search-freak {
+color: rgb(0, 200, 255);
+position: absolute;
+margin-top: 100px;
+margin-left: 50px;
+}
+
+.search-freak a {
+text-decoration: none;
+color: rgb(105, 134, 142);
+transition: all 0.5s ease-out;
+}
+
+.search-freak a:hover {
+color: rgb(235, 210, 52);
+box-shadow: 2em 4em 6em -2em rgba(227, 218, 231, 0.5), 1em 2em 3.5em -2.5em rgba(218, 211, 211, 0.5);
+text-decoration: underline;
+transform: translateY(-5px);
+transition: all 0.5s ease-in-out;
+}
+
+.search-freak-gif {
+border-radius: 8px;
+position: absolute;
+margin-top: 190px;
+margin-left: 290px;
+width: auto;
+height: 300px;
+transition: all 0.5s ease-in-out;
+}
+
+.search-freak-gif:hover {
+box-shadow: 2em 4em 6em -2em rgba(227, 218, 231, 0.5), 1em 2em 3.5em -2.5em rgba(218, 211, 211, 0.5);
+transform: translateY(-5px);
+transition: all 0.5s ease-in-out;
+}
+
+.search-google {
+color: rgb(0, 200, 255);
+position: absolute;
+margin-top: 600px;
+margin-left: 250px;
+transition: all 0.5s ease-in-out;
+}
+
+.search-google a {
+text-decoration: none;
+color: rgb(105, 134, 142);
+transition: all 0.5s ease-out;
+}
+
+.search-google a:hover {
+color: rgb(235, 210, 52);
+box-shadow: 2em 4em 6em -2em rgba(227, 218, 231, 0.5), 1em 2em 3.5em -2.5em rgba(218, 211, 211, 0.5);
+text-decoration: underline;
+transform: translateY(-5px);
+transition: all 0.5s ease-in-out;
+}
+
+.google-gif {
+border-radius: 8px;
+position: absolute;
+margin-top: 690px;
+margin-left: 580px;
+width: auto;
+height: 300px;
+transition: all 0.5s ease-in-out;
+}
+
+.google-gif:hover {
+box-shadow: 2em 4em 6em -2em rgba(227, 218, 231, 0.5), 1em 2em 3.5em -2.5em rgba(218, 211, 211, 0.5);
+transform: translateY(-5px);
+transition: all 0.5s ease-in-out;
+}
+.notes {
+color: rgb(0, 200, 255);
+position: absolute;
+margin-top: 73%;
+margin-left: 50px;
+}
+.notes-gif {
+border-radius: 8px;
+position: absolute;
+margin-top: 78%;
+margin-left: 290px;
+width: auto;
+height: 300px;
+transition: all 0.5s ease-in-out;
+}
+.notes-gif:hover {
+box-shadow: 2em 4em 6em -2em rgba(227, 218, 231, 0.5), 1em 2em 3.5em -2.5em rgba(218, 211, 211, 0.5);
+transform: translateY(-5px);
+transition: all 0.5s ease-in-out;
+}
+.so-much-more {
+position: absolute;
+margin-top: 106%;
+color: rgb(80, 207, 243);
+left: 50%;
+    transform: translate(-50%, -50%);
+}
+#back-to-top {
+position: fixed;
+bottom: 20px;
+right: 20px;
+background-color: #b145adf7;
+color: white;
+border: none;
+border-radius: 50%;
+height: 30px;
+width: 30px;
+font-size: 20px;
+visibility: hidden;
+opacity: 0;
+cursor: pointer;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+transition: opacity 0.5s ease, visibility 0s 0.5s;
+}
+
+#back-to-top:hover {
+background-color: #76abe3;
+}
+
+#back-to-top.show {
+visibility: visible; 
+opacity: 1;
+transition: opacity 0.5s ease, visibility 0s 0s;
+}
+
+
+.downloads {
+margin-top: 140%;
+position: absolute;
+width: 100%;
+max-width: 600px;
+height: auto;
+padding: 20px;
+border-radius: 10px;
+background-color: rgb(32, 4, 52);
+color: rgb(131, 192, 201);
+box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+text-align: center;
+font-size: 1.1rem;
+line-height: 1.6;
+margin-left: auto;
+margin-right: auto;
+display: flex;
+flex-direction: column;
+align-items: center;
+top: 130%;
+left: 50%;
+transform: translateX(-50%);
+}
+
+.desc {
+font-size: x-large;
+margin: 10px 0;
+}
+
+.downloads a {
+color: rgb(0, 200, 255);
+}
+
+.link a {
+color: rgb(0, 200, 255);
+text-decoration: none;
+}
+
+.link a:hover {
+text-decoration: underline;
+}
+
+.next, .back {
+background-color: #007bff;
+color: white;
+height: 50px;
+font-size: 0.6em;
+border-radius: 6px;
+cursor: pointer;
+border: none;
+transition: background-color 0.3s ease, transform 0.3s ease;
+margin-top: 20px;
+padding: 10px 20px;
+}
+
+.next:hover, .back:hover {
+background-color: #0056b3;
+transform: translateY(-2px);
+}
+
+
+.page-2 {
+display: none;
+}
+
+.page-2 h3,
+.page-2 p {
+color: rgb(131, 192, 201);
+}
+#download {
+margin-top: 110%;
+}
 
 
 @media screen and (max-width: 1540px) {