html, body {
    width: 100%;
    margin: 0;
    padding:0;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.body h2 {
    font: normal 18px Arial, Helvetica, sans-serif;
    color: #2c2c2c;
    padding: 15px 5px;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
}

.body h3 {
    font: normal 18px Arial, Helvetica, sans-serif;
    color: #2c2c2c;
    padding: 15px 5px;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
}

.body h4 {
    font: normal 12px Arial, Helvetica, sans-serif;
    color: #2c2c2c;
    padding: 15px 5px;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
}


    .flags-container {
        position: absolute;
        top: 25px; /* Odstęp od górnej krawędzi obrazka */
        right: 15px; /* Odstęp od prawej krawędzi obrazka */
        display: flex;
        gap: 5px; /* Odstępy między flagami */
        z-index:1000;
    }

    .flag {
        width: 25px; /* Szerokość flagi */
        height: 16px; /* Wysokość flagi */
        cursor: pointer; /* Zmień kursor na wskaźnik */
        transition: transform 0.2s ease; /* Dodaj efekt po najechaniu */
    }

    .flag:hover {
        transform: scale(1.2); /* Powiększ flagę po najechaniu */
    }

    .tekst_1 {
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: red;
    }

    .tekst_2 {
        font-family: Arial, sans-serif;
        font-size: 20px;
        margin-top:1px;
        margin-bottom:10px;
        font-weight:bold;
        color: black;
    }
/* Set widths on the form inputs since otherwise they're 100% wide */

/* Responsive: Portrait tablets and up */



@media screen and (min-width: 1200px) {
    .main {
        width: 90%;
        padding: 0;
        margin: 0 auto;
    }

    .body-content {
        padding: 0;
    }

    #box {
        background-color: #000;
        position: relative;
        padding: 10px;
        width: 100%;
        margin: 10px 3px 14px 10px;
    }

    .a {
        position: absolute;
        top: 30%;
        left: 50%;
        background-color: transparent;
        padding: 5px;
        font: normal 120px Arial, Helvetica, sans-serif;
        color: white;
    }

    .b {
        position: absolute;
        top: 60%;
        left: 51%;
        background-color: transparent;
        font: normal 36px Arial, Helvetica, sans-serif;
        padding: 5px;
        color: white;
    }

    
    .pict2 {
        width: 25px;
        height: 18px;
    }

    #pobierz {
        background-color: #000;
        position: relative;
        padding: 3px;
        width: 100%;
    }

    .a_pobierz {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font: normal 28px Arial, Helvetica, sans-serif;
        padding: 3px;
        background-color: deeppink;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .main {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .body-content {
        padding: 0;
    }

    #box {
        background-color: #000;
        position: relative;
        padding: 10px;
        width: 100%;
        margin: 10px 3px 14px 10px;
    }

    .flags-container {
        top: 20px; /* Odstęp od górnej krawędzi obrazka */
        right: 10px; /* Odstęp od prawej krawędzi obrazka */
    }
    
    .a {
        position: absolute;
        top: 30%;
        left: 50%;
        background-color: transparent;
        padding: 5px;
        font: normal 96px Arial, Helvetica, sans-serif;
        color: white;
    }

    .b {
        position: absolute;
        top: 60%;
        left: 51%;
        background-color: transparent;
        font: normal 24px Arial, Helvetica, sans-serif;
        padding: 5px;
        color: white;
    }

    .tekst_1 {
        font-size: 14px;
    }

    .tekst_2 {
        font-size: 18px;
    }

    .pict2 {
        width: 22px;
        height: 16px;
    }

    #pobierz {
        background-color: #000;
        position: relative;
        padding: 3px;
        width: 100%;
    }

    .a_pobierz {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font: normal 28px Arial, Helvetica, sans-serif;
        padding: 3px;
        background-color: deeppink;
    }

    .table1 {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #DDD;
    }

    .tr:hover {
        background-color: #D6EEEE;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .main {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .body-content {
        padding: 0;
    }

    #box {
        background-color: #000;
        position: relative;
        padding: 10px;
        width: 100%;
        margin: 10px 3px 14px 10px;
    }

    .flags-container {
        top: 15px; /* Odstęp od górnej krawędzi obrazka */
        right: 10px; /* Odstęp od prawej krawędzi obrazka */
    }

    .a {
        position: absolute;
        top: 30%;
        left: 50%;
        background-color: transparent;
        padding: 5px;
        font: normal 60px Arial, Helvetica, sans-serif;
        color: white;
    }

    .b {
        position: absolute;
        top: 60%;
        left: 51%;
        background-color: transparent;
        font: normal 18px Arial, Helvetica, sans-serif;
        padding: 5px;
        color: white;
    }

    .tekst_1 {
        font-size: 14px;
    }

    .tekst_2 {
        font-size: 16px;
    }

    .pict2 {
        width: 20px;
        height: 14px;
    }

    #pobierz {
        background-color: #000;
        position: relative;
        padding: 3px;
        width: 100%;
    }

    .a_pobierz {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font: normal 28px Arial, Helvetica, sans-serif;
        padding: 2px;
        background-color: deeppink;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .main {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .body-content {
        padding: 0;
    }

    #box {
        background-color: #000;
        position: relative;
        padding: 10px;
        width: 100%;
        margin: 10px 3px 14px 10px;
    }

    .flags-container {
        top: 10px; /* Odstęp od górnej krawędzi obrazka */
        right: 10px; /* Odstęp od prawej krawędzi obrazka */
    }

    .a {
        position: absolute;
        top: 30%;
        left: 50%;
        background-color: transparent;
        padding: 5px;
        font: normal 36px Arial, Helvetica, sans-serif;
        color: white;
    }

    .b {
        position: absolute;
        top: 60%;
        left: 51%;
        background-color: transparent;
        font: normal 12px Arial, Helvetica, sans-serif;
        padding: 5px;
        color: white;
    }

    .tekst_1 {
        font-size: 12px;
    }

    .tekst_2 {
        font-size: 14px;
    }

    .pict2 {
        width: 18px;
        height: 13px;
    }

    #pobierz {
        background-color: #000;
        position: relative;
        padding: 3px;
        width: 100%;
    }

    .a_pobierz {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font: normal 36px Arial, Helvetica, sans-serif;
        padding: 2px;
        background-color: deeppink;
    }
}

@media print {
    body {
        display: none
    }
}