Changed around line 1
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Arial', sans-serif;
+ background: linear-gradient(135deg, #1e3c72, #2a5298);
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ text-align: center;
+ }
+
+ header {
+ margin-bottom: 2rem;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ font-size: 1.2rem;
+ }
+
+ #climb-container {
+ position: relative;
+ width: 100%;
+ height: 60vh;
+ background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48cGF0aCBkPSJNMCw1MDBsNTAwLDBsMCwtNTAwbC0xMDAsMGwwLDUwMGwtMTAwLDBsMCwtNTAwbC0xMDAsMGwwLDUwMGwtMTAwLDBsMCwtNTAwbC0xMDAsMGwwLDUwMHoiIGZpbGw9IiMzMzMiLz48L3N2Zz4=') repeat-x bottom;
+ background-size: contain;
+ overflow: hidden;
+ }
+
+ #character {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50px;
+ height: 100px;
+ background: #ff6347;
+ clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+ transition: bottom 0.5s ease;
+ }
+
+ #mountain {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(180deg, #555, #333);
+ clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
+ }
+
+ #controls {
+ margin-top: 2rem;
+ }
+
+ button {
+ padding: 0.75rem 1.5rem;
+ font-size: 1rem;
+ color: #fff;
+ background: #ff6347;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ margin: 0 0.5rem;
+ transition: background 0.3s ease;
+ }
+
+ button:hover {
+ background: #ff4500;
+ }
+
+ footer {
+ margin-top: 2rem;
+ font-size: 0.9rem;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ p {
+ font-size: 1rem;
+ }
+
+ button {
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ }
+ }