/* Sets a light background for the area outside the "phone" screen */ body { background-color: #ffffff; } /* 1. Base Styles (Applied by Default) */ /* These styles define the mobile layout (420px) which is the default/fallback. */ .mobile-container { /* Sets the width for mobile devices by default */ max-width: 420px; /* Centers the container horizontally */ margin-left: auto; margin-right: auto; /* Existing styling from before */ padding: 20px; background-color: white; /*border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/ } /* 2. Media Query for Large Screens (Laptops, Desktops) */ /* This rule activates when the screen width is 421 pixels or wider. */ @media screen and (min-width: 421px) { .mobile-container { /* OVERRIDES the max-width for larger screens */ max-width: 840px; /* Ensures the container remains centered */ margin-left: auto; margin-right: auto; /* You can adjust other styles for desktop here if needed */ } } /* Defines a style rule named 'smallcaps' */ .smallcaps { /* This property renders text in lowercase letters, but capitalizes them to the size of a lowercase letter. */ font-variant: small-caps; } /* Example: Medium Gray */ .medium-gray-text { color: #111111; } /* Style for the default details section */ details { cursor: pointer; padding: 10px; margin-bottom: 10px; border-radius: 4px; /*transition: background-color 0.3s; /* Smooth transition for effect */ } /* Default state of the summary title */ summary { background-color: #f0f0f0; /* Light grey background */ padding: 10px; border: 1px solid #ccc; } /* Hover state: When the mouse is over the summary */ summary:hover { background-color: #e0e0e0; /* Slightly darker grey on hover */ } body { font-family: Verdana, sans-serif; } .sans-text { font-family: Roboto, Arial, Helvetica, sans-serif; font-size: small } * { -webkit-tap-highlight-color: transparent; } /* OR, more selectively, by targeting the tag: */ html { -webkit-tap-highlight-color: transparent; }