*,*::before,*::after {  box-sizing: border-box;}
html {  -moz-text-size-adjust: none;  -webkit-text-size-adjust: none;  text-size-adjust: none; font-size: 18px;}
body, h1, h2, h3, h4, p,figure, blockquote, dl, dd {  margin: 0; }
html, body { height: 100%;}
ul[role='list'],ol[role='list'] {  list-style: none;}
body {  min-height: 100vh;  line-height: 1.5; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column;}
h1, h2, h3, h4,button, input, label {  line-height: 1.1;}
h1, h2,h3, h4 {  text-wrap: balance;}
a:not([class]) {  text-decoration-skip-ink: auto;  color: currentColor;}
img,picture {  max-width: 100%;  vertical-align:middle; height:auto; font-style:italic; }
input, button,textarea, select {  font: inherit;}
textarea:not([rows]) {  min-height: 10em;}
:target {  scroll-margin-block: 5ex;}
ol {padding-left: 1rem}

:root {	                  
--kolor-naglowka: hsla(0, 0%, 100%, 0.7);
--nc: hsl(212, 45%, 35%);
--nj: hsl(194, 67%, 50%);      
}

h1, h2, h3, h4 {margin:1rem 0 2rem 0; font-weight: 600;}

p  {margin: 1rem 0;}
  
.container { width: min(95%, 1200px);  margin-inline: auto;	}

/* responsywna nawigacja */
header {  background: var(--kolor-naglowka);  text-align: center;  position: relative;  z-index: 999;  width: 100%; padding: 2rem; border-bottom:1px solid rgba(172,179,194,.2);}
.logo img {margin:0 auto; width: 8rem;}

/* changed this from the tutorial video to allow it to gain focus, making it tabbable */
.nav-toggle {  position: absolute !important;  top: -9999px !important;  left: -9999px !important;}
.nav-toggle:focus ~ .nav-toggle-label {  outline: 3px solid rgba(lightblue, .75);}
.nav-toggle-label {  position: absolute;  top: 0;  left: 0;  margin-left: 1em;  height: 100%;  display: flex;  align-items: center;}

.nav-toggle-label span,.nav-toggle-label span::before,.nav-toggle-label span::after {  display: block;  background: rgb(85, 68, 68);  height: 2px;  width: 2em;  border-radius: 2px;  position: relative;}

.nav-toggle-label span::before, .nav-toggle-label span::after {  content: '';  position: absolute;}
.nav-toggle-label span::before {  bottom: 7px;}
.nav-toggle-label span::after {  top: 7px;}

nav {  position: absolute;  text-align: left;  top: 100%;  left: 0;  background: var(--kolor-naglowka);  width: 100%;  transform: scale(1, 0);  transform-origin: top;  transition: transform 400ms ease-in-out;
}

nav ul {  margin: 0;  padding: 0;  list-style: none;}
nav li {  margin-bottom: 1em;  margin-left: 1em;}
nav a {  color: white;  text-decoration: none;  font-size: 1.2rem; font-weight: 600;  opacity: 0;  transition: opacity 150ms ease-in-out;}
nav a:hover {  color: #000;}
.nav-toggle:checked ~ nav {  transform: scale(1,1);}
.nav-toggle:checked ~ nav a {  opacity: 1;  transition: opacity 250ms ease-in-out 250ms;}

li.active { color: var(--nj) }

@media screen and (min-width: 800px) {  
  .nav-toggle-label {    display: none;  }
  header {    display: grid;    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;  }
  .logo {    grid-column: 2 / 3;  }
  
  nav {position: relative;    text-align: left;    transition: none;    transform: scale(1,1);    background: none;
    top: initial; left: initial; grid-column: 3 / 4; display: flex;    justify-content: flex-end;    align-items: center;  }
  
  nav ul {    display: flex;  }
  nav li {    margin-left: 3em;    margin-bottom: 0;  }
  nav a {    opacity: 1;    position: relative;  }  
}

#content { flex: 1 0 auto; padding: 2rem 0;}

#footer { background-color: var(--nc); color:#fff; padding: 2rem 0; flex-shrink: 0;}
#footer ul {  margin: 0;  padding: 0;  list-style: none; display: flex}
#footer li {  margin-right: 1em; }
#footer a {  text-decoration: none;}

span.email b { display: none; }



.sr-only {	border: 0 !important;	clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important;		clip-path: inset(50%) !important; height: 1px !important;	margin: -1px !important; overflow: hidden !important;	padding: 0 !important;	position: absolute !important;	width: 1px !important;	white-space: nowrap !important;}
.sr-only-focusable:focus,.sr-only-focusable:active {	clip: auto !important;	-webkit-clip-path: none !important;		clip-path: none !important;	height: auto !important;	margin: auto !important;	overflow: visible !important; width: auto !important;	white-space: normal !important;}