@font-face {font-family: 'Roboto';font-style: normal;font-weight: 400;src: local('Roboto'),url('roboto.woff2') format('woff2');font-display: swap}
body {background-color:#FFFFFF;font-family: 'Roboto';font-size:19px;text-align:left;color:#303030;line-height:1.5; margin:0}

img {aspect-ratio: attr(width) / attr(height)}

 h1 {text-align: left; font-size:100%; color: #757106}
 h2,h3,h4,h5,h6 {text-align: right; font-size:95%;   color: #757106; font-style: italic}
  
  img.bio {width:160px; height:190px; float: left; padding: 5px}
  img.logok  {width:250px; height:50px}
  img.logos  {width:200px; height:40px}
  img.mode  {width:65px; height:33px}
  img.pdf  {width:50px; height:50px; padding: 8px}
  img.menu {width:33px; height:33px; padding: 5px}
  img.foot  {width:30px; height:30px; padding: 5px; display: block}

 ul.r {border: 1px solid #999999;border-radius: 5px;padding: 5px; margin:0; box-shadow: 2px 2px 5px; list-style-type: none; width:85%}
 ul.p {margin-left: auto;margin-right: auto}
 li.tlo {background-color: #605B0E; color: #FFFFFF}
 li.cena {border-top: #757106 solid 1px; margin:0}
 
 .gallery {display: flex; justify-content: space-between; width: 95%; box-sizing: border-box}
.lewa-kolumna {width: 47%;display: flex; flex-direction: column;gap: 10px;  row-gap: 20px}
.prawa-kolumna {width: 47%; display: flex; flex-direction: column;gap: 10px;  row-gap: 20px}
.lewa-kolumna img, .prawa-kolumna img {width: 100%; height: auto; display: block; border: 1px solid #999999;border-radius: 5px;padding: 5px; box-shadow: 5px 5px 10px;}

 .gallery2 {display: flex; width: 90%; margin: 0 auto; box-sizing: border-box}
 .jedna-kolumna-pion, .jedna-kolumna-poziom {width: 100%; display: flex; justify-content: center}
.jedna-kolumna-pion img {max-width: 500px; height: auto; display: block; border: 1px solid #999999;border-radius: 5px;padding: 5px; box-shadow: 5px 5px 10px}
.jedna-kolumna-poziom img {width: auto; max-height: 500px; display: block; border: 1px solid #999999;border-radius: 5px;padding: 5px; box-shadow: 5px 5px 10px}

 .gallery3 {display: flex; width: 100%; margin: 0 auto; box-sizing: border-box}
 .jedna-kolumna-poziom3 {width: 100%; display: flex; justify-content: center; }
 .jedna-kolumna-poziom3 img {width: 100%; max-height: 200px; display: block; border: 0}
 
  .gallery4 {display: flex; width:  100%; margin: 0 auto; box-sizing: border-box}
 .jedna-kolumna-poziom4 {width: 100%; display: flex; justify-content: center; }
 .jedna-kolumna-poziom4 img {width: 160px; max-height: 200px; display: block;  border: 1px solid #999999;border-radius: 5px;padding: 5px; box-shadow: 5px 5px 10px}

 nav.hamburger-menu {position: fixed !important; z-index: 9999; background-color: #FFFFFF; width: 100% !important; top: 0 !important; left:0 !important; border-bottom: #9D6E05 solid 1px;  display: flex; justify-content: space-evenly; align-items: center; padding: 5px 2px; box-sizing: border-box;}
.nav-logo {display: flex; align-items: center; background-color: #FFFFFF; justify-content: center}
.menu-toggle {display: none}
.menu-icon {display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer}
.menu-icon span {display: block;height: 2px;width: 100%; background-color: #000000}
.menu-list {display: none;list-style: none;padding: 10px 0;margin: 10px 0 0 0;background: #FFFFFF;border: 1px solid #000000;width: 98%;position: absolute;top: 100%;left: 0;box-shadow: 2px 2px 4px}
.menu-list li a {display: flex;align-items: center;padding: 10px 10px;color: #000000;text-decoration: none;font-size: 17px}
.menu-list li a:hover {background-color: #FFFFFF}
.menu-img {width: 30px; height: 30px; margin-right: 15px; object-fit: contain}
.menu-toggle:checked ~ .menu-list {display: block} 

 nav.komputer {position: fixed; z-index: 9999; background-color: #FFFFFF; width: 100%; top: 0; left:0; text-align: center; align-items: center;border-bottom: #757106 solid 1px}
 div.komp-logo {text-align: center;  padding: 0px 10px; height: 50px; align-items: center; object-fit: contain}
 div.komp a {display: inline-block; text-align: center; align-items: center;  padding: 1px 12px; text-decoration: none; color: #303030;  font-size: 14px}
 div.komp a:visited {text-decoration:none; color:#303030}
 div.komp a:hover {text-decoration:none; color:#9D6E05}
 div.komp a:active {text-decoration:none}

 footer {position: fixed; bottom: 0; text-align: center; background-color: #FFFFFF; width: 100%; color:#000000; border-top: #9D6E05 solid 1px}
 footer a {display: inline-flex; text-align: center; padding: 1px 15px; text-decoration: none; color: #1a1a1a; font-size: 13px; line-height: 1; align-items: center;}
 footer a:visited {text-decoration:none; color:#1a1a1a}
 footer a:hover {text-decoration:none; color:#9D6E05}
 footer a:active {text-decoration:none}
 
 strong.m {color:#846b00; font-size:100%}
 strong.cytat {color:#757106; font-size:65%; font-style: italic}
 strong.aa {color:#757106}

 main {background-color: #FFFFFF;  text-align: left; margin: 170px 5px 90px 5px}
 main a {color:#000000}
 
 p {margin-top: 0; margin-bottom: 20px}
 p.pod {margin-top: 20px; margin-bottom: 0} 
 span.k {display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none}

 .youtube-video {aspect-ratio: 16 / 9; width: 93%; max-width: 1200px; border: 1px solid #999999;border-radius: 5px;padding: 10px; box-shadow: 5px 5px 10px}
 
 #menu1 {position: fixed; top: 50%; right: 2%}
 #menu2 {position: fixed; top: 45%; right: 2%} 
 
    
 form {text-align: center; align-content: center}  
 input {min-width: 260px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px; padding: 3px 10px 3px 10px; height: 30px;} 
 textarea {min-width: 260px; min-height: 100px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 10px; padding: 3px 10px 3px 10px;} 
 .szukaj {background: #757106;color: white;border: none; font-size: 14px; border-radius: 5px; padding: 3px 10px 3px 10px; cursor : pointer}
 .szukaj::file-selector-button {background: #757106;color: white; border: none; font-size: 14px;border-radius: 5px;padding: 3px 10px; cursor: pointer}
 button.dark {background: #FFFFFF; border: none; border-radius: 10px; padding: 3px 10px 3px 10px; cursor : pointer}
 button.szukaj:hover {background: #846b00} 
 #div_box, #div_box2 {background-color: #FFFFFF}
 
 body.dark-mode {background-color:#000000; color:#E0E0E0}
 body.dark-mode button.dark {background: #000000}
 body.dark-mode img.pdf {filter:  saturate(1.2) hue-rotate(187deg) invert(1)}
 body.dark-mode img.foot {filter: invert(1)}
 body.dark-mode img.menu {filter: brightness(0.36) saturate(3) hue-rotate(193deg) invert(1)}
 body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {color: #E6C319}
 body.dark-mode nav {background-color: #000000; color: #E6C319}
 body.dark-mode nav a {color: #E6C319}
 body.dark-mode nav a:hover {color:#EDE351}
 body.dark-mode footer {background-color: #000000; color:#EEEEEE}
 body.dark-mode footer a {color: #EEEEEE}
 body.dark-mode footer a:hover {color:#EDE351}
 body.dark-mode strong.m {color:#FFDF5D}
 body.dark-mode strong.aa {color:#E6C319}
 body.dark-mode strong.cytat {color:#E6C319}
 body.dark-mode main {background-color: #000000}
 body.dark-mode main a {color:#FFFFFF}
  body.dark-mode .szukaj {background: #E6C319; color: #000000}
  body.dark-mode .szukaj::file-selector-button {background: #E6C319; color: #000000}
 body.dark-mode input {background-color: #000000; color: #FFFFFF; border: 1px solid #444444}
 body.dark-mode textarea {background-color: #000000; color: #FFFFFF; border: 1px solid #444444}
 body.dark-mode #div_box, body.dark-mode #div_box2 {background-color: #000000}
 body.dark-mode .hamburger-menu {background-color: #000000;}
 body.dark-mode .nav-logo {background-color: #000000}
 body.dark-mode .menu-icon span {background-color: #FFFFFF}
 body.dark-mode .menu-list {background: #000000;border: 1px solid #FFFFFF}
 body.dark-mode .menu-list li a {color: #E0E0E0}
 body.dark-mode .menu-list li a:hover {background-color: #000000}
 body.dark-mode nav.komputer {background-color: #000000}
 body.dark-mode div.komp a {color: #E0E0E0}
 body.dark-mode div.komp a:visited {color:#E0E0E0}
 body.dark-mode li.tlo {background-color: #E6C319; color: #000000}
 
@media only screen and (min-width: 1000px)  {nav.hamburger-menu {display:none}} 
 @media only screen and (max-width: 1700px) {textarea {min-width: 700px}}
 @media only screen and (max-width: 1000px) {textarea {min-width: 500px} main {line-height:1.6; font-size:17px} nav.komputer,span.k {display:none}  main {margin: 80px 5px 50px 5px}}
 @media only screen and (max-width: 850px)  {textarea {min-width: 400px} main {line-height:1.8; font-size:17px}}
 @media only screen and (max-width: 575px)  {textarea {min-width: 300px} .jedna-kolumna-poziom img {width: 95%; max-height: 250px} .jedna-kolumna-pion img {max-width: 300px; height: auto} img.mode {width:60px; height:auto}}
 @media only screen and (max-width: 400px)  {img.logos  {width:165px; height:33px} img.mode {width:50px; height:auto} img.menu {width:30px; height:auto}}