diff --git a/pages/licensing.html b/pages/licensing.html
index 9f3a1e5..c143655 100644
--- a/pages/licensing.html
+++ b/pages/licensing.html
@@ -9,167 +9,6 @@
-
diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html
index 61794a9..b8e6bed 100644
--- a/pages/privacypolicy.html
+++ b/pages/privacypolicy.html
@@ -8,97 +8,7 @@
diff --git a/pages/termsofservice.html b/pages/termsofservice.html
index dbb487c..201772c 100644
--- a/pages/termsofservice.html
+++ b/pages/termsofservice.html
@@ -9,93 +9,6 @@
-
diff --git a/styles/404.css b/styles/404.css
new file mode 100644
index 0000000..52dae7b
--- /dev/null
+++ b/styles/404.css
@@ -0,0 +1,75 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ background-color: #f6f6f6;
+}
+.center {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 90vh;
+}
+.pic {
+ width: 700px;
+ height: 700px;
+ animation: updown 2s ease-in-out infinite alternate;
+}
+@keyframes updown {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(20px);
+ }
+}
+a {
+ text-decoration: none;
+ color: #353535;
+}
+.btn {
+ position: absolute;
+ padding: 10px 20px;
+ background-color: #32ddaac9;
+ border-radius: 5px;
+ font-size: 20px;
+ font-weight: bold;
+ border: none;
+ top: 600px;
+}
+@media screen and (max-width: 600px) {
+ .pic {
+ width: 300px;
+ height: 300px;
+ }
+ .btn {
+ top: 400px;
+ }
+}
+
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/styles/FAQs.css b/styles/FAQs.css
index 52b26ff..e793b98 100644
--- a/styles/FAQs.css
+++ b/styles/FAQs.css
@@ -157,3 +157,195 @@ h1:hover{
}
}
+.attribution {
+ font-size: 11px;
+ text-align: center;
+}
+
+.attribution a {
+ color: hsl(228, 45%, 44%);
+}
+
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+html,
+body {
+ height: 100%;
+ margin: 0;
+ overflow: auto !important;
+ /* Allow scrolling */
+ height: 105%;
+}
+
+body {
+ background-color: #e7b537;
+ display: flex;
+ flex-direction: column;
+ font-family: "WorkSans-Regular", Arial, sans-serif;
+}
+
+@media screen and (max-width: 450px) {
+ .contributor-card {
+ max-width: 90%;
+ }
+
+ .navbar {
+ flex-direction: column;
+ padding: 5px !important;
+ }
+
+ .faqcontainer {
+ background-color: white;
+ border-radius: 20px;
+ padding: 20px;
+ max-width: 600px;
+ width: 90%;
+ box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5);
+ margin: 100px auto 20px;
+ /* Increased margin-top to avoid content being hidden under navbar */
+ flex: 1;
+ z-index: 0;
+ /* Ensure it's below the fixed elements */
+ margin-top: 54px;
+ }
+
+ .author {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: linear-gradient(to right, #00093c, #2d0b00);
+ color: #fff;
+ padding: 0px;
+ position: fixed;
+ bottom: 0;
+ z-index: 1000;
+ height: 67px;
+ flex-shrink: 0;
+ box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+ /* Added shadow for better visibility */
+ }
+
+ .author .fotbar {
+ display: flex;
+ gap: -22px;
+ }
+
+ .author .fotbar a {
+ color: white;
+ text-decoration: none;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 18px;
+ background-color: transparent;
+ }
+
+ .author p {
+ color: white;
+ padding: 10px;
+ margin-right: -550px;
+ font-size: 20px;
+ font-weight: 600;
+ }
+
+ .author .social-icons {
+ display: flex;
+ gap: 10px;
+ margin-right: 20px;
+ }
+
+ .author a {
+ color: white !important;
+ }
+
+ .author .social-icons a {
+ color: white;
+ text-decoration: none;
+ font-size: 20px;
+ }
+}
+
+@media screen and (max-width: 1190px) {
+ .author a {
+ font-size: small;
+ }
+}
+
+@media screen and (max-width: 1065px) {
+ .author .fotbar {
+ display: grid;
+ }
+
+ .author .fotbar a {
+ font-size: 14px;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .author {
+ display: none !important;
+ }
+
+ .navbar {
+ display: none !important;
+ }
+
+ .author p {
+ font-size: 16px;
+ padding: 0;
+ }
+
+ .author .fotbar a {
+ font-size: 12px;
+ }
+
+ .author .social-icons a {
+ font-size: 15px;
+ }
+
+ .faqcontainer {
+ margin-top: 49px;
+ }
+}
+
+@media (max-width: 768px) {
+ .author {
+ position: relative !important;
+ }
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 220, 131, 0.979);
+ border-radius: 15px;
+}
+::-webkit-scrollbar-track {
+ background-color: rgba(46, 33, 0, 0.979);
+}
\ No newline at end of file
diff --git a/styles/about.css b/styles/about.css
new file mode 100644
index 0000000..d7aacb6
--- /dev/null
+++ b/styles/about.css
@@ -0,0 +1,454 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ background-color: #e7b537;
+ scroll-behavior: smooth;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+}
+
+::-webkit-scrollbar {
+ width: 8px !important;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(231, 181, 55, 0.979) !important;
+ border-radius: 15px !important;
+}
+
+::-webkit-scrollbar-track {
+ background-color: black !important;
+}
+
+main {
+ flex: 1;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ background-color: #e7b537;
+ scroll-behavior: smooth;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+}
+
+.about-header {
+ font-family: "Anton", sans-serif;
+ background-color: transparent;
+ color: #0e0e0e;
+ padding: 15px;
+ text-shadow: 2px 2px 10px white;
+ text-align: center;
+ font-size: 2.5rem;
+ transition: background-color 0.3s ease;
+}
+
+.about-header:hover {
+ background-color: #e59253;
+}
+
+h1 {
+ margin: 0;
+}
+
+main {
+ padding: 20px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+p {
+ color: #333;
+ line-height: 1.6;
+ text-align: justify;
+ max-width: 750px;
+ margin: 0 auto;
+ font-size: 16px;
+}
+
+.functionalities,
+.how-to-play {
+ flex: 1 1 320px;
+ max-width: 320px;
+ height: 350px;
+ margin: 10px;
+ color: #ffffff;
+ font-family: "Poppins", sans-serif;
+ background: linear-gradient(135deg, #5f4c9b, #3540e3);
+ border-radius: 10px;
+ padding: 0px 204px;
+ box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
+ transition: all 0.3s ease;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 352px;
+}
+
+.functionalities h2,
+.how-to-play h2 {
+ font-size: 24px;
+ margin-bottom: 10px;
+ font-family: "Poppins", sans-serif;
+ font-weight: 700;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ transition: all 0.3s ease;
+}
+
+.functionalities .content,
+.how-to-play .content {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ font-weight: 500;
+ position: absolute;
+ top: 60px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 20px;
+}
+
+.functionalities::after,
+.how-to-play::after {
+ content: "(Hover here to know more)";
+ position: absolute;
+ bottom: 20px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ opacity: 0.7;
+ transition: opacity 0.3s ease;
+}
+
+.functionalities:hover::after,
+.how-to-play:hover::after {
+ opacity: 0;
+}
+
+.functionalities:hover h2,
+.how-to-play:hover h2 {
+ top: 10px;
+ transform: translateX(-50%);
+}
+
+.functionalities:hover .content,
+.how-to-play:hover .content {
+ opacity: 1;
+}
+
+ul {
+ list-style: none;
+ padding-left: 0;
+ margin: 0;
+ margin-right: 29px;
+ margin-left: 33px;
+ margin-top: -40px;
+}
+
+li {
+ margin-bottom: 8px;
+ line-height: 1.6;
+}
+
+.functionalities ul,
+.how-to-play p {
+ color: #ffffff;
+ font-size: 14px;
+}
+
+.author {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: linear-gradient(to right, #00093c, #2d0b00);
+ color: #fff;
+ padding: 15px;
+ position: sticky;
+ bottom: 0;
+ z-index: 1000;
+}
+
+.author .fotbar {
+ display: flex;
+ gap: -10px;
+}
+
+.author .fotbar a {
+ color: white;
+ text-decoration: none;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 18px;
+ background-color: transparent;
+}
+
+::-webkit-scrollbar {
+ display: none;
+}
+
+.author p {
+ color: white;
+ padding: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.author .social-icons {
+ display: flex;
+ gap: 10px;
+ margin-right: 20px;
+}
+
+.author a {
+ color: white !important;
+}
+
+.author .social-icons a {
+ color: white;
+ text-decoration: none;
+ font-size: 20px;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 769px) {
+ .navbar {
+ flex-direction: column;
+ padding: 20px;
+ }
+
+ .logo a {
+ font-size: 20px;
+ }
+
+ .navlinks {
+ flex-direction: column;
+ align-items: center;
+ margin-top: 10px;
+ }
+
+ .navlinks a {
+ font-size: 16px;
+ margin: 5px 0;
+ }
+}
+
+@media screen and (max-width: 450px) {
+ .logo a {
+ font-size: 18px;
+ }
+
+ .functionalities,
+ .how-to-play {
+ padding: -1px;
+ }
+}
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 90px;
+ left: 30px;
+ width: 50px;
+ height: 50px;
+ background: radial-gradient(circle, #ff7920, #dd5900);
+ color: white;
+ text-align: center;
+ line-height: 50px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: none;
+ z-index: 1000;
+ transition: background-color 0.3s ease;
+}
+
+.scroll-to-top svg {
+ vertical-align: middle;
+ fill: white;
+ transition: transform 0.3s ease;
+ margin-bottom: 10px;
+}
+
+body > .about-header {
+ width: 100%;
+ position: relative;
+ top: 100px;
+}
+
+body > .about-header > h1 {
+ font-size: 5rem;
+}
+
+body > p {
+ position: relative;
+ top: 100px;
+}
+
+body > main {
+ position: relative;
+ top: 100px;
+ padding-bottom: 100px;
+}
+
+.author {
+ position: fixed;
+ bottom: 0;
+}
+
+.navbarr {
+ width: 100vw;
+}
+
+.navbar-toggler {
+ background-color: transparent;
+ border: none;
+}
+
+.navbar-toggler .toggler-icon {
+ width: 30px;
+ height: 2px;
+ background-color: #fff;
+ display: block;
+ margin: 5px 0;
+ position: relative;
+ -webkit-transition: all 0.3s ease-out 0s;
+ -moz-transition: all 0.3s ease-out 0s;
+ -ms-transition: all 0.3s ease-out 0s;
+ -o-transition: all 0.3s ease-out 0s;
+ transition: all 0.3s ease-out 0s;
+}
+
+.nav-links {
+ letter-spacing: 4px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ list-style: none;
+ width: 50%;
+ padding: 0;
+ color: white;
+ font-family: inherit;
+}
+
+.nav-links li a,
+.logo a {
+ color: white;
+}
+
+button a {
+ background-color: transparent;
+}
+
+.start {
+ padding: 10px 5px;
+ border-radius: 5px;
+}
+
+@media screen and (max-width: 1190px) {
+ .author a {
+ margin-left: 13px;
+ }
+}
+
+@media screen and (max-width: 1065px) {
+ .author .fotbar {
+ display: grid;
+ }
+
+ .author .fotbar a {
+ font-size: 14px;
+ }
+
+ body > .about-header > h1 {
+ font-size: 3rem;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .author {
+ padding: 10px;
+ }
+
+ .author p {
+ font-size: 16px;
+ padding: 0;
+ }
+
+ .author .fotbar a {
+ font-size: 12px;
+ }
+
+ .author .social-icons a {
+ font-size: 15px;
+ }
+
+ body > p {
+ padding: 30px;
+ }
+
+ body > .about-header > h1 {
+ font-size: 2rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .author {
+ position: relative !important;
+ }
+}
\ No newline at end of file
diff --git a/styles/contributors.css b/styles/contributors.css
new file mode 100644
index 0000000..c958613
--- /dev/null
+++ b/styles/contributors.css
@@ -0,0 +1,448 @@
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+@media (max-width: 760px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+body {
+ margin: 0;
+ font-family: Arial, sans-serif;
+ overflow: auto !important;
+ background-color: #e7b537 !important;
+ overflow-x: hidden !important;
+ /* Hide horizontal scrollbar */
+}
+
+.header-hero {
+ position: relative;
+ padding-top: 50px;
+ padding-bottom: 50px;
+}
+
+.header-hero .container {
+ position: relative;
+}
+
+.header-hero .header-hero-content {
+ position: relative;
+ color: #fff;
+}
+
+.header-hero .header-hero-image {
+ margin-top: 50px;
+}
+
+.header-sub-title {
+ font-size: 1.5rem;
+ font-weight: 500;
+}
+
+.header-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+}
+
+.text {
+ font-size: 1rem;
+ font-weight: 400;
+}
+
+.main-btn {
+ font-size: 1rem;
+ font-weight: 500;
+ padding: 12px 30px;
+ border-radius: 30px;
+ background-color: #ffffff;
+ color: #000;
+ text-decoration: none;
+ transition: all 0.3s ease;
+}
+
+.main-btn:hover {
+ background-color: #000;
+ color: #ffffff;
+}
+
+.content {
+ position: relative;
+ padding-top: 0;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 16px;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-3xl {
+ font-size: 1.875rem;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.mb-8 {
+ margin-bottom: 0.8rem;
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.gap-8 {
+ gap: 2rem;
+}
+
+.contributors {
+ padding-top: 10px;
+}
+
+.contributor-card {
+ width: 100%;
+ max-width: calc(25% - 16px);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #fff;
+ /* border: 1px solid #ccc; */
+ border-radius: 8px;
+ /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
+ padding: 16px;
+ transition: transform 0.3s, box-shadow 0.3s;
+ text-decoration: none;
+ color: inherit;
+ margin-bottom: 16px;
+}
+
+.contributor-card:hover {
+ transform: scale(1.05);
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.contributor-card img {
+ width: 96px;
+ height: 96px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin-bottom: 16px;
+}
+
+.contributor-card {
+ position: relative;
+ overflow: hidden;
+ border: 1px solid #ced4da;
+ border-radius: 0.25rem;
+ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
+ background-color 0.3s ease-in-out;
+ background-color: white;
+ color: black;
+ z-index: 0;
+ width: 250px;
+ margin: 10px;
+ text-align: center;
+ padding: 20px;
+}
+
+.contributor-card::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(39deg, #c4eaf9 50%, #089ffd 50%);
+ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+ transform: translate(-100%, -100%);
+ opacity: 0;
+ z-index: -1;
+}
+
+.contributor-card:hover::before {
+ transform: translate(0, 0);
+ opacity: 1;
+ color: black;
+}
+
+.contributor-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 4px 9px rgb(51, 235, 255);
+}
+
+.text-lg {
+ font-size: 1.125rem;
+}
+
+.text-gray-900 {
+ color: #1a202c;
+}
+
+.text-gray-100 {
+ color: #f7fafc;
+}
+
+.mb-2 {
+ margin-bottom: 0.5rem;
+}
+
+.text-gray-700 {
+ color: #4a5568;
+}
+
+.text-gray-400 {
+ color: #cbd5e0;
+}
+
+.flex-center {
+ display: flex;
+ align-items: center;
+}
+
+.mr-1 {
+ margin-right: 0.1rem;
+}
+
+.bg_cover {
+ background-size: cover;
+ background-position: center;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 217, 121, 0.979);
+ border-radius: 15px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: black;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .contributor-card {
+ max-width: 80%;
+ }
+}
+
+/* For width more than 768px(exclusive) */
+@media (min-width: 768px) {
+ .contributor-card {
+ max-width: 80%;
+ }
+}
+
+@media screen and (max-width: 769px) {
+ .navbar {
+ flex-direction: column;
+ align-items: center;
+ margin-top: 0px !important;
+ }
+
+ .logo a {
+ font-size: 20px;
+ }
+
+ .logo {
+ margin-bottom: 10px;
+ }
+
+ .navlinks {
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .navlinks a {
+ font-size: 16px;
+ margin: 10px 0;
+ }
+}
+
+@media screen and (max-width: 450px) {
+ .contributor-card {
+ max-width: 90%;
+ }
+
+ .navbar {
+ flex-direction: column;
+ padding: 5px !important;
+ }
+
+ .logo a {
+ font-size: 20px;
+ }
+
+ .navlinks {
+ flex-direction: column;
+ margin: 0;
+ gap: 4px !important;
+ font-size: 1px !important;
+ list-style: none;
+ }
+
+ .navlinks a {
+ font-size: 16px;
+ margin: 10px 0;
+ }
+}
+
+.author {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: linear-gradient(to right, #00093c, #2d0b00);
+ color: #fff;
+ padding: 15px;
+ position: sticky;
+ bottom: 0;
+ z-index: 1000;
+}
+
+.author .fotbar {
+ display: flex;
+ gap: -22px;
+}
+
+.author .fotbar a {
+ color: white;
+ text-decoration: none;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 18px;
+ background-color: transparent;
+}
+
+.author p {
+ color: white;
+ padding: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.author .social-icons {
+ display: flex;
+ gap: 10px;
+ margin-right: 20px;
+}
+
+.author a {
+ color: white !important;
+}
+
+.author .social-icons a {
+ color: white;
+ text-decoration: none;
+ font-size: 20px;
+}
+
+@media screen and (max-width: 1190px) {
+ .author a {
+ font-size: small;
+ }
+}
+
+@media screen and (max-width: 1065px) {
+ .author .fotbar {
+ display: grid;
+ }
+
+ .author .fotbar a {
+ font-size: 14px;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .author {
+ padding: 10px;
+ }
+
+ .author p {
+ font-size: 16px;
+ padding: 0;
+ }
+
+ .author .fotbar a {
+ font-size: 12px;
+ }
+
+ .author .social-icons a {
+ font-size: 15px;
+ }
+}
+
+@media (max-width: 768px) {
+ .author {
+ position: relative !important;
+ }
+}
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 90px;
+ left: 30px;
+ width: 50px;
+ height: 50px;
+ background: radial-gradient(circle, #ff7920, #dd5900);
+ color: white;
+ text-align: center;
+ line-height: 50px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: none;
+ z-index: 1000;
+ transition: transform 0.3s ease, background-color 0.3s ease,
+ bottom 0.3s ease;
+}
+
+.scroll-to-top:hover {
+ background-color: #dd5900;
+ transform: scale(1.1);
+}
+.scroll-to-top svg {
+ vertical-align: middle;
+ fill: white;
+ transition: transform 0.3s ease;
+ margin-bottom: 10px;
+}
+
+.scroll-to-top:hover svg {
+ transform: translateY(-5px);
+}
\ No newline at end of file
diff --git a/styles/game.style.css b/styles/game.style.css
index 55c1637..4fbb843 100644
--- a/styles/game.style.css
+++ b/styles/game.style.css
@@ -742,3 +742,839 @@ body {
box-shadow: 0px 14px 46px -8px #1875ff;
opacity: 1;
}
+
+.back-home:visited {
+ color: white;
+}
+
+.button-container {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+ margin-top: -13px;
+ left: 20%;
+ margin-right: 122px;
+}
+
+.button-container button,
+.button-container a {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 13px 13px;
+ font-size: 14px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ position: relative;
+ transition: background-color 0.3s ease;
+}
+
+.button-container #sound-toggle {
+ background-color: rgb(12, 1, 1);
+ border-radius: 4px;
+ padding: 10px 20px;
+}
+
+.button-container svg {
+ width: 30px;
+ height: 30px;
+ fill: white;
+}
+
+.button-container a {
+ text-decoration: none;
+}
+
+.button-container button:hover,
+.button-container a:hover {
+ background-color: rgb(69, 133, 254);
+}
+
+.button-container #sound-toggle:hover {
+ background-color: rgb(21, 39, 77);
+}
+
+.button-container [title]:hover::after {
+ opacity: 1;
+}
+
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 99999;
+}
+
+/* Timer */
+#timer-container {
+ position: fixed;
+ right: 208px;
+ top: 93%;
+ height: 77px;
+ width: 96px;
+ transform: translateY(-50%);
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ z-index: 1000;
+ margin-right: 26vw;
+}
+
+#timer {
+ font-size: 38px;
+ font-weight: bold;
+ margin-top: -19px;
+ color: #333;
+}
+
+#timer-label {
+ font-size: 14px;
+ color: #666;
+ margin-top: -6px;
+}
+
+/* Score board */
+.game-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 20px;
+}
+
+.game-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+}
+
+.scoreboard-container {
+ position: absolute;
+ left: -65%;
+ top: 39%;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ width: 275px;
+ cursor: move;
+ z-index: 1000;
+}
+
+.scoreboard-container h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #333;
+}
+
+.scoreboard {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.score {
+ font-size: 22px;
+ font-weight: bold;
+ padding: 15px;
+ border-radius: 10px;
+ text-align: center;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+/* Tour */
+#tour-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+}
+
+.overlay-content ul {
+ text-align: left;
+ margin: 20px 0;
+}
+
+.tour-step {
+ position: absolute;
+ display: none;
+ padding: 20px;
+ border-radius: 8px;
+ background: #fff0f5;
+ color: #000;
+ width: 314px;
+}
+
+.tour-step.step-1 {
+ top: 20%;
+ left: 40%;
+ margin-top: -268px;
+}
+
+.tour-step.step-2 {
+ top: 80%;
+ left: 66%;
+ margin-top: -16%;
+}
+
+.tour-step.step-3 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+}
+
+.tour-step.step-4 {
+ top: 27%;
+ right: 57%;
+ margin-top: -30%;
+ width: 399px;
+ padding: 20px;
+}
+
+.tour-step.step-5 {
+ top: 10%;
+ left: 13%;
+ margin-top: -28%;
+ width: 340px;
+}
+
+.tour-step.step-6 {
+ top: 20%;
+ left: 42%;
+ margin-top: -103px;
+ width: 392px;
+}
+
+.tour-step.step-7 {
+ top: 20%;
+ left: 31%;
+ margin-top: -80px;
+ width: 392px;
+}
+
+.tour-controls {
+ position: absolute;
+ bottom: -40px;
+ width: 86%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+}
+
+.tour-controls .button {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 5px 17px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.tour-controls .button:hover {
+ background-color: rgb(69, 133, 254);
+}
+
+#prev-step {
+ background-color: rgb(255, 165, 0);
+}
+
+#skip-tour {
+ background-color: rgb(255, 0, 0);
+}
+
+.overlay-content .button-container {
+ position: absolute;
+ bottom: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+}
+
+/* Responsive styles for tablets and mobile devices */
+@media screen and (max-width: 768px) {
+ .tour-step {
+ width: 80%;
+ padding: 15px;
+ }
+
+ .circle-container {
+ display: none;
+ }
+
+ .button-container {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 20px;
+ margin-left: 34px;
+ }
+
+ .button-container button,
+ .button-container a {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 13px 13px;
+ font-size: 14px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ position: relative;
+ transition: background-color 0.3s ease;
+ }
+
+ .button-container #sound-toggle {
+ background-color: rgb(12, 1, 1);
+ border-radius: 4px;
+ padding: 10px 20px;
+ }
+
+ .button-container svg {
+ width: 30px;
+ height: 30px;
+ fill: white;
+ }
+
+ .button-container a {
+ text-decoration: none;
+ }
+
+ .button-container button:hover,
+ .button-container a:hover {
+ background-color: rgb(69, 133, 254);
+ }
+
+ .button-container #sound-toggle:hover {
+ background-color: rgb(21, 39, 77);
+ }
+
+ .button-container [title]:hover::after {
+ opacity: 1;
+ }
+
+ .circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(
+ circle,
+ rgba(73, 232, 247, 0.466),
+ rgba(141, 38, 172, 0.5)
+ );
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+ }
+
+ .circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 99999;
+ }
+
+ /* Timer */
+ #timer-container {
+ position: fixed;
+ right: 171px;
+ top: 92%;
+ height: 90px;
+ width: 103px;
+ transform: translateY(-50%);
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ z-index: 1000;
+ margin-right: 26vw;
+ }
+
+ #timer {
+ font-size: 38px;
+ font-weight: bold;
+ margin-top: -11px;
+ color: #333;
+ }
+
+ #timer-label {
+ font-size: 14px;
+ color: #666;
+ margin-top: -6px;
+ }
+
+ /* Score board */
+ .game-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 20px;
+ }
+
+ .game-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin-top: -156px;
+ }
+
+ .scoreboard-container {
+ position: absolute;
+ left: 20px;
+ top: 20px;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ width: 250px;
+ cursor: move;
+ z-index: 1000;
+ display: none;
+ }
+
+ .scoreboard-container h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #333;
+ }
+
+ .scoreboard {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .score {
+ font-size: 22px;
+ font-weight: bold;
+ padding: 15px;
+ border-radius: 10px;
+ text-align: center;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ /* Tour */
+ #tour-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ }
+
+ .overlay-content ul {
+ text-align: left;
+ margin: 20px 0;
+ }
+
+ .tour-step {
+ position: absolute;
+ display: none;
+ padding: 20px;
+ border-radius: 8px;
+ background: #fff0f5;
+ color: #000;
+ width: 314px;
+ }
+
+ .tour-step.step-1 {
+ top: 20%;
+ left: 40%;
+ margin-top: -268px;
+ }
+
+ .tour-step.step-2 {
+ top: 80%;
+ left: 15%;
+ margin-top: -16%;
+ }
+
+ .tour-step.step-3 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step.step-4 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step.step-5 {
+ bottom: 30%;
+ left: 14%;
+ margin-bottom: 230px;
+ }
+
+ .tour-step.step-6 {
+ top: 20%;
+ left: 37%;
+ margin-top: -74px;
+ width: 536px;
+ }
+
+ .tour-step.step-7 {
+ top: 20%;
+ left: 32%;
+ margin-top: -65px;
+ width: 392px;
+ }
+
+ .tour-controls {
+ position: absolute;
+ bottom: -40px;
+ width: 86%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .tour-controls .button {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 5px 17px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .tour-controls .button:hover {
+ background-color: rgb(69, 133, 254);
+ }
+
+ #prev-step {
+ background-color: rgb(255, 165, 0);
+ }
+
+ #skip-tour {
+ background-color: rgb(255, 0, 0);
+ }
+
+ .overlay-content .button-container {
+ position: absolute;
+ bottom: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+}
+
+/* Responsive styles for tablets and mobile devices */
+@media screen and (max-width: 768px) {
+ .tour-step {
+ width: 80%;
+ padding: 15px;
+ }
+
+ .tour-step h3 {
+ font-size: 1.2em;
+ }
+
+ .tour-step p {
+ font-size: 0.9em;
+ }
+
+ .tour-controls .button {
+ padding: 5px 10px;
+ font-size: 0.9em;
+ }
+
+ .tour-controls {
+ flex-direction: column;
+ gap: 5px;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ #timer-container {
+ position: fixed;
+ right: 146px;
+ top: 91%;
+ height: 70px;
+ width: 72px;
+ transform: translateY(-50%);
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ z-index: 1000;
+ margin-right: -36vw;
+ }
+
+ #timer {
+ font-size: 33px;
+ font-weight: bold;
+ margin-top: -15px;
+ color: #333;
+ }
+
+ #timer-label {
+ font-size: 11px;
+ color: #666;
+ margin-top: -5px;
+ }
+
+ .game-wrapper {
+ margin-top: 150px !important;
+ }
+
+ .tour-step.step-1 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ }
+
+ .tour-step.step-2 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -39px;
+ }
+
+ .tour-step.step-3 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -392px;
+ }
+
+ .tour-step.step-7 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -339px;
+ }
+
+ .tour-step.step-4 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-bottom: 53px;
+ }
+
+ .tour-step.step-5 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -119px;
+ }
+
+ .tour-step.step-6 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -193px;
+ }
+
+ .tour-step h3 {
+ font-size: 1em;
+ }
+
+ .tour-step p {
+ font-size: 0.8em;
+ }
+
+ .tour-controls .button {
+ padding: 5px 10px;
+ font-size: 0.8em;
+ }
+
+ .tour-controls {
+ flex-direction: column;
+ gap: 3px;
+ margin-bottom: -15%;
+ margin-left: 8px;
+ }
+}
+
+/* Responsive styles for tablets and mobile devices */
+@media screen and (max-width: 768px) {
+ .tour-step {
+ width: 80%;
+ padding: 15px;
+ }
+
+ .tour-step h3 {
+ font-size: 1.2em;
+ }
+
+ .tour-step p {
+ font-size: 0.9em;
+ }
+
+ .tour-controls .button {
+ padding: 5px 10px;
+ font-size: 0.9em;
+ }
+
+ .tour-controls {
+ flex-direction: column;
+ gap: 5px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .tour-step.step-1 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ }
+
+ .tour-step.step-2 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -39px;
+ }
+
+ .tour-step.step-3 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -392px;
+ }
+
+ .tour-step.step-7 {
+ width: 83%;
+ padding: 10px;
+ left: 65%;
+ margin-left: -32%;
+ margin-top: -339px;
+ }
+
+ .tour-step.step-4 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-bottom: 53px;
+ }
+
+ .tour-step.step-5 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -119px;
+ }
+
+ .tour-step.step-6 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -193px;
+ }
+
+ .tour-step .step-8 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step h3 {
+ font-size: 1em;
+ }
+
+ .tour-step p {
+ font-size: 0.8em;
+ }
+
+ .tour-controls .button {
+ padding: 5px 10px;
+ font-size: 0.8em;
+ }
+
+ .tour-controls {
+ flex-direction: column;
+ gap: 3px;
+ margin-bottom: -15%;
+ margin-left: 8px;
+ }
+
+ .circle-container {
+ display: none;
+ }
+}
+
+#myVideo {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: -1;
+}
diff --git a/styles/howtoplay.css b/styles/howtoplay.css
index 53a04b7..5b725da 100644
--- a/styles/howtoplay.css
+++ b/styles/howtoplay.css
@@ -7,6 +7,92 @@ body {
overflow-x: hidden;
}
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+::-webkit-scrollbar {
+ width: 8px;
+}
+::-webkit-scrollbar-thumb {
+ background-color: rgba(231, 181, 55, 0.979);
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+.navbar-toggler {
+ background-color: transparent;
+ border: none;
+}
+
+.navbar-toggler .toggler-icon {
+ width: 30px;
+ height: 2px;
+ background-color: #fff;
+ display: block;
+ margin: 5px 0;
+ position: relative;
+ -webkit-transition: all 0.3s ease-out 0s;
+ -moz-transition: all 0.3s ease-out 0s;
+ -ms-transition: all 0.3s ease-out 0s;
+ -o-transition: all 0.3s ease-out 0s;
+ transition: all 0.3s ease-out 0s;
+}
+.scroll-to-top {
+ position: fixed;
+ bottom: 30px;
+ left: 30px;
+ width: 50px;
+ height: 50px;
+ background: radial-gradient(circle, #ff7920, #dd5900);
+ color: white;
+ text-align: center;
+ line-height: 50px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: none;
+ z-index: 1000;
+ transition: transform 0.3s ease, background-color 0.3s ease,
+ bottom 0.3s ease;
+}
+
+.scroll-to-top:hover {
+ background-color: #dd5900;
+ transform: scale(1.1);
+ bottom: 35px;
+}
+.scroll-to-top svg {
+ vertical-align: middle;
+ fill: white;
+ transition: transform 0.3s ease;
+ margin-bottom: 10px;
+}
+
+.scroll-to-top:hover svg {
+ transform: translateY(-5px);
+}
+
.instructions-container {
display: flex;
flex-direction: column;
diff --git a/styles/index.style.css b/styles/index.style.css
index bf8385f..7fcadfe 100644
--- a/styles/index.style.css
+++ b/styles/index.style.css
@@ -260,3 +260,557 @@ input:out-of-range + .player::after {
filter: blur(1px);
transform: scale(0.95, 0.95);
}
+
+.sticky-button {
+ /* position: fixed;
+ top: 50%;
+ left: 20px;
+ transform: translateY(-50%);
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 50%;
+ font-size: 16px;
+ cursor: pointer; */
+
+ transform: rotate(-90deg);
+ padding: 12px;
+
+ position: fixed;
+ left: 0px;
+ font-family: verdana;
+ font-size: 15px;
+ color: rgb(255, 255, 255);
+ background: rgb(245, 146, 2);
+ z-index: 999;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ border-radius: 0px 0px 5px 5px;
+ margin-left: -34.5px;
+ top: 50%;
+ margin-top: -16px;
+ text-shadow: none;
+}
+
+.sticky-button:hover {
+ background-color: grey;
+}
+
+p,h3,h2{
+ font-family: 'Press Start 2P', cursive !important;
+}
+
+
+/* Modal styles */
+.modal {
+display: none;
+position: fixed;
+z-index: 1000;
+left: 0;
+top: 0;
+width: 100%;
+height: 150%;
+overflow: auto;
+background-color: rgba(0, 0, 0, 0.4);
+backdrop-filter: blur(5px);
+}
+
+.modal-content {
+background-color: white;
+margin: 15% auto;
+padding: 20px;
+border-radius: 10px;
+width: 50%;
+max-width: 650px;
+box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+animation: fadeIn 0.5s;
+}
+
+.close {
+color: #aaa;
+float: right;
+font-size: 28px;
+font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+color: black;
+text-decoration: none;
+cursor: pointer;
+}
+
+form {
+display: flex;
+flex-direction: column;
+gap: 15px;
+}
+
+.form-group {
+display: flex;
+flex-direction: column;
+}
+
+.form-group label {
+margin-bottom: 5px;
+font-weight: bold;
+color: white;
+text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685);
+}
+.form-group-1 {
+display: flex;
+}
+
+
+.submitbtn {
+display: flex;
+justify-content: space-between;
+}
+
+
+
+@keyframes fadeIn {
+from { opacity: 0; }
+to { opacity: 1; }
+}
+
+
+.form-container {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ /* border: 5px solid transparent; */
+ z-index: 999;
+ /* background-color: rgba(255, 255, 255, 0.9); */
+}
+
+
+.form-content {
+ position: relative;
+ cursor: move;
+ background: linear-gradient(135deg, #8ce3fd, #0059ce);
+ padding: 20px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ text-align: left;
+ border-radius: 9px;
+ width: 400px;
+ max-height: 90vh;
+ /* overflow-y: auto; */
+ color: #333;
+ /* border: 5px solid transparent; */
+ border-image-slice: 1;
+ animation: formAppear 0.5s ease-out;
+}
+
+.right-background{
+ font-family: 'Press Start 2P', cursive;
+}
+
+@keyframes formAppear {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+.sub {
+ margin-top: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+.sub h5 {
+ font-size: 27px;
+ color: #fffefe;
+ margin: 0;
+ font-family:Tahoma, Geneva, Verdana, sans-serif;
+ text-align: center;
+ text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87),2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81);
+}
+
+.close-button {
+ font-size: 30px;
+ color: #00fbff;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ position: relative;
+ bottom:16px;
+ left:6px
+}
+
+.close-button:hover {
+ transform: rotate(90deg) scale(1.2);
+}
+
+.wrapper {
+ /* background: linear-gradient(45deg, #f6d365, #fda085); */
+ /* border-radius: 15px; */
+ padding: 15px;
+ /* margin-bottom: 0px; */
+ max-width:400px;
+ width: 100%;
+
+ /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
+}
+
+.content {
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.outer {
+ height: 135px;
+ width: 135px;
+ overflow: hidden;
+}
+
+.emojis {
+ height: 500%;
+ display: flex;
+ flex-direction: column;
+}
+
+.emojis li {
+ height: 20%;
+ width: 100%;
+ list-style: none;
+ transition: all 0.3s ease;
+}
+
+.emojis li img {
+ height: 80%;
+ width: 80%;
+}
+
+#star-2:checked ~ .content .emojis .slideImg {
+ margin-top: -135px;
+}
+
+#star-3:checked ~ .content .emojis .slideImg {
+ margin-top: -270px;
+}
+
+#star-4:checked ~ .content .emojis .slideImg {
+ margin-top: -405px;
+}
+
+#star-5:checked ~ .content .emojis .slideImg {
+ margin-top: -540px;
+}
+
+.stars {
+ position: relative;
+ bottom: 5px;
+}
+
+.stars label {
+ font-size: 32px;
+ margin: 0 6px;
+ color: #ccc;
+ cursor: pointer;
+ transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.stars label:hover {
+ transform: scale(1.2) rotate(15deg);
+}
+
+#star-1:hover ~ .content .stars .star-1,
+#star-1:checked ~ .content .stars .star-1,
+#star-2:hover ~ .content .stars .star-1,
+#star-2:hover ~ .content .stars .star-2,
+#star-2:checked ~ .content .stars .star-1,
+#star-2:checked ~ .content .stars .star-2,
+#star-3:hover ~ .content .stars .star-1,
+#star-3:hover ~ .content .stars .star-2,
+#star-3:hover ~ .content .stars .star-3,
+#star-3:checked ~ .content .stars .star-1,
+#star-3:checked ~ .content .stars .star-2,
+#star-3:checked ~ .content .stars .star-3,
+#star-4:hover ~ .content .stars .star-1,
+#star-4:hover ~ .content .stars .star-2,
+#star-4:hover ~ .content .stars .star-3,
+#star-4:hover ~ .content .stars .star-4,
+#star-4:checked ~ .content .stars .star-1,
+#star-4:checked ~ .content .stars .star-2,
+#star-4:checked ~ .content .stars .star-3,
+#star-4:checked ~ .content .stars .star-4,
+#star-5:hover ~ .content .stars .star-1,
+#star-5:hover ~ .content .stars .star-2,
+#star-5:hover ~ .content .stars .star-3,
+#star-5:hover ~ .content .stars .star-4,
+#star-5:hover ~ .content .stars .star-5,
+#star-5:checked ~ .content .stars .star-1,
+#star-5:checked ~ .content .stars .star-2,
+#star-5:checked ~ .content .stars .star-3,
+#star-5:checked ~ .content .stars .star-4,
+#star-5:checked ~ .content .stars .star-5 {
+ color: gold;
+ text-shadow: 0 0 5px #ff8800;
+ animation: starPulse 0.5s infinite alternate;
+}
+
+@keyframes starPulse {
+ from {
+ transform: scale(1);
+ }
+ to {
+ transform: scale(1.1);
+ }
+}
+
+.footer {
+ /* border-top: 2px dashed #ff6b6b; */
+ /* background: linear-gradient(125deg, #ffecd2, #ffece5); */
+ width: 100%;
+ border-radius: 3px;
+ height: 40px;
+ padding: 0 15px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.footer span {
+ font-size: 18px;
+ font-weight: 600;
+ color: #eeeeee;
+ font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ text-shadow: 1px 1px 2px rgb(48, 158, 209), 0 0 1em rgb(7, 0, 109), 0 0 0.4em rgb(7, 0, 109);
+}
+
+input[type="radio"] {
+ display: none;
+}
+
+
+input[type="text"],
+input[type="email"] {
+ background-color: #fff;
+ border: 2px solid #0168ce;
+ border-radius: 10px;
+ color: #333;
+ padding: 10px;
+ width: 90%;
+ box-sizing: border-box;
+ font-size: 14px;
+ transition: all 0.3s ease;
+}
+textarea {
+ background-color: #fff;
+ border: 2px solid #0168ce;
+ border-radius: 10px;
+ color: #333;
+ padding: 10px;
+ width: 100%;
+ box-sizing: border-box;
+ font-size: 14px;
+ transition: all 0.3s ease;
+}
+
+textarea:focus,
+input[type="text"]:focus,
+input[type="email"]:focus {
+ border-color: #00438e;
+ outline: none;
+}
+.buttons {
+ /* background: linear-gradient(45deg, #4ecdc4, #45b7aa); */
+ background: linear-gradient(45deg, #cd4e4e, #fe165f);
+ color: #fff;
+ border: none;
+ padding: 10px 15px;
+ border-radius: 25px;
+ margin: 7px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: bold;
+ transition: all 0.3s ease;
+
+}
+
+.buttons:hover {
+ background: linear-gradient(135deg, #fe165f, #cd4e4e);
+ transform: scale(1.05);
+ box-shadow: 2px 2px 10px rgba(58, 242, 255, 0.5);
+}
+
+.main {
+ display: flex;
+ justify-content: space-between;
+}
+
+.main input {
+ width: 48%;
+}
+
+.submitbtn {
+ display: flex;
+ justify-content: center;
+ margin-top: 5px;
+}
+
+.button {
+ background: linear-gradient(45deg, #4ecdc4, #45b7aa);
+ color: #fff;
+ border: none;
+ padding: 10px 15px;
+ border-radius: 25px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: bold;
+ transition: all 0.3s ease;
+ font-family: "Comic Sans MS", cursive, sans-serif;
+}
+
+.button:hover {
+ background: linear-gradient(45deg, #45b7aa, #4ecdc4);
+ transform: scale(1.05);
+ box-shadow: 0 0 10px rgba(255, 58, 140, 0.5);
+}
+
+.footer .text::before {
+ content: "Rate Your Experience! 🚀";
+}
+
+.footer .numb::before {
+ content: "0 out of 5";
+}
+
+#star-1:checked ~ .footer .text::before {
+ content: "I just hate it 😣";
+}
+
+#star-1:checked ~ .footer .numb::before {
+ content: "1 out of 5";
+}
+
+#star-2:checked ~ .footer .text::before {
+ content: "I don't like it 😓";
+}
+
+#star-2:checked ~ .footer .numb::before {
+ content: "2 out of 5";
+}
+
+#star-3:checked ~ .footer .text::before {
+ content: "This is awesome 😄";
+}
+
+#star-3:checked ~ .footer .numb::before {
+ content: "3 out of 5";
+}
+
+#star-4:checked ~ .footer .text::before {
+ content: "I just like it 😃";
+}
+
+#star-4:checked ~ .footer .numb::before {
+ content: "4 out of 5";
+}
+
+#star-5:checked ~ .footer .text::before {
+ content: "I just love it ❤️";
+}
+
+#star-5:checked ~ .footer .numb::before {
+ content: "5 out of 5";
+}
+
+/* Styles for draggability */
+.form-container.dragging {
+ user-select: none;
+ cursor: grabbing;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+ .form-content {
+ width: 90%;
+ max-width: 350px;
+ }
+
+ .sub h5 {
+ font-size: 20px;
+ }
+
+ .stars label {
+ font-size: 28px;
+ }
+
+ .button {
+ font-size: 14px;
+ padding: 8px 12px;
+ }
+}
+
+.button1 {
+ display: block;
+ font-size: 0.7em;
+ padding: 12px;
+ height: 56.5px;
+ margin-top: 6.4px;
+}
+
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+@media (max-width: 768px) {
+ .whole-background {
+ position: absolute;
+ overflow: visible;
+ gap: 30px;
+ top: 25vh;
+ }
+ body {
+ overflow: visible !important;
+ }
+ .settings .form {
+ padding: 1rem 6rem;
+ margin: 4px 13rem;
+ left: 15%;
+ position: relative;
+ }
+ .settings {
+ top: -33px;
+ }
+}
+#copyright {
+ color: white;
+}
diff --git a/styles/licensing.css b/styles/licensing.css
index 101267d..fc2d9da 100644
--- a/styles/licensing.css
+++ b/styles/licensing.css
@@ -7,6 +7,166 @@ body {
overflow-x: hidden;
}
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(231, 181, 55, 0.979);
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 30px;
+ left: 30px;
+ width: 50px;
+ height: 50px;
+ background: radial-gradient(circle, #ff7920, #dd5900);
+ color: white;
+ text-align: center;
+ line-height: 50px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: none;
+ z-index: 1000;
+ transition: transform 0.3s ease, background-color 0.3s ease,
+ bottom 0.3s ease;
+}
+
+.scroll-to-top:hover {
+ background-color: #dd5900;
+ transform: scale(1.1);
+ bottom: 35px;
+}
+.scroll-to-top svg {
+ vertical-align: middle;
+ fill: white;
+ transition: transform 0.3s ease;
+ margin-bottom: 10px;
+}
+
+.scroll-to-top:hover svg {
+ transform: translateY(-5px);
+}
+
+.back-button {
+ display: inline-block;
+ padding: 6px 16px;
+ background-color: rgb(255, 120, 30);
+ color: white;
+ text-decoration: none;
+ font-size: 16px;
+ border-radius: 5px;
+ border: none;
+ transition: background-color 0.3s, transform 0.3s;
+}
+
+.back-button:hover {
+ background-color: rgb(236, 94, 0);
+ transform: scale(1.1);
+}
+
+.video-container {
+ width: 100%;
+ height: auto;
+ overflow: hidden;
+ text-align: center;
+}
+
+.video {
+ width: 100%;
+ height: auto;
+}
+
+.container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ box-sizing: border-box;
+}
+
+.header {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.title {
+ font-size: 2em;
+ margin-bottom: 20px;
+}
+
+.section {
+ margin-bottom: 20px;
+}
+
+.section-title {
+ font-size: 1.5em;
+ margin-bottom: 10px;
+}
+
+.section-content {
+ font-size: 1em;
+ line-height: 1.6;
+}
+
+pre {
+ padding: 10px;
+ border-radius: 5px;
+ overflow-x: auto;
+}
+
+@media (max-width: 768px) {
+ .title {
+ font-size: 1.5em;
+ }
+
+ .section-title {
+ font-size: 1.2em;
+ }
+
+ .section-content {
+ font-size: 0.9em;
+ }
+
+ .back-button {
+ font-size: 14px;
+ padding: 5px 14px;
+ }
+
+ .container {
+ padding: 11px;
+ max-width: 100vw;
+ }
+}
+
.container {
max-width: 80%;
margin: 50px auto;
diff --git a/styles/privacypolicy.css b/styles/privacypolicy.css
index faa6d83..08345de 100644
--- a/styles/privacypolicy.css
+++ b/styles/privacypolicy.css
@@ -9,6 +9,96 @@ body {
min-height: 100vh;
}
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+::-webkit-scrollbar-thumb {
+ background-color: rgba(231, 181, 55, 0.979);
+ border-radius: 15px;
+}
+::-webkit-scrollbar-track {
+ background-color: black;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 30px;
+ left: 30px;
+ width: 50px;
+ height: 50px;
+ background: radial-gradient(circle, #ff7920, #dd5900);
+ color: white;
+ text-align: center;
+ line-height: 50px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: none;
+ z-index: 1000;
+ transition: transform 0.3s ease, background-color 0.3s ease,
+ bottom 0.3s ease;
+}
+
+.scroll-to-top:hover {
+ background-color: #dd5900;
+ transform: scale(1.1);
+ bottom: 35px;
+}
+
+.scroll-to-top svg {
+ vertical-align: middle;
+ fill: white;
+ transition: transform 0.3s ease;
+ margin-bottom: 10px;
+}
+
+.scroll-to-top:hover svg {
+ transform: translateY(-5px);
+}
+
+.back-button {
+ display: inline-block;
+ padding: 6px 16px;
+ background-color: rgb(255, 120, 30);
+ color: white;
+ text-decoration: none;
+ font-size: 16px;
+ border-radius: 5px;
+ border: none;
+ transition: background-color 0.3s, transform 0.3s;
+}
+
+.back-button:hover {
+ background-color: rgb(236, 94, 0);
+ transform: scale(1.1);
+}
+
.container {
max-width: 800px;
margin: 2rem auto;
diff --git a/styles/termsofservice.css b/styles/termsofservice.css
index 184d026..d1b2c26 100644
--- a/styles/termsofservice.css
+++ b/styles/termsofservice.css
@@ -10,6 +10,92 @@ body {
}
+.circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+}
+::-webkit-scrollbar-thumb {
+ background-color: rgba(231, 181, 55, 0.979);
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .circle-container {
+ display: none;
+ }
+}
+
+.scroll-to-top {
+ position: fixed;
+ bottom: 30px;
+ left: 30px;
+ width: 50px;
+ height: 50px;
+ background: radial-gradient(circle, #ff7920, #dd5900);
+ color: white;
+ text-align: center;
+ line-height: 50px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: none;
+ z-index: 1000;
+ transition: transform 0.3s ease, background-color 0.3s ease,
+ bottom 0.3s ease;
+}
+
+.scroll-to-top:hover {
+ background-color: #dd5900;
+ transform: scale(1.1);
+ bottom: 35px;
+}
+.scroll-to-top svg {
+ vertical-align: middle;
+ fill: white;
+ transition: transform 0.3s ease;
+ margin-bottom: 10px;
+}
+
+.scroll-to-top:hover svg {
+ transform: translateY(-5px);
+}
+
+.back-button {
+ display: inline-block;
+ padding: 6px 16px;
+ background-color: rgb(255, 120, 30);
+ color: white;
+ text-decoration: none;
+ font-size: 16px;
+ border-radius: 5px;
+ border: none;
+ transition: background-color 0.3s, transform 0.3s;
+}
+
+.back-button:hover {
+ background-color: rgb(236, 94, 0);
+ transform: scale(1.1);
+}
+
.container {
max-width: 900px;
margin: 2rem auto;