/* Basic Reset & Body Styling */ * { box-sizing: border-box; /* Makes handling padding and borders easier */ margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.6; padding: 20px; /* Change background and text color */ background-color: #2d2d2d; /* Dark grey background */ color: #e0e0e0; /* Light grey/off-white text */ display: flex; flex-direction: column; align-items: center; min-height: 100vh; } /* Button Styling */ button { padding: 10px 15px; font-size: 1rem; /* 16px default */ margin-top: 15px; /* Space above buttons */ cursor: pointer; /* Indicate it's clickable */ background-color: #007bff; /* A standard blue */ color: white; border: none; /* Remove default border */ border-radius: 5px; /* Slightly rounded corners */ min-width: 150px; /* Give buttons a minimum width */ text-align: center; } button:hover { background-color: #0056b3; /* Darker blue on hover */ } button#startCompass { /* Target button specifically */ padding: 10px 15px; font-size: 1rem; margin-top: 20px; /* Adjusted from previous step */ cursor: pointer; background-color: #007bff; /* Keeping blue for accent */ color: white; border: none; border-radius: 5px; min-width: 150px; text-align: center; } button#startCompass:hover { background-color: #0056b3; } /* Styling for the output areas */ #compassDisplay { margin-top: 30px; width: 220px; height: 220px; position: relative; /* Add a contrasting background for the needle */ background-color: #cccccc; /* Light grey background */ border-radius: 50%; /* Make it circular */ border: 2px solid #aaaaaa; /* Optional border */ box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.1); /* Optional inner/outer glow */ display: flex; align-items: center; justify-content: center; } #compassNeedle { width: 85%; height: 85%; object-fit: contain; /* Scale image nicely */ /* Make rotation smooth */ transition: transform 0.2s linear; /* Set rotation point to the center */ transform-origin: center center; } #infoDisplay { margin-top: 20px; padding: 15px; /* Make background slightly lighter dark grey, adjust border */ background-color: #444444; border: 1px solid #666666; /* Ensure text color is light */ color: #e0e0e0; width: 90%; max-width: 300px; text-align: center; border-radius: 5px; } #distanceText, #hoursText, #statusText { font-size: 1rem; margin: 5px 0; /* Explicitly set color, inheriting should work but this is safer */ color: #e0e0e0; } #statusText { font-style: italic; color: #bbbbbb; /* Make status slightly dimmer */ } /* Adjust existing button style if needed */ #startCompass { /* Use the new ID */ /* Your existing button styles */ margin-top: 20px; } /* Optional: Add a little heading */ h1 { margin-bottom: 20px; /* Color is inherited from body now (light) */ /* Remove any specific dark 'color' rule if you added one */ text-align: center; } /* Ensure the link to CSS is in your index.html section */ /* */