.srodek_gen{
 width: 65%;
 position: relative;
  left: 20%;
font-size: 1em;
font-family: Helvetica, Verdana, sans-serif;
}

@media only screen and (min-width: 700px) {
   .navbar{

}}

@media only screen and (max-width: 700px) {
   .srodek_gen {
        width: 100%;
 position: relative;
  left: 0%;
    }
}

.srodek_nieglowna{
  margin: auto;
  width: 60%;
  padding: 25px;
display: block;
}

.srodek_nieglowna_tlo{
  border-radius: 15px 50px;
  margin: auto;
  width: 90%;
  padding: 25px;
display: block;
  background-color: gainsboro;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 700px) {
.srodek_nieglowna_tlo{
  border-radius: 15px 50px;
  margin: auto;
  width: 100%;
  padding: 25px;
display: block;
  background-color: gainsboro;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
}

.pojemniknamapke {
position: relative;
  width: 100%;
  overflow: hidden;
 padding-top: 56.25%; /* 16:9 Aspect Ratio */ 
}

.ikony_mapy {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-bottom: 5%;
}

.mapka {
position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.ikonki_map {
display: flex;
flex-direction: row;
gap: 5px;
}

@media only screen and (max-width: 700px) {
.srodek_nieglowna {
width: 100%;
padding: 10px 1px 10px 1px;  
display: block;
}
}

@media only screen and (max-width: 700px) {
.mapka {
width: 100%;
}
}

.malemale{
width: 40%;
height: 40%;
}

* {
  box-sizing: border-box;
}

/* Float four columns side by side */
.column2 {
  float: left;
  width: 50%;
  padding: 10px 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 700px) {
  .column2 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: left;
  background-color: #f1f1f1;
}

.portret {
float: left;
width: 50%;
height: auto;
padding: 10px 10px;
}

.portret_right {
float: right;
width: 50%;
height: auto;
padding: 10px 10px;
}

.okladka {
 max-width: 40%;
  height: auto;
padding: 10px 10px;
float: right;
}

.okladka_left {
 max-width: 40%;
  height: auto;
padding: 10px 10px;
float: left;
}

.biogram {
 min-width: auto;
max-width: 40%;
    min-height: auto;
    max-height: 30%;
    margin: 3px;
    padding: 3px;
 margin-left: auto;
    margin-right: auto;
font-family: Helvetica, sans-serif;
}

.stopka {
color: white;
  position: absolute;
  padding: 10%;
    left: 30%;
}

.srodek2 {
width: 70%;
height: 70%;
margin: auto;
}

@media only screen and (max-width: 700px) {
   .srodek2 {
        width: 100%;
 height: 100%;
margin: auto;
    }

.warning{
font-size: 14px;
font-family: Helvetica, Verdana, sans-serif;
}

@media only screen and (max-width: 700px) {
   .warning {
        width: 100%;
margin: auto;
    }}