body { font-family: 'Inter', sans-serif; /* Using Inter font */ margin: 0; /* Remove default body margin */ padding: 20px; background-color: #f0f0f0; display: flex; flex-direction: column; /* Arrange content vertically */ justify-content: center; align-items: center; min-height: 100vh; } h1 { text-align: center; color: #333; margin-bottom: 20px; font-size: 2em; /* Larger heading */ } .responsive-container { width: 95%; /* Make it wider to accommodate the full page embed */ max-width: 1200px; /* Max width for larger screens to prevent it from getting too wide */ padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 12px; /* Slightly larger rounded corners */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */ background-color: white; margin-bottom: 20px; overflow: hidden; /* Ensure content stays within rounded corners */ } .iframe-wrapper { position: relative; /* Maintain an aspect ratio that suits a full webpage, e.g., 16:9 or taller */ /* A good starting point for a full webpage, adjust as needed for optimal viewing */ padding-bottom: 120%; /* Height will be 120% of the width, making it taller */ height: 0; overflow: hidden; border-radius: 8px; /* Slightly smaller rounded corners for inner frame */ } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 8px; } .desc { padding: 15px; text-align: center; font-size: 1.1em; color: #555; line-height: 1.6; } .desc a { color: #007bff; text-decoration: none; font-weight: bold; transition: color 0.3s ease; /* Smooth transition for hover effect */ } .desc a:hover { text-decoration: underline; color: #0056b3; /* Darker blue on hover */ } /* Responsive adjustments for the container */ @media only screen and (max-width: 768px) { .responsive-container { width: 100%; /* Full width on smaller screens */ padding: 5px; border-radius: 0; /* No rounded corners on very small screens for edge-to-edge */ } .iframe-wrapper { padding-bottom: 150%; /* Make it even taller on mobile if needed */ } body { padding: 10px; } }