From 36d3aa9f1cd4f9e5b3a8d9116c5625ab4b876d3f Mon Sep 17 00:00:00 2001 From: Pavan507-STAR Date: Wed, 23 Oct 2024 11:58:56 +0530 Subject: [PATCH 1/2] Fixed navbar in mobile --- src/css/style.css | 950 +++++------------------------------------- src/css/style.min.css | 78 +++- src/index.html | 44 +- src/js/app.js | 9 + 4 files changed, 205 insertions(+), 876 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 7f7bfa0..ea5404b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -2,17 +2,11 @@ :root { --bg-light: #fefdf8; - /* Light background color */ --text-light: #1c1c1c; - /* Text color */ --accent-light: #50da4c; - /* Green accent color */ --bg-dark: #183717; - /* Dark green background color */ --text-dark: #fefdf8; - /* Light text color for dark mode */ --accent-dark: #ff8bff; - /* Pink accent color for dark mode */ --bg-halloween: #1c1c1c; --text-halloween: #f9a825; --accent-halloween: #d32f2f; @@ -22,7 +16,6 @@ box-sizing: border-box; margin: 0; padding: 0; - /* scrollbar styles */ scrollbar-width: thin; scrollbar-color: #555 #1c1c1c; cursor: url('../img/icons8-ghost-16.webp'), pointer; @@ -35,176 +28,121 @@ body { line-height: 1.6; transition: background-color 0.3s, color 0.3s, background-image 0.3s; background-image: url('../img/bgm.webp'); - /* Background image for light mode */ background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow-x: hidden; - background-color: #121212; - color: #ffffff; } body.dark-mode { background-color: var(--bg-dark); color: var(--text-dark); background-image: url('../img/dark.webp'); - /* Background image for dark mode */ } body.halloween-mode { background-color: var(--bg-halloween); color: var(--text-halloween); - background-image: url('../img/halloween-bg.webp'); /* Add a spooky background */ -} - -.halloween-mode button { - background-color: var(--accent-halloween); - color: white; -} - -.halloween-mode header { - background-color: rgba(255, 165, 0, 0.8); /* Halloween orange */ + background-image: url('../img/halloween-bg.webp'); } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; - width: 100%; } header { display: flex; - justify-content: center; + justify-content: space-between; align-items: center; padding: 1rem 2rem; background-color: rgba(255, 165, 0, 0.8); position: sticky; top: 0; z-index: 1000; + position: relative; } -.header-title { - font-size: 2.5rem; - font-weight: 600; - text-align: center; - margin: 0; +.header-left { + display: flex; + align-items: center; } .header-controls { - margin-left: auto; display: flex; align-items: center; - gap: 1.5rem; - padding-right: 1rem; } -.surprise-btn { - margin-right: 0.5rem; +#navToggle { + display: none; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + position: absolute; + right: 1rem; + top: 1rem; + padding: 0.5rem; +} + +.header-title { + font-size: 2.5rem; + font-weight: 600; + color: var(--accent-light); + transition: color 0.3s; } -#toggleButton { - margin-right: 1rem; +.header-title:hover { + cursor: pointer; } .search-container { display: flex; align-items: center; - background-color: rgba(80, 218, 76, 0.1); - /* Light green for search */ + background: rgba(80, 218, 76, 0.1); border-radius: 30px; padding: 0.4rem 1rem; transition: all 0.3s ease; width: 100%; max-width: 500px; margin: 1rem 0; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - background: rgba(255, 255, 255, 0.267); backdrop-filter: blur(4.5px); - -webkit-backdrop-filter: blur(4.5px); } -.main-search-container { - display: flex; - gap: 5px; - width: 100%; - align-items: center; - justify-content: center; -} - -.total-contributors { - color: black; - font-size: 1.2rem; -} - -.dark-mode .search-container { - background-color: rgba(255, 139, 255, 0.1); - /* Light pink for dark mode */ - box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1); -} - -#searchInput { +.search-container input { border: none; background: transparent; padding: 0.4rem; font-size: 1rem; - color: var(--text-light); width: 100%; outline: none; + color: var(--text-light); } -.dark-mode #searchInput { - color: var(--text-dark); -} - -#searchInput::placeholder { - color: #f500f5; - /* Placeholder color in pink */ - opacity: 0.7; -} - -.dark-mode #searchInput::placeholder { - color: #c401c4; - /* Dark mode placeholder color */ -} - -#searchButton { +.search-container button { background: none; border: none; cursor: pointer; - color: var(--accent-light); font-size: 1.2rem; + color: var(--accent-light); transition: transform 0.3s ease, color 0.3s ease; } -#searchButton:hover { +.search-container button:hover { transform: scale(1.1); color: var(--text-light); } -.dark-mode #searchButton { - color: var(--accent-dark); -} - -.dark-mode #searchButton:hover { - color: #fff; -} - +/* Main Elements */ h1 { font-size: 2.5rem; font-weight: 600; color: var(--accent-light); - /* Green for heading */ text-align: center; margin-bottom: 1rem; } -.dark-mode h1 { - color: var(--accent-dark); - /* Pink for dark mode heading */ -} - -/* infinite carousel animation styles */ .carousel { background-color: #1c1c1c; padding: 0.5rem; @@ -212,40 +150,12 @@ h1 { white-space: nowrap; } -.carousel-slide { - display: inline-block; - color: white; - font-size: 1.2rem; - font-family: monospace; - animation: 20s carousel infinite linear; -} - -.carousel:hover .carousel-slide { - animation-play-state: paused; -} - -@keyframes carousel { - from { - transform: translateX(100vw); - } - - to { - transform: translateX(-90vw); - } -} - -/* Styling for the Wall Section */ +/* Wall Section */ .wall-section { padding: 2rem; - background-color: #f4f4f9; - border-radius: 15px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.45); - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); } .wall-section h2 { @@ -255,344 +165,7 @@ h1 { color: rgb(107, 107, 107); } -/* Search Bar Styling */ -.search-container { - display: flex; - justify-content: center; - margin-bottom: 1.5rem; -} - -.search-container input { - padding: 0.75rem; - width: 300px; - border: 2px solid #ddd; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.3s ease-in-out; -} - -.search-container input:focus { - border-color: #888; - outline: none; -} - -.search-container button { - background-color: #ff5722; - color: white; - border: none; - padding: 0.75rem 1rem; - border-radius: 8px; - margin-left: 0.5rem; - cursor: pointer; - font-size: 1.2rem; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.3s ease-in-out; -} - -.search-container button:hover { - background-color: #e64a19; -} - -.search-container button i { - margin-right: 0.3rem; -} - -/* Wall of Participants */ -.wall { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1.5rem; - padding: 0 2rem; -} - -/* Participant Card Styling with Glowing Borders */ -.participant { - background-image: url('../img/brick_wall.webp'); - background-size: cover; - background-repeat: no-repeat; - color: white; - padding: 1.5rem; - border-radius: 10px; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; - font-family: 'Sedgwick Ave', cursive; - font-weight: 400; - font-style: normal; - position: relative; - cursor: pointer; - transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s ease-in-out; - border: 2px solid transparent; - /* Add a transparent border initially */ - /*Add text-outline*/ - text-shadow: 2px 5px 2px rgb(0, 0, 0); -} - -.participant::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 10px; - background-color: rgba(255, 255, 255, 0.1); - /* Subtle inner glow */ - opacity: 0; - transition: opacity 0.3s; -} - -.participant:hover::before { - opacity: 1; -} - -.participant:hover { - transform: translateY(-10px) scale(1.05); - /* Add a glowing border effect */ - border-color: rgba(255, 255, 255, 0.6); - box-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.4), - 0 0 30px rgba(66, 205, 47, 0.6); -} - -.wall-section .wall .participant { - opacity: 0; - animation: fadeIn 0.5s forwards; - animation-timing-function: ease-out; -} - -/* Animation for fadeIn */ -@keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(10px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.wall-section .wall .participant { - opacity: 0; - animation: fadeIn 0.5s forwards; - animation-timing-function: ease-out; -} - -@keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(10px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -footer { - text-align: center; - padding: 1rem 0; - margin-top: 2rem; - font-size: 0.9rem; -} - -footer a { - color: var(--accent-light); - text-decoration: none; - transition: color 0.3s; -} - -.dark-mode footer a { - color: var(--accent-dark); -} - -footer a:hover { - text-decoration: underline; -} - -.toggle-btn { - font-size: 1.5rem; - background: none; - border: none; - cursor: pointer; - transition: transform 0.3s; -} - -.toggle-btn:hover { - transform: scale(1.1); -} - -.toggle-btn i { - font-size: 1.5rem; - color: var(--accent-light); - transition: color 0.3s; -} - -.dark-mode .toggle-btn i { - color: white; -} - -.surprise-btn { - background-color: var(--accent-light); - color: white; - border: none; - padding: 0.5rem 1rem; - border-radius: 20px; - cursor: pointer; - font-size: 0.9rem; - transition: all 0.3s ease; - margin-top: 0.5rem; - margin-right: 0; -} - -.dark-mode .surprise-btn { - background-color: var(--accent-dark); -} - -.contact-btn { - background-color: var(--accent-light); - color: white; - border: none; - padding: 0.5rem 1rem; - border-radius: 20px; - cursor: pointer; - font-size: 0.9rem; - transition: all 0.3s ease; - margin-top: 0.5rem; - margin-right: 0; -} - -.dark-mode .contact-btn { - background-color: var(--accent-dark); -} - -.contact-btn > a { - text-decoration: none; - color: white; -} - -.header-title { - color: inherit; - text-decoration: none; - font-size: 2.5rem; - font-weight: 400; - font-family: DynaPuff; - color: var(--accent-light); - transition: color 0.3s; -} - -.header-title:hover { - cursor: pointer; -} - -.dark-mode .header-title { - color: var(--accent-dark); -} - -#halloweenIcon { - color: white; - display: none; - transition: opacity 1s; - margin-left: 2px; - font-size: 2.5rem; -} - -#loading-screen { - position: fixed; - width: 100%; - height: 100%; - backdrop-filter: blur(10px); - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - z-index: 9999; -} - -#spinner { - width: 100px; - height: 100px; - border: 12px solid #c401c4; - /* Deep Pink for spinner */ - border-top: 12px solid #ff8bff; - /* Pink for spinner */ - border-radius: 50%; - animation: spin 1s linear infinite; -} - -#loading-text { - font-weight: bold; - margin-top: 1rem; -} - -/* Back to Top Button Styles */ -#backToTopBtn { - position: fixed; - bottom: 40px; - right: 40px; - background-color: var(--accent-light); - /* Green accent in light mode */ - color: var(--text-light); - border: none; - border-radius: 50px; - padding: 15px 25px; - font-size: 2rem; - cursor: pointer; - display: none; - /* Hidden by default */ - z-index: 1000; - transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); -} - -#backToTopBtn:hover { - background-color: var(--bg-dark); - /* Dark green on hover */ - color: var(--text-dark); - /* Light text on hover */ - transform: scale(1.1); - /* Button enlarges slightly */ -} - -/* Dark mode styles */ -body.dark-mode #backToTopBtn { - background-color: var(--accent-dark); - /* Pink accent in dark mode */ - color: var(--text-dark); -} - -body.dark-mode #backToTopBtn:hover { - background-color: var(--bg-light); - /* Light background on hover */ - color: var(--text-light); - /* Dark text on hover */ -} - -/* Feedback Button style */ - -.feebback-Btn { - background-color: var(--accent-light); - color: var(--text-light); - border: none; - padding: 10px 20px; - margin-top: 10px; - border-radius: 5px; - cursor: pointer; -} - -body.dark-mode .feebback-Btn { - background-color: var(--accent-dark); - color: var(--text-dark); -} - /* Modal */ - .modal { position: fixed; top: 0; @@ -616,48 +189,27 @@ body.dark-mode .feebback-Btn { overflow: auto; padding: 1rem 2rem; border-radius: 10px; - position: relative; background-color: var(--accent-light); - color: #fff; } .modal-dark-mode { background-color: var(--accent-dark); } -.close-modal-button { - position: absolute; - top: 10px; - right: 10px; - font-size: 20px; - color: #fff; -} - -.hidden { - display: none; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(720deg); - } -} - +/* Responsive Styles */ @media (max-width: 1024px) { .container { padding: 1.5rem; } +} - h1 { - font-size: 2.2rem; +@media (max-width: 768px) { + .container { + padding: 1rem; } - .wall { - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + .header-title { + font-size: 2rem; } .search-container { @@ -665,51 +217,47 @@ body.dark-mode .feebback-Btn { margin: 1rem auto; } - .participant { - font-size: 1rem; + .wall { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } - .carousel-slide { + footer { font-size: 0.8rem; } -} - -@media (max-width: 768px) { - .container { - padding: 1rem; - } - h1 { - font-size: 2rem; + #navToggle { + display: block; /* Ensure the button is displayed */ + color: #fff; /* Set icon color for visibility */ + z-index: 1001; /* Ensure the button is on top of other elements */ } .header-controls { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background-color: rgba(255, 165, 0, 0.9); flex-direction: column; - align-items: flex-end; + padding: 1rem; + z-index: 1000; } - .main-search-container { + .header-controls.show { + display: flex; flex-direction: column; + position: absolute; + top: 100%; + right: 0; + background: #fff; + padding: 1rem; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); } - .search-sort-container { - flex-direction: column-reverse; - } - - .wall { - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - } - - .modal-wrapper { - max-width: 300px; - } - - footer { - font-size: 0.8rem; - } - - .participant { - font-size: 0.8rem; + .header-controls button { + margin: 0.5rem 0; + width: 100%; + text-align: left; } } @@ -719,126 +267,35 @@ body.dark-mode .feebback-Btn { text-align: center; } - .header-controls { - width: 100%; - flex-direction: column; - align-items: center; - gap: 0.5rem; - } - - .search-container { - height: 40px; - } - .wall { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } } -/* Sort Container */ -.search-sort-container { - display: flex; - justify-content: center; - align-items: center; - gap: 1.5rem; /* Increased gap for better spacing */ - padding: 10px; /* Added padding for better touch targets */ - border-radius: 8px; /* Rounded corners for a softer look */ -} - -.sort-container { - margin: 15px 0; /* Increased margin for better separation */ -} - -.sort-select { - padding: 8px; /* Increased padding for comfort */ - font-size: 16px; - border: 1px solid #ccc; /* Slightly lighter border */ - outline: none; - border-radius: 5px; - cursor: pointer; - transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition effects */ -} - -.sort-select:hover { - border-color: #888; /* Darker border on hover */ - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */ -} - -.sort-select:focus { - border-color: #0056b3; /* Highlight border on focus */ - box-shadow: 0 0 5px rgba(0, 86, 179, 0.5); /* Focus shadow effect */ -} - -.contributors-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - gap: 40px; - align-items: center; -} - -@media screen and (max-width: 1024px) { - .contributors-container h4 { - font-size: 20px; - } -} - -.contributors-card { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; +/* Back to Top Button Styles */ +#backToTopBtn { + position: fixed; + bottom: 40px; + right: 40px; + background-color: var(--accent-light); + color: var(--text-light); border: none; - width: 300px; - height: 150px; -} - -.contributors-avatar-container { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - gap: 1rem; -} - -.contributors-avatar { - width: 50px; - height: 50px; - border-radius: 50%; - object-fit: cover; -} - -.contributors-contributions { - font-weight: 600; - font-size: 22px; -} - -.contributors-link { - text-decoration: none; - color: #fff; - font-weight: 600; - font-size: 18px; - transition: color 0.3s; -} - -.contributors-section { - background: rgba(255, 255, 255, 0.45); - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); - backdrop-filter: blur(4px); - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.18); - padding: 32px; - margin-top: 4rem; + border-radius: 50px; + padding: 15px 25px; + font-size: 2rem; + cursor: pointer; + display: none; /* Hidden by default */ + z-index: 1000; + transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s; } -.contributors-section h2 { - text-align: center; - font-size: 2rem; - margin-bottom: 1.5rem; - color: rgb(107, 107, 107); +#backToTopBtn:hover { + background-color: var(--bg-dark); + color: var(--text-dark); + transform: scale(1.1); } +/* Additional Button Styles */ button { background-color: #007bff; color: #ffffff; @@ -854,66 +311,6 @@ button:focus { outline: 2px solid #ffffff; } -a:focus { - outline: 2px solid #ffffff; -} - -#loading-screen { - background-color: #333333; - color: #ffffff; -} - -/* Flying Ghost Animation */ -#flyingGhost { - display: block; /* Ensure the image is displayed */ - width: 100px; /* Adjust size as needed */ - position: fixed; /* Allows for movement */ - top: 20%; - right: -150px; /* Start off-screen */ - transition: right 3s ease-in-out; /* Optional for smooth appearance */ -} - -@keyframes ghostFly { - 0% { - right: -150px; - } - - 50% { - right: 50%; - } - - 100% { - right: 100%; - } -} - -/* Keyframes for mascot movement */ -#mascotContainer { - display: none; - position: fixed; - bottom: 50px; - left: -150px; - width: 150px; - height: auto; - z-index: 9999; - animation: mascotMove 5s linear forwards; - animation-play-state: running; -} - -@keyframes mascotMove { - 0% { - left: -150px; - } - - 50% { - left: 50%; - } - - 100% { - left: 110%; - } -} - /* Cookies */ #cookies-container { position: fixed; @@ -923,43 +320,20 @@ a:focus { z-index: 9999; } -#cookies-sub-container { - background-color: #fff; - padding: 20px; - border-radius: 5px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); - color: #000; -} - .cookies { display: flex; flex-direction: row; align-items: center; - margin-bottom: 10px; text-align: center; gap: 2rem; } -@media screen and (max-width: 480px) { - .cookies { - flex-direction: column; - } -} - .cookies-text { - margin-right: 10px; font-size: 14px; line-height: 1.5; - text-align: left; font-weight: bold; } -.cookies-buttons { - display: flex; - justify-content: flex-end; - margin-top: 10px; -} - .cookies-btn { color: #fff; border: none; @@ -971,10 +345,6 @@ a:focus { transition: transform 0.3s ease-in-out; } -.cookies-btn:hover { - transform: scale(1.1); -} - .accept-cookies { background-color: #13c825; } @@ -991,142 +361,14 @@ a:focus { background-color: #b81e1e; } -.pumpkin { - height: 18px; - width: 18px; - justify-content: center; - justify-items: center; - cursor: pointer; - transition: 0.3s; -} - -.pumpkin:hover { - transform: scale(1.05); -} +/* Other Elements (you can add further styles or adjust as needed) */ -.popup { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top of the page */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */ - justify-content: center; - align-items: center; -} - -/* Popup content (image) */ -.popup-content { - margin: auto; - display: block; - width: 100%; - max-width: 800px; - animation: spin 3s linear infinite; -} - -/* Close button */ -.close-btn { - position: absolute; - top: 60px; - right: 35px; - color: #fff; - font-size: 80px; - font-weight: bold; - cursor: pointer; -} - -.close-btn:hover, -.close-btn:focus { - color: #bbb; -} - -/* Caption for the popup image */ -#caption { - text-align: center; - color: #ccc; - font-size: 50px; - padding: 10px 0; - font-family: 'Creepster', system-ui; - font-style: normal; - font-weight: 400; - text-shadow: 2px 2px 4px orange; -} - -.about-us-btn{ - background-color: var(--accent-light); - color: #fff; - border: none; - padding: .5rem 1rem; - border-radius: 20px; - cursor: pointer; - font-size: .9rem; - transition: .3s; - margin-top: .5rem; - margin-right: 0; -} -.about-us-btn>a { - color: #fff; - text-decoration: none; -} - -.about-us-btn:hover, -.about-us-btn:focus { - background-color: #0056b3; - outline: 2px solid #ffffff; -} - -.about-us { - padding: 20px; - text-align: center; -} - -.about-us { - background-color: transparent; /* Transparent background */ - padding: 2rem; -} - -.about-us { - background-color: transparent; - padding: 2rem; -} - -.owners { - display: flex; - justify-content: space-between; /* Space between the owner cards */ - flex-wrap: wrap; /* Wrap the items if the screen is too small */ -} - -.owner-card { - display: flex; - flex-direction: column; /* Stack image on top of the text */ - align-items: center; - background-color: transparent; /* Transparent background */ - border: 1px solid #ccc; - border-radius: 10px; - padding: 1rem; - width: 48%; /* Adjust the width to make the cards fit side by side */ - margin-bottom: 1rem; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for some depth */ - text-align: center; /* Center the content inside */ -} - -.owner-card img.profile-picture { - width: 100px; - height: 100px; - border-radius: 50%; - object-fit: cover; - margin-bottom: 1rem; -} - -.owner-card .owner-info { - padding: 0.5rem; -} - - -@media (min-width: 600px) { - .owners { - flex-direction: row; +/* Keyframes */ +@keyframes spin { + 0% { + transform: rotate(0deg); } -} \ No newline at end of file + 100% { + transform: rotate(720deg); + } +} diff --git a/src/css/style.min.css b/src/css/style.min.css index 799622d..755a432 100644 --- a/src/css/style.min.css +++ b/src/css/style.min.css @@ -1 +1,77 @@ -@import url(https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap);#searchInput,body{color:var(--text-light)}.dark-mode #searchInput,body.dark-mode{color:var(--text-dark)}#searchButton,h1{color:var(--accent-light)}#loading-screen,.modal,.participant::before{width:100%;height:100%}.cookies,.header-title,.participant,footer,h1{text-align:center}.about-us-btn>a,.contact-btn>a,.contributors-link,.header-title,footer a{text-decoration:none}:root{--bg-light:#fefdf8;--text-light:#1c1c1c;--accent-light:#50da4c;--bg-dark:#183717;--text-dark:#fefdf8;--accent-dark:#ff8bff;--bg-halloween:#1c1c1c;--text-halloween:#f9a825;--accent-halloween:#d32f2f}*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:#555 #1c1c1c;cursor:url('../img/icons8-ghost-16.webp'),pointer}body{font-family:Poppins,sans-serif;background-color:var(--bg-light);line-height:1.6;transition:background-color .3s,color .3s,background-image .3s;background-image:url('../img/bgm.webp');background-repeat:no-repeat;background-attachment:fixed;background-size:cover;overflow-x:hidden;background-color:#121212;color:#fff}body.dark-mode{background-color:var(--bg-dark);background-image:url('../img/dark.webp')}body.halloween-mode{background-color:var(--bg-halloween);color:var(--text-halloween);background-image:url('../img/halloween-bg.webp')}.halloween-mode button{background-color:var(--accent-halloween);color:#fff}.halloween-mode header,header{background-color:rgba(255,165,0,.8)}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%}header{display:flex;justify-content:center;align-items:center;padding:1rem 2rem;position:sticky;top:0;z-index:1000}.header-title{margin:0}.header-controls{margin-left:auto;display:flex;align-items:center;gap:1.5rem;padding-right:1rem}#toggleButton{margin-right:1rem}.search-container{display:flex;align-items:center;border-radius:30px;padding:.4rem 1rem;transition:.3s;width:100%;max-width:500px;margin:1rem 0;box-shadow:0 4px 10px rgba(0,0,0,.1);background:rgba(255,255,255,.267);backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px)}#searchButton,#searchInput{background:0 0;border:none}.carousel,.owner-card .owner-info{padding:.5rem}.main-search-container{display:flex;gap:5px;width:100%;align-items:center;justify-content:center}.total-contributors{color:#000;font-size:1.2rem}.dark-mode .search-container{background-color:rgba(255,139,255,.1);box-shadow:0 4px 10px rgba(255,255,255,.1)}#searchInput{padding:.4rem;font-size:1rem;width:100%;outline:0}#searchInput::placeholder{color:#f500f5;opacity:.7}.dark-mode #searchInput::placeholder{color:#c401c4}#searchButton{cursor:pointer;font-size:1.2rem;transition:transform .3s,color .3s}#searchButton:hover{transform:scale(1.1);color:var(--text-light)}.dark-mode #searchButton,.dark-mode .header-title,.dark-mode footer a,.dark-mode h1{color:var(--accent-dark)}.dark-mode #searchButton:hover,.dark-mode .toggle-btn i{color:#fff}h1{font-size:2.5rem;font-weight:600;margin-bottom:1rem}.carousel{background-color:#1c1c1c;overflow:hidden;white-space:nowrap}.carousel-slide{display:inline-block;color:#fff;font-size:1.2rem;font-family:monospace;animation:20s linear infinite carousel}.carousel:hover .carousel-slide{animation-play-state:paused}@keyframes carousel{from{transform:translateX(100vw)}to{transform:translateX(-90vw)}}.wall-section{padding:2rem;background-color:#f4f4f9;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);background:rgba(255,255,255,.45);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18)}.contributors-section h2,.wall-section h2{text-align:center;font-size:2rem;margin-bottom:1.5rem;color:#6b6b6b}.search-container{display:flex;justify-content:center;margin-bottom:1.5rem}.participant,.search-container button{color:#fff;align-items:center;cursor:pointer}.search-container input{padding:.75rem;width:300px;border:2px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .3s ease-in-out}.search-container input:focus{border-color:#888;outline:0}.search-container button{background-color:#ff5722;border:none;padding:.75rem 1rem;border-radius:8px;margin-left:.5rem;font-size:1.2rem;display:flex;justify-content:center;transition:background-color .3s ease-in-out}.participant,.toggle-btn,.toggle-btn i{font-size:1.5rem}.toggle-btn i,footer a{color:var(--accent-light);transition:color .3s}.search-container button:hover{background-color:#e64a19}.search-container button i{margin-right:.3rem}.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;padding:0 2rem}.participant{background-image:url('../img/brick_wall.webp');background-size:cover;background-repeat:no-repeat;padding:1.5rem;border-radius:10px;display:flex;justify-content:center;font-family:'Sedgwick Ave',cursive;font-weight:400;font-style:normal;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s ease-in-out;border:2px solid transparent;text-shadow:2px 5px 2px #000}#loading-screen,.modal{position:fixed;display:flex}.participant::before{content:'';position:absolute;top:0;left:0;border-radius:10px;background-color:rgba(255,255,255,.1);opacity:0;transition:opacity .3s}.participant:hover::before{opacity:1}.participant:hover{transform:translateY(-10px) scale(1.05);border-color:rgba(255,255,255,.6);box-shadow:0 0 5px rgba(255,255,255,.5),0 0 5px rgba(255,255,255,.4),0 0 30px rgba(66,205,47,.6)}#backToTopBtn:hover,.cookies-btn:hover,.toggle-btn:hover{transform:scale(1.1)}.wall-section .wall .participant{opacity:0;animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}footer{padding:1rem 0;margin-top:2rem;font-size:.9rem}footer a:hover{text-decoration:underline}.toggle-btn{background:0 0;border:none;cursor:pointer;transition:transform .3s}.about-us-btn,.contact-btn,.surprise-btn{background-color:var(--accent-light);color:#fff;border:none;padding:.5rem 1rem;border-radius:20px;cursor:pointer;font-size:.9rem;transition:.3s;margin-top:.5rem;margin-right:0}.dark-mode .contact-btn,.dark-mode .surprise-btn,.modal-dark-mode{background-color:var(--accent-dark)}.contact-btn>a{color:#fff}.header-title{color:inherit;font-size:2.5rem;font-weight:400;font-family:DynaPuff;color:var(--accent-light);transition:color .3s}.header-title:hover{cursor:pointer}#halloweenIcon{color:#fff;display:none;transition:opacity 1s;margin-left:2px;font-size:2.5rem}#loading-screen{backdrop-filter:blur(10px);align-items:center;justify-content:center;flex-direction:column;z-index:9999;background-color:#333;color:#fff}#backToTopBtn,.feebback-Btn{background-color:var(--accent-light);cursor:pointer}#spinner{width:100px;height:100px;border:12px solid #c401c4;border-top:12px solid #ff8bff;border-radius:50%;animation:1s linear infinite spin}#loading-text{font-weight:700;margin-top:1rem}#backToTopBtn{position:fixed;bottom:40px;right:40px;color:var(--text-light);border:none;border-radius:50px;padding:15px 25px;font-size:2rem;display:none;z-index:1000;transition:background-color .3s,color .3s,transform .3s;box-shadow:0 4px 12px rgba(0,0,0,.1)}#backToTopBtn:hover{background-color:var(--bg-dark);color:var(--text-dark)}body.dark-mode #backToTopBtn,body.dark-mode .feebback-Btn{background-color:var(--accent-dark);color:var(--text-dark)}body.dark-mode #backToTopBtn:hover{background-color:var(--bg-light);color:var(--text-light)}.feebback-Btn{color:var(--text-light);border:none;padding:10px 20px;margin-top:10px;border-radius:5px}.modal{top:0;left:0;background-color:rgba(0,0,0,.5);justify-content:center;align-items:center;z-index:10}.modal-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;max-width:630px;overflow:auto;padding:1rem 2rem;border-radius:10px;position:relative;background-color:var(--accent-light);color:#fff}.close-modal-button{position:absolute;top:10px;right:10px;font-size:20px;color:#fff}.hidden{display:none}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(720deg)}}@media (max-width:1024px){.container{padding:1.5rem}h1{font-size:2.2rem}.wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.search-container{max-width:100%;margin:1rem auto}.participant{font-size:1rem}.carousel-slide{font-size:.8rem}}@media (max-width:768px){.container{padding:1rem}h1{font-size:2rem}.header-controls{flex-direction:column;align-items:flex-end}.main-search-container{flex-direction:column}.search-sort-container{flex-direction:column-reverse}.wall{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.modal-wrapper{max-width:300px}.participant,footer{font-size:.8rem}}@media (max-width:480px){header{flex-direction:column;text-align:center}.header-controls{width:100%;flex-direction:column;align-items:center;gap:.5rem}.search-container{height:40px}.wall{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}.search-sort-container{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:10px;border-radius:8px}.sort-container{margin:15px 0}.cookies-btn,.cookies-text{margin-right:10px;font-weight:700}.sort-select{padding:8px;font-size:16px;border:1px solid #ccc;outline:0;border-radius:5px;cursor:pointer;transition:border-color .3s,box-shadow .3s}.sort-select:hover{border-color:#888;box-shadow:0 0 5px rgba(0,0,0,.2)}.sort-select:focus{border-color:#0056b3;box-shadow:0 0 5px rgba(0,86,179,.5)}.contributors-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:40px;align-items:center}@media screen and (max-width:1024px){.contributors-container h4{font-size:20px}}.contributors-card{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;width:300px;height:150px}.contributors-avatar-container{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:1rem}.contributors-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover}.contributors-contributions{font-weight:600;font-size:22px}.contributors-link{color:#fff;font-weight:600;font-size:18px;transition:color .3s}.contributors-section{background:rgba(255,255,255,.45);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);border-radius:10px;border:1px solid rgba(255,255,255,.18);padding:32px;margin-top:4rem}.cookies-btn,button{padding:10px;cursor:pointer;color:#fff}button{background-color:#007bff;border:none;border-radius:5px}.about-us-btn:focus,.about-us-btn:hover,button:focus,button:hover{background-color:#0056b3;outline:#ffffff solid 2px}a:focus{outline:#ffffff solid 2px}#flyingGhost{display:block;width:100px;position:fixed;top:20%;right:-150px;transition:right 3s ease-in-out}@keyframes ghostFly{0%{right:-150px}50%{right:50%}100%{right:100%}}#mascotContainer{display:none;position:fixed;bottom:50px;left:-150px;width:150px;height:auto;z-index:9999;animation:5s linear forwards mascotMove}@keyframes mascotMove{0%{left:-150px}50%{left:50%}100%{left:110%}}#cookies-container{position:fixed;bottom:0;left:0;right:0;z-index:9999}#cookies-sub-container{background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.2);color:#000}.cookies{display:flex;flex-direction:row;align-items:center;margin-bottom:10px;gap:2rem}@media screen and (max-width:480px){.cookies{flex-direction:column}}.cookies-text{font-size:14px;line-height:1.5;text-align:left}.cookies-buttons{display:flex;justify-content:flex-end;margin-top:10px}.cookies-btn{border:none;border-radius:5px;transition:transform .3s ease-in-out}.accept-cookies{background-color:#13c825}.accept-cookies:hover{background-color:#0ca01c}.decline-cookies{background-color:#df2424}.decline-cookies:hover{background-color:#b81e1e}.pumpkin{height:18px;width:18px;justify-content:center;justify-items:center;cursor:pointer;transition:.3s}.pumpkin:hover{transform:scale(1.05)}.popup{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);justify-content:center;align-items:center}.about-us,.owner-card{background-color:transparent;text-align:center}.popup-content{margin:auto;display:block;width:100%;max-width:800px;animation:3s linear infinite spin}.close-btn{position:absolute;top:60px;right:35px;color:#fff;font-size:80px;font-weight:700;cursor:pointer}.close-btn:focus,.close-btn:hover{color:#bbb}#caption{text-align:center;color:#ccc;font-size:50px;padding:10px 0;font-family:Creepster,system-ui;font-style:normal;font-weight:400;text-shadow:2px 2px 4px orange}.about-us-btn>a{color:#fff}.about-us{padding:2rem}.owners{display:flex;justify-content:space-between;flex-wrap:wrap}.owner-card{display:flex;flex-direction:column;align-items:center;border:1px solid #ccc;border-radius:10px;padding:1rem;width:48%;margin-bottom:1rem;box-shadow:0 4px 8px rgba(0,0,0,.1)}.owner-card img.profile-picture{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:1rem}@media (min-width:600px){.owners{flex-direction:row}} \ No newline at end of file +@import url(https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap);#searchInput,body{color:var(--text-light)}.dark-mode #searchInput,body.dark-mode{color:var(--text-dark)}#searchButton,h1{color:var(--accent-light)}#loading-screen,.modal,.participant::before{width:100%;height:100%}.cookies,.header-title,.participant,footer,h1{text-align:center}.about-us-btn>a,.contact-btn>a,.contributors-link,.header-title,footer a{text-decoration:none}:root{--bg-light:#fefdf8;--text-light:#1c1c1c;--accent-light:#50da4c;--bg-dark:#183717;--text-dark:#fefdf8;--accent-dark:#ff8bff;--bg-halloween:#1c1c1c;--text-halloween:#f9a825;--accent-halloween:#d32f2f}*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:#555 #1c1c1c;cursor:url('../img/icons8-ghost-16.webp'),pointer}body{font-family:Poppins,sans-serif;background-color:var(--bg-light);line-height:1.6;transition:background-color .3s,color .3s,background-image .3s;background-image:url('../img/bgm.webp');background-repeat:no-repeat;background-attachment:fixed;background-size:cover;overflow-x:hidden;background-color:#121212;color:#fff}body.dark-mode{background-color:var(--bg-dark);background-image:url('../img/dark.webp')}body.halloween-mode{background-color:var(--bg-halloween);color:var(--text-halloween);background-image:url('../img/halloween-bg.webp')}.halloween-mode button{background-color:var(--accent-halloween);color:#fff}.halloween-mode header,header{background-color:rgba(255,165,0,.8)}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%}header{display:flex;justify-content:flex-end;align-items:center;padding:1rem 2rem;position:sticky;top:0;z-index:1000;background-color:rgba(255,165,0,0.8)}.header-title{margin:0}.header-controls{margin-left:auto;display:flex;align-items:center;gap:1.5rem;padding-right:1rem}#toggleButton{margin-right:1rem}.search-container{display:flex;align-items:center;border-radius:30px;padding:.4rem 1rem;transition:.3s;width:100%;max-width:500px;margin:1rem 0;box-shadow:0 4px 10px rgba(0,0,0,.1);background:rgba(255,255,255,.267);backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px)}#searchButton,#searchInput{background:0 0;border:none}.carousel,.owner-card .owner-info{padding:.5rem}.main-search-container{display:flex;gap:5px;width:100%;align-items:center;justify-content:center}.total-contributors{color:#000;font-size:1.2rem}.dark-mode .search-container{background-color:rgba(255,139,255,.1);box-shadow:0 4px 10px rgba(255,255,255,.1)}#searchInput{padding:.4rem;font-size:1rem;width:100%;outline:0}#searchInput::placeholder{color:#f500f5;opacity:.7}.dark-mode #searchInput::placeholder{color:#c401c4}#searchButton{cursor:pointer;font-size:1.2rem;transition:transform .3s,color .3s}#searchButton:hover{transform:scale(1.1);color:var(--text-light)}.dark-mode #searchButton,.dark-mode .header-title,.dark-mode footer a,.dark-mode h1{color:var(--accent-dark)}.dark-mode #searchButton:hover,.dark-mode .toggle-btn i{color:#fff}h1{font-size:2.5rem;font-weight:600;margin-bottom:1rem}.carousel{background-color:#1c1c1c;overflow:hidden;white-space:nowrap}.carousel-slide{display:inline-block;color:#fff;font-size:1.2rem;font-family:monospace;animation:20s linear infinite carousel}.carousel:hover .carousel-slide{animation-play-state:paused}@keyframes carousel{from{transform:translateX(100vw)}to{transform:translateX(-90vw)}}.wall-section{padding:2rem;background-color:#f4f4f9;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);background:rgba(255,255,255,.45);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18)}.contributors-section h2,.wall-section h2{text-align:center;font-size:2rem;margin-bottom:1.5rem;color:#6b6b6b}.search-container{display:flex;justify-content:center;margin-bottom:1.5rem}.participant,.search-container button{color:#fff;align-items:center;cursor:pointer}.search-container input{padding:.75rem;width:300px;border:2px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .3s ease-in-out}.search-container input:focus{border-color:#888;outline:0}.search-container button{background-color:#ff5722;border:none;padding:.75rem 1rem;border-radius:8px;margin-left:.5rem;font-size:1.2rem;display:flex;justify-content:center;transition:background-color .3s ease-in-out}.participant,.toggle-btn,.toggle-btn i{font-size:1.5rem}.toggle-btn i,footer a{color:var(--accent-light);transition:color .3s}.search-container button:hover{background-color:#e64a19}.search-container button i{margin-right:.3rem}.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;padding:0 2rem}.participant{background-image:url('../img/brick_wall.webp');background-size:cover;background-repeat:no-repeat;padding:1.5rem;border-radius:10px;display:flex;justify-content:center;font-family:'Sedgwick Ave',cursive;font-weight:400;font-style:normal;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s ease-in-out;border:2px solid transparent;text-shadow:2px 5px 2px #000}#loading-screen,.modal{position:fixed;display:flex}.participant::before{content:'';position:absolute;top:0;left:0;border-radius:10px;background-color:rgba(255,255,255,.1);opacity:0;transition:opacity .3s}.participant:hover::before{opacity:1}.participant:hover{transform:translateY(-10px) scale(1.05);border-color:rgba(255,255,255,.6);box-shadow:0 0 5px rgba(255,255,255,.5),0 0 5px rgba(255,255,255,.4),0 0 30px rgba(66,205,47,.6)}#backToTopBtn:hover,.cookies-btn:hover,.toggle-btn:hover{transform:scale(1.1)}.wall-section .wall .participant{opacity:0;animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}footer{padding:1rem 0;margin-top:2rem;font-size:.9rem}footer a:hover{text-decoration:underline}.toggle-btn{background:0 0;border:none;cursor:pointer;transition:transform .3s}.about-us-btn,.contact-btn,.surprise-btn{background-color:var(--accent-light);color:#fff;border:none;padding:.5rem 1rem;border-radius:20px;cursor:pointer;font-size:.9rem;transition:.3s;margin-top:.5rem;margin-right:0}.dark-mode .contact-btn,.dark-mode .surprise-btn,.modal-dark-mode{background-color:var(--accent-dark)}.contact-btn>a{color:#fff}.header-title{color:inherit;font-size:2.5rem;font-weight:400;font-family:DynaPuff;color:var(--accent-light);transition:color .3s}.header-title:hover{cursor:pointer}#halloweenIcon{color:#fff;display:none;transition:opacity 1s;margin-left:2px;font-size:2.5rem}#loading-screen{backdrop-filter:blur(10px);align-items:center;justify-content:center;flex-direction:column;z-index:9999;background-color:#333;color:#fff}#backToTopBtn,.feebback-Btn{background-color:var(--accent-light);cursor:pointer}#spinner{width:100px;height:100px;border:12px solid #c401c4;border-top:12px solid #ff8bff;border-radius:50%;animation:1s linear infinite spin}#loading-text{font-weight:700;margin-top:1rem}#backToTopBtn{position:fixed;bottom:40px;right:40px;color:var(--text-light);border:none;border-radius:50px;padding:15px 25px;font-size:2rem;display:none;z-index:1000;transition:background-color .3s,color .3s,transform .3s;box-shadow:0 4px 12px rgba(0,0,0,.1)}#backToTopBtn:hover{background-color:var(--bg-dark);color:var(--text-dark)}body.dark-mode #backToTopBtn,body.dark-mode .feebback-Btn{background-color:var(--accent-dark);color:var(--text-dark)}body.dark-mode #backToTopBtn:hover{background-color:var(--bg-light);color:var(--text-light)}.feebback-Btn{color:var(--text-light);border:none;padding:10px 20px;margin-top:10px;border-radius:5px}.modal{top:0;left:0;background-color:rgba(0,0,0,.5);justify-content:center;align-items:center;z-index:10}.modal-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;max-width:630px;overflow:auto;padding:1rem 2rem;border-radius:10px;position:relative;background-color:var(--accent-light);color:#fff}.close-modal-button{position:absolute;top:10px;right:10px;font-size:20px;color:#fff}.hidden{display:none}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(720deg)}}@media (max-width:1024px){.container{padding:1.5rem}h1{font-size:2.2rem}.wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.search-container{max-width:100%;margin:1rem auto}.participant{font-size:1rem}.carousel-slide{font-size:.8rem}}@media (max-width:768px){.container{padding:1rem}h1{font-size:2rem}.header-controls{flex-direction:column;align-items:flex-end}.main-search-container{flex-direction:column}.search-sort-container{flex-direction:column-reverse}.wall{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.modal-wrapper{max-width:300px}.participant,footer{font-size:.8rem}}@media (max-width:480px){header{flex-direction:column;text-align:center}.header-controls{width:100%;flex-direction:column;align-items:center;gap:.5rem}.search-container{height:40px}.wall{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}.search-sort-container{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:10px;border-radius:8px}.sort-container{margin:15px 0}.cookies-btn,.cookies-text{margin-right:10px;font-weight:700}.sort-select{padding:8px;font-size:16px;border:1px solid #ccc;outline:0;border-radius:5px;cursor:pointer;transition:border-color .3s,box-shadow .3s}.sort-select:hover{border-color:#888;box-shadow:0 0 5px rgba(0,0,0,.2)}.sort-select:focus{border-color:#0056b3;box-shadow:0 0 5px rgba(0,86,179,.5)}.contributors-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:40px;align-items:center}@media screen and (max-width:1024px){.contributors-container h4{font-size:20px}}.contributors-card{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;width:300px;height:150px}.contributors-avatar-container{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:1rem}.contributors-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover}.contributors-contributions{font-weight:600;font-size:22px}.contributors-link{color:#fff;font-weight:600;font-size:18px;transition:color .3s}.contributors-section{background:rgba(255,255,255,.45);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);border-radius:10px;border:1px solid rgba(255,255,255,.18);padding:32px;margin-top:4rem}.cookies-btn,button{padding:10px;cursor:pointer;color:#fff}button{background-color:#007bff;border:none;border-radius:5px}.about-us-btn:focus,.about-us-btn:hover,button:focus,button:hover{background-color:#0056b3;outline:#ffffff solid 2px}a:focus{outline:#ffffff solid 2px}#flyingGhost{display:block;width:100px;position:fixed;top:20%;right:-150px;transition:right 3s ease-in-out}@keyframes ghostFly{0%{right:-150px}50%{right:50%}100%{right:100%}}#mascotContainer{display:none;position:fixed;bottom:50px;left:-150px;width:150px;height:auto;z-index:9999;animation:5s linear forwards mascotMove}@keyframes mascotMove{0%{left:-150px}50%{left:50%}100%{left:110%}}#cookies-container{position:fixed;bottom:0;left:0;right:0;z-index:9999}#cookies-sub-container{background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.2);color:#000}.cookies{display:flex;flex-direction:row;align-items:center;margin-bottom:10px;gap:2rem}@media screen and (max-width:480px){.cookies{flex-direction:column}}.cookies-text{font-size:14px;line-height:1.5;text-align:left}.cookies-buttons{display:flex;justify-content:flex-end;margin-top:10px}.cookies-btn{border:none;border-radius:5px;transition:transform .3s ease-in-out}.accept-cookies{background-color:#13c825}.accept-cookies:hover{background-color:#0ca01c}.decline-cookies{background-color:#df2424}.decline-cookies:hover{background-color:#b81e1e}.pumpkin{height:18px;width:18px;justify-content:center;justify-items:center;cursor:pointer;transition:.3s}.pumpkin:hover{transform:scale(1.05)}.popup{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);justify-content:center;align-items:center}.about-us,.owner-card{background-color:transparent;text-align:center}.popup-content{margin:auto;display:block;width:100%;max-width:800px;animation:3s li +near infinite spin}.close-btn{position:absolute;top:60px;right:35px;color:#fff;font-size:80px;font-weight:700;cursor:pointer}.close-btn:focus,.close-btn:hover{color:#bbb}#caption{text-align:center;color:#ccc;font-size:50px;padding:10px 0;font-family:Creepster,system-ui;font-style:normal;font-weight:400;text-shadow:2px 2px 4px orange}.about-us-btn>a{color:#fff}.about-us{padding:2rem}.owners{display:flex;justify-content:space-between;flex-wrap:wrap}.owner-card{display:flex;flex-direction:column;align-items:center;border:1px solid #ccc;border-radius:10px;padding:1rem;width:48%;margin-bottom:1rem;box-shadow:0 4px 8px rgba(0,0,0,.1)}.owner-card img.profile-picture{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:1rem}@media (min-width:600px){.owners{flex-direction:row}} +#navToggle{ + display: none; +} +@media (max-width: 768px) { + .header-controls { + display: none; + position: absolute; + top: 100%; + right: 0; + width: 200px; + background-color: rgba(255, 165, 0, 0.8); /* Match the header background */ + backdrop-filter: blur(10px); + padding: 1rem; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + border-radius: 8px; + } + + body.dark-mode .header-controls { + background-color: rgba(24, 55, 23, 0.8); /* Darker version of --bg-dark */ + } + + .about-us-btn, .contact-btn, .surprise-btn { + background-color: var(--accent-light); + color: var(--text-light); + width: 100%; + margin-bottom: 0.5rem; + } + + body.dark-mode .about-us-btn, + body.dark-mode .contact-btn, + body.dark-mode .surprise-btn { + background-color: var(--accent-dark); + color: var(--text-dark); + } + + #navToggle { + display: block; + color: var(--text-light); + z-index: 1001; + position: absolute; + top: 1rem; + right: 1rem; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + padding: 0.5rem; + } + + body.dark-mode #navToggle { + color: var(--text-dark); + } +} + +/* Add these new styles outside the media query */ +.header-controls.show { + display: flex; + flex-direction: column; + align-items: stretch; +} + +body.halloween-mode .header-controls { + background-color: rgba(28, 28, 28, 0.8); +} + +body.halloween-mode .about-us-btn, +body.halloween-mode .contact-btn, +body.halloween-mode .surprise-btn { + background-color: var(--accent-halloween); + color: var(--text-halloween); +} + +body.halloween-mode #navToggle { + color: var(--text-halloween); +} diff --git a/src/index.html b/src/index.html index c12f791..76ee8ba 100644 --- a/src/index.html +++ b/src/index.html @@ -49,40 +49,39 @@ + +
- -
- +
+ HacktoberWall
-
- - -
-
- + +
- + +
@@ -226,13 +225,16 @@

Phanty78 (Co-Owner)

integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"> - \ No newline at end of file + diff --git a/src/js/app.js b/src/js/app.js index bfaac40..e3e8bef 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -390,3 +390,12 @@ async function fetchGitHubProfiles() { } document.addEventListener("DOMContentLoaded", fetchGitHubProfiles); + +document.addEventListener('DOMContentLoaded', function() { + const navToggle = document.getElementById('navToggle'); + const headerControls = document.querySelector('.header-controls'); + + navToggle.addEventListener('click', function() { + headerControls.classList.toggle('show'); + }); +}); From 9d7238b67a2314cf3398a8b3677881998575dc92 Mon Sep 17 00:00:00 2001 From: Pavan507-STAR Date: Thu, 24 Oct 2024 12:27:38 +0530 Subject: [PATCH 2/2] restored comments --- src/css/style.css | 976 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 874 insertions(+), 102 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index ea5404b..daeebf7 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,12 +1,18 @@ -@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap"); :root { --bg-light: #fefdf8; + /* Light background color */ --text-light: #1c1c1c; + /* Text color */ --accent-light: #50da4c; + /* Green accent color */ --bg-dark: #183717; + /* Dark green background color */ --text-dark: #fefdf8; + /* Light text color for dark mode */ --accent-dark: #ff8bff; + /* Pink accent color for dark mode */ --bg-halloween: #1c1c1c; --text-halloween: #f9a825; --accent-halloween: #d32f2f; @@ -16,133 +22,194 @@ box-sizing: border-box; margin: 0; padding: 0; + /* scrollbar styles */ scrollbar-width: thin; scrollbar-color: #555 #1c1c1c; - cursor: url('../img/icons8-ghost-16.webp'), pointer; + cursor: url("../img/icons8-ghost-16.webp"), pointer; } body { - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; background-color: var(--bg-light); color: var(--text-light); line-height: 1.6; - transition: background-color 0.3s, color 0.3s, background-image 0.3s; - background-image: url('../img/bgm.webp'); + transition: + background-color 0.3s, + color 0.3s, + background-image 0.3s; + background-image: url("../img/bgm.webp"); + /* Background image for light mode */ background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow-x: hidden; + background-color: #121212; + color: #ffffff; } body.dark-mode { background-color: var(--bg-dark); color: var(--text-dark); - background-image: url('../img/dark.webp'); + background-image: url("../img/dark.webp"); + /* Background image for dark mode */ } body.halloween-mode { background-color: var(--bg-halloween); color: var(--text-halloween); - background-image: url('../img/halloween-bg.webp'); + background-image: url("../img/halloween-bg.webp"); /* Add a spooky background */ +} + +.halloween-mode button { + background-color: var(--accent-halloween); + color: white; +} + +.halloween-mode header { + background-color: rgba(255, 165, 0, 0.8); /* Halloween orange */ } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; + width: 100%; } header { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; padding: 1rem 2rem; background-color: rgba(255, 165, 0, 0.8); position: sticky; top: 0; z-index: 1000; - position: relative; } -.header-left { - display: flex; - align-items: center; +.header-title { + font-size: 2.5rem; + font-weight: 600; + text-align: center; + margin: 0; } .header-controls { + margin-left: auto; display: flex; align-items: center; + gap: 1.5rem; + padding-right: 1rem; } -#navToggle { - display: none; - background: none; - border: none; - font-size: 1.5rem; - cursor: pointer; - position: absolute; - right: 1rem; - top: 1rem; - padding: 0.5rem; -} - -.header-title { - font-size: 2.5rem; - font-weight: 600; - color: var(--accent-light); - transition: color 0.3s; +.surprise-btn { + margin-right: 0.5rem; } -.header-title:hover { - cursor: pointer; +#toggleButton { + margin-right: 1rem; } .search-container { display: flex; align-items: center; - background: rgba(80, 218, 76, 0.1); + background-color: rgba(80, 218, 76, 0.1); + /* Light green for search */ border-radius: 30px; padding: 0.4rem 1rem; transition: all 0.3s ease; width: 100%; max-width: 500px; margin: 1rem 0; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.267); backdrop-filter: blur(4.5px); + -webkit-backdrop-filter: blur(4.5px); } -.search-container input { +.main-search-container { + display: flex; + gap: 5px; + width: 100%; + align-items: center; + justify-content: center; +} + +.total-contributors { + color: black; + font-size: 1.2rem; +} + +.dark-mode .search-container { + background-color: rgba(255, 139, 255, 0.1); + /* Light pink for dark mode */ + box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1); +} + +#searchInput { border: none; background: transparent; padding: 0.4rem; font-size: 1rem; + color: var(--text-light); width: 100%; outline: none; - color: var(--text-light); } -.search-container button { +.dark-mode #searchInput { + color: var(--text-dark); +} + +#searchInput::placeholder { + color: #f500f5; + /* Placeholder color in pink */ + opacity: 0.7; +} + +.dark-mode #searchInput::placeholder { + color: #c401c4; + /* Dark mode placeholder color */ +} + +#searchButton { background: none; border: none; cursor: pointer; - font-size: 1.2rem; color: var(--accent-light); - transition: transform 0.3s ease, color 0.3s ease; + font-size: 1.2rem; + transition: + transform 0.3s ease, + color 0.3s ease; } -.search-container button:hover { +#searchButton:hover { transform: scale(1.1); color: var(--text-light); } -/* Main Elements */ +.dark-mode #searchButton { + color: var(--accent-dark); +} + +.dark-mode #searchButton:hover { + color: #fff; +} + h1 { font-size: 2.5rem; font-weight: 600; color: var(--accent-light); + /* Green for heading */ text-align: center; margin-bottom: 1rem; } +.dark-mode h1 { + color: var(--accent-dark); + /* Pink for dark mode heading */ +} + +/* infinite carousel animation styles */ .carousel { background-color: #1c1c1c; padding: 0.5rem; @@ -150,12 +217,40 @@ h1 { white-space: nowrap; } -/* Wall Section */ +.carousel-slide { + display: inline-block; + color: white; + font-size: 1.2rem; + font-family: monospace; + animation: 20s carousel infinite linear; +} + +.carousel:hover .carousel-slide { + animation-play-state: paused; +} + +@keyframes carousel { + from { + transform: translateX(100vw); + } + + to { + transform: translateX(-90vw); + } +} + +/* Styling for the Wall Section */ .wall-section { padding: 2rem; + background-color: #f4f4f9; + border-radius: 15px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.45); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); border-radius: 10px; - box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); + border: 1px solid rgba(255, 255, 255, 0.18); } .wall-section h2 { @@ -165,7 +260,352 @@ h1 { color: rgb(107, 107, 107); } +/* Search Bar Styling */ +.search-container { + display: flex; + justify-content: center; + margin-bottom: 1.5rem; +} + +.search-container input { + padding: 0.75rem; + width: 300px; + border: 2px solid #ddd; + border-radius: 8px; + font-size: 1rem; + transition: border-color 0.3s ease-in-out; +} + +.search-container input:focus { + border-color: #888; + outline: none; +} + +.search-container button { + background-color: #ff5722; + color: white; + border: none; + padding: 0.75rem 1rem; + border-radius: 8px; + margin-left: 0.5rem; + cursor: pointer; + font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s ease-in-out; +} + +.search-container button:hover { + background-color: #e64a19; +} + +.search-container button i { + margin-right: 0.3rem; +} + +/* Wall of Participants */ +.wall { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1.5rem; + padding: 0 2rem; +} + +/* Participant Card Styling with Glowing Borders */ +.participant { + background-image: url("../img/brick_wall.webp"); + background-size: cover; + background-repeat: no-repeat; + color: white; + padding: 1.5rem; + border-radius: 10px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-family: "Sedgwick Ave", cursive; + font-weight: 400; + font-style: normal; + position: relative; + cursor: pointer; + transition: + transform 0.3s, + box-shadow 0.3s, + border-color 0.3s ease-in-out; + border: 2px solid transparent; + /* Add a transparent border initially */ + /*Add text-outline*/ + text-shadow: 2px 5px 2px rgb(0, 0, 0); +} + +.participant::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.1); + /* Subtle inner glow */ + opacity: 0; + transition: opacity 0.3s; +} + +.participant:hover::before { + opacity: 1; +} + +.participant:hover { + transform: translateY(-10px) scale(1.05); + /* Add a glowing border effect */ + border-color: rgba(255, 255, 255, 0.6); + box-shadow: + 0 0 5px rgba(255, 255, 255, 0.5), + 0 0 5px rgba(255, 255, 255, 0.4), + 0 0 30px rgba(66, 205, 47, 0.6); +} + +.wall-section .wall .participant { + opacity: 0; + animation: fadeIn 0.5s forwards; + animation-timing-function: ease-out; +} + +/* Animation for fadeIn */ +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(10px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.wall-section .wall .participant { + opacity: 0; + animation: fadeIn 0.5s forwards; + animation-timing-function: ease-out; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(10px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +footer { + text-align: center; + padding: 1rem 0; + margin-top: 2rem; + font-size: 0.9rem; +} + +footer a { + color: var(--accent-light); + text-decoration: none; + transition: color 0.3s; +} + +.dark-mode footer a { + color: var(--accent-dark); +} + +footer a:hover { + text-decoration: underline; +} + +.toggle-btn { + font-size: 1.5rem; + background: none; + border: none; + cursor: pointer; + transition: transform 0.3s; +} + +.toggle-btn:hover { + transform: scale(1.1); +} + +.toggle-btn i { + font-size: 1.5rem; + color: var(--accent-light); + transition: color 0.3s; +} + +.dark-mode .toggle-btn i { + color: white; +} + +.surprise-btn { + background-color: var(--accent-light); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + font-size: 0.9rem; + transition: all 0.3s ease; + margin-top: 0.5rem; + margin-right: 0; +} + +.dark-mode .surprise-btn { + background-color: var(--accent-dark); +} + +.contact-btn { + background-color: var(--accent-light); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + font-size: 0.9rem; + transition: all 0.3s ease; + margin-top: 0.5rem; + margin-right: 0; +} + +.dark-mode .contact-btn { + background-color: var(--accent-dark); +} + +.contact-btn > a { + text-decoration: none; + color: white; +} + +.header-title { + color: inherit; + text-decoration: none; + font-size: 2.5rem; + font-weight: 400; + font-family: DynaPuff; + color: var(--accent-light); + transition: color 0.3s; +} + +.header-title:hover { + cursor: pointer; +} + +.dark-mode .header-title { + color: var(--accent-dark); +} + +#halloweenIcon { + color: white; + display: none; + transition: opacity 1s; + margin-left: 2px; + font-size: 2.5rem; +} + +#loading-screen { + position: fixed; + width: 100%; + height: 100%; + backdrop-filter: blur(10px); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + z-index: 9999; +} + +#spinner { + width: 100px; + height: 100px; + border: 12px solid #c401c4; + /* Deep Pink for spinner */ + border-top: 12px solid #ff8bff; + /* Pink for spinner */ + border-radius: 50%; + animation: spin 1s linear infinite; +} + +#loading-text { + font-weight: bold; + margin-top: 1rem; +} + +/* Back to Top Button Styles */ +#backToTopBtn { + position: fixed; + bottom: 40px; + right: 40px; + background-color: var(--accent-light); + /* Green accent in light mode */ + color: var(--text-light); + border: none; + border-radius: 50px; + padding: 15px 25px; + font-size: 2rem; + cursor: pointer; + display: none; + /* Hidden by default */ + z-index: 1000; + transition: + background-color 0.3s ease, + color 0.3s ease, + transform 0.3s; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +#backToTopBtn:hover { + background-color: var(--bg-dark); + /* Dark green on hover */ + color: var(--text-dark); + /* Light text on hover */ + transform: scale(1.1); + /* Button enlarges slightly */ +} + +/* Dark mode styles */ +body.dark-mode #backToTopBtn { + background-color: var(--accent-dark); + /* Pink accent in dark mode */ + color: var(--text-dark); +} + +body.dark-mode #backToTopBtn:hover { + background-color: var(--bg-light); + /* Light background on hover */ + color: var(--text-light); + /* Dark text on hover */ +} + +/* Feedback Button style */ + +.feebback-Btn { + background-color: var(--accent-light); + color: var(--text-light); + border: none; + padding: 10px 20px; + margin-top: 10px; + border-radius: 5px; + cursor: pointer; +} + +body.dark-mode .feebback-Btn { + background-color: var(--accent-dark); + color: var(--text-dark); +} + /* Modal */ + .modal { position: fixed; top: 0; @@ -189,27 +629,48 @@ h1 { overflow: auto; padding: 1rem 2rem; border-radius: 10px; + position: relative; background-color: var(--accent-light); + color: #fff; } .modal-dark-mode { background-color: var(--accent-dark); } -/* Responsive Styles */ +.close-modal-button { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + color: #fff; +} + +.hidden { + display: none; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(720deg); + } +} + @media (max-width: 1024px) { .container { padding: 1.5rem; } -} -@media (max-width: 768px) { - .container { - padding: 1rem; + h1 { + font-size: 2.2rem; } - .header-title { - font-size: 2rem; + .wall { + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .search-container { @@ -217,47 +678,51 @@ h1 { margin: 1rem auto; } - .wall { - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + .participant { + font-size: 1rem; } - footer { + .carousel-slide { font-size: 0.8rem; } +} + +@media (max-width: 768px) { + .container { + padding: 1rem; + } - #navToggle { - display: block; /* Ensure the button is displayed */ - color: #fff; /* Set icon color for visibility */ - z-index: 1001; /* Ensure the button is on top of other elements */ + h1 { + font-size: 2rem; } .header-controls { - display: none; - position: absolute; - top: 100%; - left: 0; - right: 0; - background-color: rgba(255, 165, 0, 0.9); flex-direction: column; - padding: 1rem; - z-index: 1000; + align-items: flex-end; } - .header-controls.show { - display: flex; + .main-search-container { flex-direction: column; - position: absolute; - top: 100%; - right: 0; - background: #fff; - padding: 1rem; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); } - .header-controls button { - margin: 0.5rem 0; - width: 100%; - text-align: left; + .search-sort-container { + flex-direction: column-reverse; + } + + .wall { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + } + + .modal-wrapper { + max-width: 300px; + } + + footer { + font-size: 0.8rem; + } + + .participant { + font-size: 0.8rem; } } @@ -267,35 +732,128 @@ h1 { text-align: center; } + .header-controls { + width: 100%; + flex-direction: column; + align-items: center; + gap: 0.5rem; + } + + .search-container { + height: 40px; + } + .wall { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } } -/* Back to Top Button Styles */ -#backToTopBtn { - position: fixed; - bottom: 40px; - right: 40px; - background-color: var(--accent-light); - color: var(--text-light); - border: none; - border-radius: 50px; - padding: 15px 25px; - font-size: 2rem; +/* Sort Container */ +.search-sort-container { + display: flex; + justify-content: center; + align-items: center; + gap: 1.5rem; /* Increased gap for better spacing */ + padding: 10px; /* Added padding for better touch targets */ + border-radius: 8px; /* Rounded corners for a softer look */ +} + +.sort-container { + margin: 15px 0; /* Increased margin for better separation */ +} + +.sort-select { + padding: 8px; /* Increased padding for comfort */ + font-size: 16px; + border: 1px solid #ccc; /* Slightly lighter border */ + outline: none; + border-radius: 5px; cursor: pointer; - display: none; /* Hidden by default */ - z-index: 1000; - transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s; + transition: + border-color 0.3s, + box-shadow 0.3s; /* Smooth transition effects */ } -#backToTopBtn:hover { - background-color: var(--bg-dark); - color: var(--text-dark); - transform: scale(1.1); +.sort-select:hover { + border-color: #888; /* Darker border on hover */ + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */ +} + +.sort-select:focus { + border-color: #0056b3; /* Highlight border on focus */ + box-shadow: 0 0 5px rgba(0, 86, 179, 0.5); /* Focus shadow effect */ +} + +.contributors-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + gap: 40px; + align-items: center; +} + +@media screen and (max-width: 1024px) { + .contributors-container h4 { + font-size: 20px; + } +} + +.contributors-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border: none; + width: 300px; + height: 150px; +} + +.contributors-avatar-container { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + gap: 1rem; +} + +.contributors-avatar { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; +} + +.contributors-contributions { + font-weight: 600; + font-size: 22px; +} + +.contributors-link { + text-decoration: none; + color: #fff; + font-weight: 600; + font-size: 18px; + transition: color 0.3s; +} + +.contributors-section { + background: rgba(255, 255, 255, 0.45); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(4px); + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.18); + padding: 32px; + margin-top: 4rem; +} + +.contributors-section h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 1.5rem; + color: rgb(107, 107, 107); } -/* Additional Button Styles */ button { background-color: #007bff; color: #ffffff; @@ -311,6 +869,66 @@ button:focus { outline: 2px solid #ffffff; } +a:focus { + outline: 2px solid #ffffff; +} + +#loading-screen { + background-color: #333333; + color: #ffffff; +} + +/* Flying Ghost Animation */ +#flyingGhost { + display: block; /* Ensure the image is displayed */ + width: 100px; /* Adjust size as needed */ + position: fixed; /* Allows for movement */ + top: 20%; + right: -150px; /* Start off-screen */ + transition: right 3s ease-in-out; /* Optional for smooth appearance */ +} + +@keyframes ghostFly { + 0% { + right: -150px; + } + + 50% { + right: 50%; + } + + 100% { + right: 100%; + } +} + +/* Keyframes for mascot movement */ +#mascotContainer { + display: none; + position: fixed; + bottom: 50px; + left: -150px; + width: 150px; + height: auto; + z-index: 9999; + animation: mascotMove 5s linear forwards; + animation-play-state: running; +} + +@keyframes mascotMove { + 0% { + left: -150px; + } + + 50% { + left: 50%; + } + + 100% { + left: 110%; + } +} + /* Cookies */ #cookies-container { position: fixed; @@ -320,20 +938,43 @@ button:focus { z-index: 9999; } +#cookies-sub-container { + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + color: #000; +} + .cookies { display: flex; flex-direction: row; align-items: center; + margin-bottom: 10px; text-align: center; gap: 2rem; } +@media screen and (max-width: 480px) { + .cookies { + flex-direction: column; + } +} + .cookies-text { + margin-right: 10px; font-size: 14px; line-height: 1.5; + text-align: left; font-weight: bold; } +.cookies-buttons { + display: flex; + justify-content: flex-end; + margin-top: 10px; +} + .cookies-btn { color: #fff; border: none; @@ -345,6 +986,10 @@ button:focus { transition: transform 0.3s ease-in-out; } +.cookies-btn:hover { + transform: scale(1.1); +} + .accept-cookies { background-color: #13c825; } @@ -361,14 +1006,141 @@ button:focus { background-color: #b81e1e; } -/* Other Elements (you can add further styles or adjust as needed) */ +.pumpkin { + height: 18px; + width: 18px; + justify-content: center; + justify-items: center; + cursor: pointer; + transition: 0.3s; +} -/* Keyframes */ -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(720deg); +.pumpkin:hover { + transform: scale(1.05); +} + +.popup { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top of the page */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */ + justify-content: center; + align-items: center; +} + +/* Popup content (image) */ +.popup-content { + margin: auto; + display: block; + width: 100%; + max-width: 800px; + animation: spin 3s linear infinite; +} + +/* Close button */ +.close-btn { + position: absolute; + top: 60px; + right: 35px; + color: #fff; + font-size: 80px; + font-weight: bold; + cursor: pointer; +} + +.close-btn:hover, +.close-btn:focus { + color: #bbb; +} + +/* Caption for the popup image */ +#caption { + text-align: center; + color: #ccc; + font-size: 50px; + padding: 10px 0; + font-family: "Creepster", system-ui; + font-style: normal; + font-weight: 400; + text-shadow: 2px 2px 4px orange; +} + +.about-us-btn { + background-color: var(--accent-light); + color: #fff; + border: none; + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + font-size: 0.9rem; + transition: 0.3s; + margin-top: 0.5rem; + margin-right: 0; +} +.about-us-btn > a { + color: #fff; + text-decoration: none; +} + +.about-us-btn:hover, +.about-us-btn:focus { + background-color: #0056b3; + outline: 2px solid #ffffff; +} + +.about-us { + padding: 20px; + text-align: center; +} + +.about-us { + background-color: transparent; /* Transparent background */ + padding: 2rem; +} + +.about-us { + background-color: transparent; + padding: 2rem; +} + +.owners { + display: flex; + justify-content: space-between; /* Space between the owner cards */ + flex-wrap: wrap; /* Wrap the items if the screen is too small */ +} + +.owner-card { + display: flex; + flex-direction: column; /* Stack image on top of the text */ + align-items: center; + background-color: transparent; /* Transparent background */ + border: 1px solid #ccc; + border-radius: 10px; + padding: 1rem; + width: 48%; /* Adjust the width to make the cards fit side by side */ + margin-bottom: 1rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for some depth */ + text-align: center; /* Center the content inside */ +} + +.owner-card img.profile-picture { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 1rem; +} + +.owner-card .owner-info { + padding: 0.5rem; +} + +@media (min-width: 600px) { + .owners { + flex-direction: row; } }