@font-face {
    font-family: "CMU Serif";
    src: url("fonts/cmun/cmunorm.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "CMU Serif";
    src: url("fonts/cmun/cmunsl.otf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "CMU Serif";
    src: url("fonts/cmun/cmunbx.otf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "CMU Serif";
    src: url("fonts/cmun/cmunbi.otf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

body {
    font-family: "CMU Serif", "Times New Roman", serif;
    background-color: #fff;
    width: 95%;
    margin: 0 auto;
 
}

/* table caption */
/* caption-side: top, bottom, inherit, initial, revert, revert-layer, unset */
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: normal;
}


.flex-container {
    display: flex;
    flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }
}

.flex-item {
    padding: 0.5rem 1rem 1rem 0;
}


h1 {
    font-size: 1.3rem;
    color: forestgreen;
    font-family: "CMU Serif", "Times New Roman", serif;
}
h2 {
    font-size: 1rem;
    color: forestgreen;
    font-family: "CMU Serif", "Times New Roman", serif;
}

.img_size_25rem {
    max-width: 25rem;
}
.img_size_20rem {
    max-width: 20rem;
}

.img_size_18rem {
    max-width: 18rem;
}
.img_size_17rem {
    max-width: 17rem;
}
.img_size_16rem {
    max-width: 16rem;
}


.img_size_15rem {
    max-width: 15rem;
}
.img_size_14rem {
    max-width: 14rem;
}
.img_size_13rem {
    max-width: 13rem;
}
.img_size_12rem {
    max-width: 12rem;
}

.img_size_11rem {
    max-width: 11rem;
}
.img_size_10rem {
    max-width: 10rem;
}
.img_size_8rem {
    max-width: 8rem;
}
.img_size_7rem {
    max-width: 7rem;
}
.img_size_6rem {
    max-width: 6rem;
}
.img_size_5rem {
    max-width: 5rem;
}

.img_size_4rem {
    max-width: 4rem;
}

.img_size_15rem {
    max-width: 15rem;
}
.img_size_14rem {
    max-width: 14rem;
}
.img_size_13rem {
    max-width: 13rem;
}
.img_size_12rem {
    max-width: 12rem;
}

.img_size_11rem {
    max-width: 11rem;
}
.img_size_10rem {
    max-width: 10rem;
}
.img_size_8rem {
    max-width: 8rem;
}
.img_size_7rem {
    max-width: 7rem;
}
.img_size_6rem {
    max-width: 6rem;
}
.img_size_5rem {
    max-width: 5rem;
}


.img_size_300px {
    max-width: 300px;
}

.img_size_200px {
    max-width: 200px;
}

.img_size_130px {
    max-width: 130px;
}

.img_size_100px {
    max-width: 100px;
}

.kwadrat_magiczny td {
    text-align: center;
    width: 5rem;
    height: 1rem 3rem;
}


.line_height_2rem {
    line-height: 2rem;
}

.line_height_3rem {
    line-height: 3rem;
}

main {margin-bottom: 3rem;}

ol.small_letter_round {
    list-style-type: lower-alpha; /* makes a, b, c, ... */
}

ol.small_letter_round li::marker {
    content: "(" counter(list-item, lower-alpha) ") "; /* adds parentheses */
}

ol.number_round li::marker {
    content: "(" counter(list-item) ") "; /* adds parentheses */
}

span.fill_in_2rem {
    display: inline-block;
    border: 1px solid forestgreen;
    width: 2rem;
    margin-bottom: 1rem;
}

table {
    border-collapse: collapse;
}


.zadanie_tresc table, td, th {
    border: 1px solid forestgreen;
    padding: 0.5rem;
}




table.all_center td, th {
    text-align: center;
}

div.img_and_name_svg {
    display: block;
    float: left;
    margin: 10px;
    box-shadow: 2px 2px 6px #aaa;
    /* text-align: center; */
    padding:1%;
    width: 20rem;
    height:30rem;
    font-size: 1rem;
    font-weight: bold;}

div.img_svg {display:block; width:100%; height:50%; text-align: center;}

img {width:100%}


div.name_svg {
    /* display:block; */
    padding: 5rem 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: gray;
    margin:20px 10px;
    height:30%
}


.zadanie_nr {
    color: forestgreen;
    margin: 0.5rem 0;
    border: 0px dotted gray;
}

.zadanie_tresc {
    border: 0px dotted gray;
    margin-bottom: 0.8rem;
}

.zadanie_rozwiazanie {
    border: 0px dotted gray;
    text-align: left;
    margin-bottom: 1rem;
    font-style: oblique;
}