html,
        body {
            width: 100%;
            /* Ensures full width */
            height: 100%;
            /* Ensures full height */
            margin: 0 20px 0 0;
            /* margin-top, margin-right, margin-bottom, margin-left */
            padding: 0;
            overflow: hidden;
            /* This will hide scrollbars */
        }

        .container {
            width: 95%;
            /* Full width */
            height: 100vh;
            /* Full viewport height */
            margin: 0 20px 0 20px;
            /* margin-top, margin-right, margin-bottom, margin-left */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            /* Prevents scrollbars internally */
        }

        .meteogram {
            flex-grow: 1;
            /* Takes remaining space */
            width: 100%;
            /* Full width */
            overflow: hidden;
            /* Ensures no scrollbars appear */
            width: 100%;
            /* Full width to ensure it stretches as expected */
            height: 100%;
            /* Full height to fill the container */
            border: none;
            /* Removes border that might affect sizing */
            border-radius: 10px;
            margin: 0 20px 0 20px;
            /* margin-top, margin-right, margin-bottom, margin-left */
            padding: 0;
            /* Ensures there's no padding inside the iframe */
        }

        .meteogram iframe {
            width: 100%;
            /* Ensure it takes the full width of its container */
            height: 100%;
            /* Ensure it takes the full height of its container */
            border: none;
            /* Cleans up any border that might be taking space */
        }