/* Reset margin and padding for the entire document */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Reset body margin */
        body {
            margin: 0;
        }

        /* Flex container to hold the three frames */
        .outer-frame {
    border: 5px solid black; /* Külső fekete keret */
    margin: 20px; /* Külső margó a tartalom körül */
    background-color: #EB6E00; /* Szürkés-fekete háttér a külső keret körül */
    display: flex;
    flex-wrap: wrap; /* A tartalmat egymás alá rendezi kisebb képernyőn */
        }

       /* Middle frame with gold border */
.middle-frame {
    border: 5px solid #CDCCC9; /* Arany keret helyett #CDCCC9 (sötét arany) */
    margin: 5px; /* Köztes margó a külső kerettől */
    background-color: #CDCCC9; /* Arany háttér a középső keretben */
    flex: 1 1 300px; /* Rugalmasan változó szélesség a középső keretben */
    min-width: 300px; /* Minimum szélesség a középső keretben */
    min-height: 200px; /* Minimum magasság a középső keretben */
}

/* Inner frame with red border */
.inner-frame {
    border: 10px solid #000000; /* Piros keret helyett #000000 (mélyvörös) */
    margin: 20px; /* Belső margó a középső kerettől */
    background-color: #000000; /* Piros háttér a belső keretben */
    flex: 1 1 300px; /* Rugalmasan változó szélesség a belső keretben */
    min-width: 300px; /* Minimum szélesség a belső keretben */
    min-height: 200px; /* Minimum magasság a belső keretben */
}

        /* Content inside each frame */
        .content {
            padding: 20px; /* Belső margó a tartalom körül */
            color: white; /* Fehér szöveg a tartalomban */
        }

        /* Media Queries for Responsive Design */

        /* Tablet and larger screens */
        @media (max-width: 768px) {
            .outer-frame {
                flex-direction: column; /* Egymás alatt jelenítse meg a kereteket kisebb képernyőkön */
            }
            .middle-frame, .inner-frame {
                flex: 1 1 auto; /* Rugalmasan változó szélesség a kisebb képernyőkön */
                min-width: auto; /* Automatikus szélesség a kisebb képernyőkön */
                min-height: auto; /* Automatikus magasság a kisebb képernyőkön */
                margin: 10px; /* Kisebb margó a kisebb képernyőkön */
            }
        }