/* Import Poppins font */ /* This line is usually in the HTML , but can be here too if preferred */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); */ } /* General styling for the body to show the background and ensure buttons are layered */ body { margin: 0; font-family: 'Poppins', sans-serif; /* Apply Poppins globally or just to buttons */ overflow-x: hidden; /* Prevent horizontal scroll on some WebGL setups */ position: relative; /* Ensures elements can be positioned relative to body */ min-height: 100vh; /* Make body at least full viewport height */ } /* Styles for the animation wrapper */ .animation-wrapper { /* No need for display: flex or gap here, as button-container now handles it for desktop */ /* This wrapper mostly just handles the animation itself */ animation: fadeInUp 1s ease-out 0.5s forwards; /* <-- THIS IS CRITICAL */ /* Ensure the wrapper doesn't interfere with flex layout of parent */ display: contents; /* Makes the children effectively direct children of .button-container */ } /* Add this new class for hiding the buttons */ .button-container.hidden { transform: translateX(-50%) translateY(-150%); /* Move up and out of view */ opacity: 0; /* Fade out */ pointer-events: none; /* Disable clicks when hidden */ } /* Styles for the container of the buttons */ .button-container { position: fixed; /* Positions buttons relative to the viewport */ top: 30px; /* Adjust vertical position */ width: auto; /* Allow content to dictate width on desktop */ max-width: 90%; /* Prevent container from being too wide on large screens */ left: 50%; /* Center horizontally */ transform: translateX(-50%); /* Fine-tune horizontal centering */ display: flex; /* Arranges buttons in a row */ gap: 15px; /* Space between buttons */ z-index: 1000; /* Ensures buttons are above other content, including WebGL */ align-items: flex-start; /* Align items to the start of the cross axis (top if row, left if column) */ flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */ justify-content: center; /* Center buttons if they wrap */ padding: 10px; /* Add some padding around the container */ transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* Add transition */ } /* Glassmorphism Button Styles */ .glassmorphism-button { display: inline-flex; /* Allows text and padding to center vertically */ align-items: center; /* Centers text vertically */ justify-content: center; /* Centers text horizontally */ padding: 12px 25px; /* Vertical and horizontal padding */ border: none; /* No default button border */ border-radius: 15px; /* Rounded corners */ font-family: 'Poppins', sans-serif; /* Apply Poppins to buttons */ font-size: 1.1em; font-weight: 600; /* Slightly bolder font */ text-decoration: none; /* Remove underline from links */ color: rgba(255, 255, 255, 0.9); /* White text, slightly transparent */ cursor: pointer; transition: all 0.3s ease; /* Smooth transitions for hover effects */ /* Glassmorphism Effect */ background: rgba(255, 255, 255, 0.15); /* Slightly transparent white background */ backdrop-filter: blur(10px); /* The key blur effect */ -webkit-backdrop-filter: blur(10px); /* For Safari support */ border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle light border */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */ } /* Hover effect */ .glassmorphism-button:hover { background: rgba(255, 255, 255, 0.25); /* More opaque on hover */ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Slightly larger shadow */ transform: translateY(-2px); /* Slight lift effect */ } /* Active (click) effect */ .glassmorphism-button:active { transform: translateY(0); /* Press down effect */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Smaller shadow */ } /* Define the fadeInUp Keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); /* Starts 20px below its final position */ } to { opacity: 1; transform: translateY(0); /* Ends at its final position */ } } /* Responsive adjustments for smaller screens */ @media (max-width: 600px) { .button-container { flex-direction: column; /* Stack buttons vertically on small screens */ width: 90%; /* Take more width */ top: 10px; /* Adjust position */ gap: 10px; /* Adjust gap */ } .glassmorphism-button { width: 100%; /* Make buttons full width when stacked */ padding: 10px 20px; } }