* {
  box-sizing: border-box;
  margin:0;
  padding:0;
  scroll-margin-top: 5rem;
}

:root {
  --unit:min(1.6vw, 3vh);
}

@font-face {
  font-family: 'hfs';
  src: url('../font.otf') format('opentype');
}

@keyframes nav {
  0%    {
          border-bottom:0.2rem solid rgba(7,85,5,1);
          box-shadow:0 0.5rem 0 rgba(7,42,13,1);
        }
  33%    {
          border-bottom:0.2rem solid rgba(81,239,201,1);
          box-shadow:0 0.5rem 0 rgba(56,199,181,1);
        }
  66%    {
          border-bottom:0.2rem solid rgba(255,153,150,1);
          box-shadow:0 0.5rem 0 rgba(255,135,25,1);
        }
  100%    {
          border-bottom:0.2rem solid rgba(7,85,5,1);
          box-shadow:0 0.5rem 0 rgba(7,42,13,1);
        }
}

@keyframes glow {
  0%    { text-shadow:-3px 2px 0 rgb(255,153,25), 0 1px 0 rgba(56,199,181), 2px 0 0 rgba(253,75,67), -2px -1px 0 rgba(32,110,7); }
  25%   { text-shadow:1px -1px 0 rgb(255,153,25), -3px -1px 0 rgba(56,199,181), 1px 2px 0 rgba(253,75,67), -3px 0 0 rgba(32,110,7); }
  50%   { text-shadow:-1px -1px 0 rgb(255,153,25), 1px 2px 0 rgba(56,199,181), 3px -1px 0 rgba(253,75,67), -4px 1px 0 rgba(32,110,7); }
  75%  { text-shadow:-1px -2px 0 rgb(255,153,25), -2px 1px 0 rgba(56,199,181), -1px 1px 0 rgba(253,75,67), 2px 0 0 rgba(32,110,7); }
  100%    { text-shadow:-3px 2px 0 rgb(255,153,25), 0 1px 0 rgba(56,199,181), 2px 0 0 rgba(253,75,67), -2px -1px 0 rgba(32,110,7); }
}

@keyframes box-glow {
  0%    { box-shadow:-6px 4px 0 rgb(255,153,25), 0 2px 0 rgba(56,199,181), 4px 0 0 rgba(253,75,67), -4px -4px 0 rgba(32,110,7); }
  25%   { box-shadow:2px -2px 0 rgb(255,153,25), -6px -2px 0 rgba(56,199,181), 2px 4px 0 rgba(253,75,67), -6px 0 0 rgba(32,110,7); }
  50%   { box-shadow:-2px -2px 0 rgb(255,153,25), 2px 4px 0 rgba(56,199,181), 6px -2px 0 rgba(253,75,67), -4px 2px 0 rgba(32,110,7); }
  75%  { box-shadow:-2px -4px 0 rgb(255,153,25), -4px 2px 0 rgba(56,199,181), -2px 2px 0 rgba(253,75,67), 4px 0 0 rgba(32,110,7); }
  100%    { box-shadow:-6px 4px 0 rgb(255,153,25), 0 2px 0 rgba(56,199,181), 4px 0 0 rgba(253,75,67), -4px -2px 0 rgba(32,110,7); }
}

@keyframes pan {
  0%    { background-position:50% 50%; }
  25%    { background-position:100% 30%; }
  50%    { background-position:20% 30%; }
  100%    { background-position:60% 80%; }
}

html {
  scroll-behavior: smooth;
}

body {
  padding:0;
  margin:0;
  width:100%;
  height:fit-content;
  color:rgba(255,255,255,1);
  font-family:Century Gothic, Helvetica, sans-serif;
  font-size:1rem;
  line-height: 100%;
  justify-content: space-around;
  background-color:rgb(34,34,34);
  flex-direction:column;
}

h1, h2, h3, h4 {
  font-family:hfs, Helvetica, sans-serif;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

h1, h2 {
  text-transform: uppercase;
  animation-name: glow;
}

.widoczny h3 {
  animation-name: glow;
}



nav {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  position:sticky;
  top:0px;
  border-bottom:0.2rem solid rgba(7,85,5,1);
  box-shadow:0 0.5rem 0 rgba(7,42,13,1);
  animation-name: nav;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  box-sizing:border-box;
  margin-bottom:0.5rem;
  z-index:20;
  text-transform: uppercase;
}

nav ul {
  list-style-type:none;
  display:flex;
  align-items:center;
}

nav ul li {
  margin:0;
}

nav ul li a {
  color:rgb(255,255,255,1);
  text-decoration:none;
  font-size:min(3rem, 10vh, 3vw);
  padding:0 min(1.5rem, 2.5vw);
  height:5rem;
  display:flex;
  align-items:center;
  font-family:hfs, Helvetica, sans-serif;
  transition:0.1s;
  text-shadow:1px 2px 2px rgb(0,0,0);
}

nav ul li a:hover {
  background:rgba(255,255,255,0.1);
  animation-name: glow;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
 
}

header {
  display:flex;
  background-image:url("../img/slider/2.jpg");
  background-position:50% 50%;
  background-size:150vmax auto;
  background-repeat:no-repeat;
  width:100%;
  height:calc(100vh - 3rem);
  animation-name: pan;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  z-index:1;
  background-attachment:fixed;
}

header h1 {
  display:flex;
  width:100%;
  height:calc(100vh - 3rem);
  align-items:center;
  margin:0;
  justify-content:center;
  background:rgba(0,0,0,0.7);
  animation-name: glow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  font-size:min(10vw, 20vh);
  background-image:url("../img/logo.png");
  background-repeat:no-repeat;
  background-size:20vmin auto;
  background-position:calc(50% - min(30vw, 60vh) ) 50%;
  padding-left:20vmin;
   z-index:1;
}

hr {
  z-index:3;
  position:relative;
  display:block;
  height:1.5rem;
  background-color:rgb(56,199,181);
  box-sizing:border-box;
  border-style:solid;
  margin-top:0rem;
  margin-bottom:3.5rem;
}

hr.hr1 {
  border-color:rgb(81,239,201) rgb(81,239,201)  rgb(253,215,200) rgb(32,183,70);
  border-width: 0.5rem 0 0.3rem 0;
  box-shadow:
    0 -0.3rem 0 rgb(32,183,70),
    0 -0.8rem 0 rgb(32,110,7),
    0 -1rem 0 rgb(7,85,5),
    0 -1.7rem 0 rgb(7,42,13),
    0 0.6rem 0 rgb(253,74,67),
    0 1.3rem 0 rgb(255,153,25),
    0 1.65rem 0 rgb(255,235,132),
    0 1.9rem 0 rgb(255,250,219)
   ;
  transform:rotate(-1deg);
}

hr.hr2 {
  border-color:rgb(253,215,200) rgb(32,183,70) rgb(81,239,201) rgb(81,239,201);
  border-width: 0.5rem 0 0.3rem 0;
  box-shadow:
    0 0.3rem 0 rgb(32,183,70),
    0 0.8rem 0 rgb(32,110,7),
    0 1rem 0 rgb(7,85,5),
    0 1.7rem 0 rgb(7,42,13),
    0 -0.6rem 0 rgb(253,74,67),
    0 -1.3rem 0 rgb(255,153,25),
    0 -1.65rem 0 rgb(255,235,132),
    0 -1.9rem 0 rgb(255,250,219)
   ;
  transform:rotate(1deg);
}

p {
  line-height:140%;
  text-align:justify;
  margin-bottom:1rem;
}

#onas {
  background:rgba(255,255,255,1);
  overflow:hidden;
  height:fit-content;
  margin-top:-4rem;
  color:rgba(34,34,34,1);
  padding-top:5rem;
  padding-left:20vw;
  padding-right:20vw;
  background-image:url("../img/bg/onas.jpg");
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position: right;
}

#onas h2 {
  text-align:right;
  padding-right:calc(30vw - 18rem);
  margin-top:0rem;
  margin-bottom:4rem;
  font-size:calc(3 * var(--unit) );
  transform:rotate(-1deg);
}

#onas article {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:5rem;
}

#onas p {
  width:calc(40 * var(--unit));
  max-width:90vw;
  font-size:calc(1 * var(--unit));
  text-shadow:1px 2px 2px rgb(255,255,255)
}

#muzycy {
  background:rgba(255,255,255,1);

}

#muzycy h2 {
  text-align:center;
  font-size:calc(3 * var(--unit) );
  background:rgba(255,255,255,1);
  padding-bottom:4.5rem;
  padding-top:5rem;
  padding-left:0vw;
  transform:rotate(1deg);
  color:rgb(34,34,34);
  width:90vw;
}

#muzycy article {
  background:rgb(34,34,34);
  margin-top:-4rem;
  padding-top:2rem;
  display:flex;
  flex-direction: column;
  align-items:center;
  padding-bottom:3rem;
}

#muzycy h3 {
  font-size:calc(2 * var(--unit) );
}

#muzycy p {
  font-size:var(--unit);
  text-shadow:1px 2px 2px rgb(0,0,0);
}

div.muzyk {
  position:relative;
  width:calc(50 * var(--unit) );
  text-shadow:-1px 1px 2px rgba(0,0,0,1);
  z-index:2;
  opacity:0;
  transition:0.3s;
  animation-timing-function: ease-in-out;
}

div.muzyk img:nth-of-type(1) {
  transition:0.3s;
  animation-timing-function: ease-in-out;
}

div.muzyk img:nth-of-type(2) {
  transition:0.4s;
  animation-timing-function: ease-in-out;
}

div.muzyk img:nth-of-type(3) {
  transition:0.5s;
  animation-timing-function: ease-in-out;
}

div.muzyk p, div.muzyk article {
  transition:0.5s;
  animation-timing-function: ease-in-out;
}

div.muzyk h3 {
  transition:0.6s;
  animation-timing-function: ease-in-out;
}

div.muzyk ul, div.muzyk ol {
  transition:0.9s;
  animation-timing-function: ease-in-out;
  border-radius:0 0.5vmin;
}


div.muzyk.widoczny {
  opacity:1;
}

div.muzyk:nth-of-type(2n-1) {
  margin-left:calc(-5 * var(--unit) );
  transform:rotate(-1deg);
}

div.muzyk:nth-of-type(2n) {
  margin-left:calc(5 * var(--unit) );
  transform:rotate(1deg);
}

div.muzyk ul {
  position:absolute;
  top:calc(29 * var(--unit) );
  display:flex;
  list-style-type:none;
  background:white;
  width:calc(50 * var(--unit) );
  z-index:4;
  padding:calc(0.3 * var(--unit) ) 0;
}

#lukasz {
  margin-top:calc(0 * var(--unit) );
  height: calc(31 * var(--unit) );
}


#lukasz img:nth-of-type(1) {
  width:calc(20 * var(--unit) );
  position:absolute;
  top:calc(-1 * var(--unit) );
  left:0;
  z-index:2;
  translate:-10vw -1vh;
  rotate:5deg;
}

#lukasz img:nth-of-type(2) {
  width:calc(20 * var(--unit) );
  position:absolute;
  top:calc(17 * var(--unit) );
  left:calc(20 * var(--unit) );
  z-index:2;
  translate:-10vw 3vh;
  rotate:-3deg;
}

#lukasz img:nth-of-type(3) {
  width:calc(10 * var(--unit) );
  position:absolute;
  top:calc(14 * var(--unit) );
  left:calc(39 * var(--unit) );
  z-index:2;
  translate:10vw -1vh;
  rotate:2deg;
}

#lukasz h3 {
  position:absolute;
  top:calc(5 * var(--unit) );
  right:calc(3 * var(--unit) );
  text-align:right;
  translate:2vw -10vh;
  rotate:-2deg;
}

#lukasz p {
  width:calc(32 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(8 * var(--unit) );
  left:calc(17 * var(--unit) );
  z-index:3;
}

#lukasz ul {
  top:calc(29 * var(--unit) );
  background: rgb(189,34,34);
  box-shadow:0 calc(0.5 * var(--unit) ) 0 rgba(62,34,34);
}

#lukasz.widoczny {
  margin-top:calc(0 * var(--unit) );
  height: calc(31 * var(--unit) );
}


#lukasz.widoczny h3, #lukasz.widoczny img, #lukasz.widoczny p, #lukasz.widoczny ul {
  translate:0 0;
  rotate:0deg;
}

#adam {
  margin-top: calc(1 * var(--unit) );
  height: calc(28 * var(--unit) );
}

#adam img:nth-of-type(1) {
  width:calc(21.5 * var(--unit) );
  position:absolute;
  top:0;
  right:calc(-1 * var(--unit) );
  z-index:2;
  translate:-10vw 3vh;
  rotate:-3deg;
}


#adam img:nth-of-type(2) {
  width:calc(15 * var(--unit) );
  position:absolute;
  top:calc(15 * var(--unit) );
  left:calc(1 * var(--unit) );
  z-index:2;
  translate:2vw -3vh;
  rotate:3deg;
}

#adam img:nth-of-type(3) {
  width:calc(8 * var(--unit) );
  position:absolute;
  top:calc(14 * var(--unit) );
  left:calc(19 * var(--unit) );
  z-index:2;
  translate:-1vw 5vh;
  rotate:-3deg;
}

#adam h3 {
  position:absolute;
  top:calc(2 * var(--unit) );
  left:calc(3 * var(--unit) );
  text-align:right;
  translate:-5vw 4vh;
  rotate:-3deg;
}

#adam p {
  width:calc(31 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(5 * var(--unit) );
  left:0;
  z-index:3;
  translate:-20vw -1vh;
  rotate:-4deg;
}

#adam ul {
  top:calc(26 * var(--unit) );
  background: rgb(85,127,98);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(46,85,63);
  translate:1vw 3vh;
  rotate:-3deg;
}

#adam.widoczny h3, #adam.widoczny img, #adam.widoczny p, #adam.widoczny ul {
  translate:0 0;
  rotate:0deg;
}

#wojtek {
  margin-top: calc(2 * var(--unit) );
  height: calc(30 * var(--unit) );
}

#wojtek img:nth-of-type(1) {
  width:calc(20 * var(--unit) );
  position:absolute;
  top:calc(14 * var(--unit) );
  left:calc(19 * var(--unit) );
  z-index:2;
  translate:-10vw 5vh;
  rotate:-3deg;
}

#wojtek img:nth-of-type(2) {
  width:calc(20 * var(--unit) );
  position:absolute;
  top:0rem;
  left:0rem;
  z-index:2;
  translate:3vw 20vh;
  rotate:-15deg;
}

#wojtek img:nth-of-type(3) {
  width:calc(13 * var(--unit) );
  position:absolute;
  top:calc(15 * var(--unit) );
  left:calc(39 * var(--unit) );
  z-index:2;
  translate:3vw -20vh;
  rotate:-15deg;
}

#wojtek h3 {
  position:absolute;
  top:calc(2 * var(--unit) );
  left:calc(21 * var(--unit) );
  text-align:right;
  translate:13vw 3vh;
  rotate:-deg;
}

#wojtek p {
  width:calc(31 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(5 * var(--unit) );
  left:calc(20 * var(--unit) );
  z-index:3;
  translate:-5vw 3vh;
  rotate:-7deg;
}

#wojtek ul {
  top:calc(28 * var(--unit) );
  background: rgb(253,89,34);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(85,34,34);
  translate:1vw -3vh;
  rotate:5deg;
}

#wojtek.widoczny h3, #wojtek.widoczny img, #wojtek.widoczny p, #wojtek.widoczny ul {
  translate:0 0;
  rotate:0deg;
}

#adi {
  margin-top: calc(2 * var(--unit) );
  height: calc(28 * var(--unit) );
}

#adi img:nth-of-type(1) {
  width:calc(17 * var(--unit) );
  position:absolute;
  top:0rem;
  right:0;
  z-index:2;
  translate:-4vw 15vh;
  rotate:-10deg;
}

#adi img:nth-of-type(2) {
  width:calc(19 * var(--unit) );
  position:absolute;
  top:calc(11 * var(--unit) );
  left:0rem;
  z-index:2;
  translate:-13vw 10vh;
  rotate:-15deg;
}

#adi img:nth-of-type(3) {
  width:calc(11 * var(--unit) );
  position:absolute;
  top:calc(14 * var(--unit) );
  left:calc(20 * var(--unit) );
  z-index:2;
  translate:3vw -20vh;
  rotate:25deg;
}

#adi h3 {
  position:absolute;
  top:calc(2 * var(--unit) );
  left:calc(5 * var(--unit) );
  text-align:right;
  translate:3vw 10vh;
  rotate:-15deg;
}

#adi p {
  width:calc(32 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(5 * var(--unit) );
  left:0rem;
  z-index:3;
  translate:-5vw 20vh;
  rotate:-2deg;
}

#adi ul {
  top:calc(26 * var(--unit) );
  background: rgb(34,186,196);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(34,113,113);
  translate:3vw -20vh;
  rotate:-5deg;
}

#adi.widoczny h3, #adi.widoczny img, #adi.widoczny p, #adi.widoczny ul {
  translate:0 0;
  rotate:0deg;
}

#em {
  margin-top: calc(2 * var(--unit) );
  height: calc(28 * var(--unit) );
}

#em img:nth-of-type(1) {
  width:calc(14 * var(--unit) );
  position:absolute;
  top:0rem;
  left:calc(3 * var(--unit) );
  z-index:2;
  translate:3vw -20vh;
  rotate:-5deg;
}

#em img:nth-of-type(2) {
  width:calc(21 * var(--unit) );
  position:absolute;
  top:calc(15 * var(--unit) );
  left:calc(19 * var(--unit) );
  z-index:2;
  translate:-3vw -5vh;
  rotate:30deg;
}

#em img:nth-of-type(3) {
  width:calc(9 * var(--unit) );
  position:absolute;
  top:calc(15 * var(--unit) );
  left:calc(39 * var(--unit) );
  z-index:2;
  translate:-13vw -20vh;
  rotate:5deg;
}

#em h3 {
  position:absolute;
  top:calc(2 * var(--unit) );
  right:calc(5 * var(--unit) );
  text-align:right;
  translate:-6vw -2vh;
  rotate:-57eg;
}

#em p {
  width:calc(33 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(5 * var(--unit) );
  left:calc(18 * var(--unit) );
  z-index:3;
  translate:3vw 0vh;
  rotate:-5deg;
}

#em ul {
  top:calc(26 * var(--unit) );
  background: rgb(175,124,101);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(119,56,34);
  translate:2vw -10vh;
  rotate:5deg;
}

#em.widoczny h3, #em.widoczny img, #em.widoczny p, #em.widoczny ul {
  translate:0 0;
  rotate:0deg;
}

#kamil {
  margin-top: calc(2 * var(--unit) );
  height: calc(33 * var(--unit) );
}

#kamil img:nth-of-type(3) {
  width:calc(22 * var(--unit) );
  position:absolute;
  top:0rem;
  right:calc(2 * var(--unit) );
  z-index:2;
  translate:-2vw -5vh;
  rotate:3deg;
}

#kamil img:nth-of-type(2) {
  width:calc(22 * var(--unit) );
  position:absolute;
  top:calc(20 * var(--unit) );
  left:0rem;
  z-index:2;
  translate:1vw 4vh;
  rotate:-5deg;
}

#kamil img:nth-of-type(1) {
  width:calc(25 * var(--unit) );
  position:absolute;
  top:calc(10 * var(--unit) );
  left:calc(23 * var(--unit) );
  z-index:2;
  translate:-10vw 3vh;
  rotate:11deg;
}

#kamil h3 {
  position:absolute;
  top:calc(2 * var(--unit) );
  left:calc(1 * var(--unit) );
  text-align:right;
  translate:2vw 10vh;
  rotate:8deg;
}

#kamil p {
  width:calc(27 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(5 * var(--unit) );
  left:0rem;
  z-index:3;
  translate:2vw -1vh;
  rotate:-5deg;
}

#kamil ul {
  top:calc(31 * var(--unit) );
  background: rgb(112,120,195);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(34,35,58);
  translate:3vw -2vh;
  rotate:12deg;
}

#kamil.widoczny h3, #kamil.widoczny img, #kamil.widoczny p, #kamil.widoczny ul {
  translate:0 0;
  rotate:0deg;
}


#tosia {
  margin-top: calc(2 * var(--unit) );
  height: calc(34 * var(--unit) );
}

#tosia img:nth-of-type(1) {
  width:calc(22 * var(--unit) );
  position:absolute;
  top:calc(-1 * var(--unit) );
  left:0;
  z-index:2;
  translate:12vw -3vh;
  rotate:17deg;
}

#tosia img:nth-of-type(2) {
  width:calc(10 * var(--unit) );
  position:absolute;
  top:calc(22 * var(--unit) );
  left:calc(20 * var(--unit) );
  z-index:2;
  translate:20vw -1vh;
  rotate:5deg;
}

#tosia img:nth-of-type(3) {
  width:calc(14 * var(--unit) );
  position:absolute;
  top:calc(23 * var(--unit) );
  left:calc(34 * var(--unit) );
  z-index:2;
  translate:2vw -20vh;
  rotate:-5deg;
}

#tosia h3 {
  position:absolute;
  top:calc(1 * var(--unit) );
  right:calc(2 * var(--unit) );
  text-align:right;
  translate:7vw -1vh;
  rotate:-8deg;
}

#tosia p {
  width:calc(32 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(4 * var(--unit) );
  left:calc(19 * var(--unit) );
  z-index:3;
  translate:-12vw 1vh;
  rotate:5deg;
}

#tosia ul {
  top:calc(32 * var(--unit) );
  background: rgb(122,37,53);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(55,39,42);
  translate:2vw 10vh;
  rotate:-5deg;
}

#tosia.widoczny h3, #tosia.widoczny img, #tosia.widoczny p, #tosia.widoczny ul {
  translate:0 0;
  rotate:0deg;
}

#justyna {
   margin-top: calc(2 * var(--unit) );
   height: calc(31 * var(--unit) );
}

#justyna img:nth-of-type(1) {
  width:calc(20 * var(--unit) );
  position:absolute;
  top:0rem;
  right:0;
  z-index:2;
  translate:3vw 11vh;
  rotate:-5deg;
}

#justyna img:nth-of-type(2) {
  width:calc(10 * var(--unit) );
  position:absolute;
  top:calc(14 * var(--unit) );
  left:0rem;
  z-index:2;
  translate:52vw 10vh;
  rotate:25deg;
}

#justyna img:nth-of-type(3) {
  width:calc(23 * var(--unit) );
  position:absolute;
  top:calc(15 * var(--unit) );
  left:calc(9 * var(--unit) );
  z-index:1;
  translate:2vw -7vh;
  rotate:-3deg;
}

#justyna h3 {
  position:absolute;
  top:calc(2 * var(--unit) );
  left:calc(5 * var(--unit) );
  text-align:right;
  translate:-2vw 10vh;
  rotate:-5deg;
}

#justyna p {
  width:calc(32 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(5 * var(--unit) );
  left:0rem;
  z-index:3;
  translate:15vw 10vh;
  rotate:-5deg;
}

#justyna ul {
  top:calc(28 * var(--unit) );
  background: rgb(108,52,137);
  box-shadow:0 calc(0.5 * var(--unit) ) rgba(41,34,56);
  translate:1vw -10vh;
  rotate:15deg;
}

#justyna.widoczny h3, #justyna.widoczny img, #justyna.widoczny p, #justyna.widoczny ul {
  translate:0 0;
  rotate:0deg;
}


#pozostali {
   margin-top: calc(2 * var(--unit) );
   height: calc(31 * var(--unit) );
   width:calc(50 * var(--unit) );
}

#pozostali img {
  width:calc(50 * var(--unit) );
  position:absolute;
  top:0rem;
  left:0;
  right:0;
  z-index:2;
  translate:3vw -2vh;
  rotate:4deg;
}

#pozostali h3 {
  position:absolute;
  width:calc(40 * var(--unit) );
  top:calc(7* var(--unit) );
  left:0;
  text-align:center;
  translate:-2vw 10vh;
  rotate:-5deg;
  z-index:3;
}

#pozostali article {
  width:calc(40 * var(--unit) );
  text-align:justify;
  position:absolute;
  top:calc(13 * var(--unit) );
  left:calc(2 * var(--unit) );
  z-index:3;
  translate:-15vw 10vh;
  background: none;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}

#pozostali p {
  text-align:justify;
  z-index:3;
  translate:15vw 10vh;
  rotate:-5deg;
  font-size:calc(1.2 * var(--unit) );
}

#pozostali ol {
  z-index:3;
  font-size:calc(1.2 * var(--unit) );
  margin-left:calc(3 * var(--unit) );
  list-style-type: disc;
  line-height: 150%;
  translate:2vw -10vh;
  rotate:17deg;
}

#pozostali.widoczny * {
  translate:0 0;
  rotate:0deg;
}

#koncerty {
  background:rgb(255,255,255);
  height:fit-content;
  overflow:hidden;
  padding:4rem 0;
  margin-top:-3em;
  background-image:url("../img/graffiti.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

#koncerty img {
  width:calc(22 * var(--unit) );
  display:block;
  float:left;
  margin-left:calc(5 * var(--unit) );
}


#koncerty h2 {
  text-align:left;
  font-size:calc(2 * var(--unit) );
  margin-bottom:calc(1.5 * var(--unit) );
  padding-left:calc(4.8 * var(--unit) );
  rotate:-7.3deg;
  color:rgb(34,34,34);
  z-index:5;
}


#koncerty>div {
  display:flex;
  flex-direction:column;
  margin-top:-5rem;
}

#koncerty > div > div {
  opacity:0.7;
  rotate:-3deg;
  margin:0 calc(1 * var(--unit) );
  padding:calc(1 * var(--unit) );
  z-index:14;
  color:black;
  width:calc(32 * var(--unit) );
  box-sizing:border-box;
  transition:0.5s;
  animation-timing-function: ease-in-out;
  width:fit-content;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "kalendarz nazwa"
    "kalendarz miejsce"
  ;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:rgba(255,255,255,0);
}

#koncerty > div > div:hover {
  box-shadow:-0.2rem -0.25rem 0 rgb(253,74,67), 0.2rem 0.4rem 0 rgb(56,199,181),  0.4rem -0.05rem 0 rgb(255,235,132);
  opacity:1;
  padding-left:2rem;
  background:rgba(255,255,255,0.8);
}

#koncerty > div > div:hover a {
  text-shadow:-0.1rem -0.05rem 0 rgb(253,74,67), 0.1rem 0.02rem 0 rgb(56,199,181),  0.2rem -0.05rem 0 rgb(255,235,132);
}


#koncerty > div > div:hover  > div  {
  box-shadow:  0rem 0rem 1.5rem rgba(0,0,0,0.5);
}


#koncerty a {
  font-size:calc(1.5 * var(--unit) );
  font-family:hfs, Helvetica, sans-serif;
  text-decoration:none;
  color:rgba(34,34,34,1);
  transition:0.3s;
  grid-area: nazwa;
}



#koncerty > div > div > div {
  width:fit-content;
  padding:calc(0.3 * var(--unit) );
  float:left;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:  0rem 0rem 1rem rgba(0,0,0,0.2);
  margin-right:calc(1 * var(--unit) );
  grid-area: kalendarz;
  background:rgb(255,255,255);
  color:rgb(0,0,0);
    transition:0.4s;
}

#koncerty > div > div > div span:nth-last-of-type(2) {
  font-size:calc(2 * var(--unit) );
  padding:calc(0.5 * var(--unit) );
  font-weight:bold;
}

#koncerty > div > div > div span:nth-last-of-type(3) {
  background:rgb(253,74,67);
  padding:calc(0.2 * var(--unit) ) calc(1 * var(--unit) );
  color:rgb(255,255,255);
  font-weight:bold;
}

#koncerty > div > div > span {
  float:left;
  grid-area: miejsce;
  font-size:calc(1 * var(--unit) );
}

#wideo {
  display:flex;
  flex-direction: column;
  align-items:center;
  scroll-margin-top: 8rem;
  
}

#wideo > div {
  display:flex;
  margin-left:5vw;
  overflow:hidden;
  rotate:2deg;
  margin-bottom:min(4vh, 4rem);
}

#wideo > div > div {
  display:flex;
  flex-direction:column;
  align-items:center;
}

#wideo .wideo {
  width:min(30vw, 30rem);
  display:flex;
  flex-direction:column;
  margin:min(3vw, 3rem) min(4vw, 4rem);
  
}

#wideo > div > div:nth-of-type(1) .wideo:nth-of-type(2n),  #wideo > div > div:nth-of-type(2) .wideo:nth-of-type(2n-1){
  rotate:-2deg;
}

#wideo .wideo a {
  display:block;
  position:relative;
  box-shadow:-0.1rem -0.15rem 0 rgba(253,74,67), 0.1rem 0.2rem 0 rgb(56,199,181);
  margin-bottom:min(0.3vw, 0.3rem);  
}

#wideo .wideo a img {
  width:min(30vw, 30rem);
  opacity:0.5;
  transition:0.5s; 
}

#wideo .wideo a:hover img {
  opacity:1;
}

#wideo .wideo a:hover {
  animation-name: box-glow;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#wideo .wideo a span {
  position:absolute;
  bottom:min(1vw, 1rem);
  left:1rem;
  color:rgb(255,255,255);
  font-size:min(2vw, 2rem);
  text-shadow:0.1rem 0.1rem 0 rgba(0,0,0,0.7);
}

#wideo h2 {
  animation-name: glow;
  font-size:3rem;
  margin-bottom:min(3vw, 3rem);
  rotate:2deg;
}

#wideo h3 {
  font-size:min(2vw, 2rem);
  margin-bottom:min(1vw, 1rem);
  rotate:1deg;
  padding-top:1rem;
  text-shadow:0.2rem 0.3rem 0 rgb(0,0,0);
}

#wideo div > div:hover h3 {
  animation-name: glow;
}

#wideo div:nth-of-type(2) h3 {
  rotate:-3deg;
}

#kontakt {
  background:rgba(255,255,255,1);
  margin-top:-3rem;
  padding-top:5rem;
  padding-bottom:5rem;
  min-height:10rem;
}

#kontakt h2 {
  text-align:center;
  font-size:calc(3 * var(--unit) );
  padding-bottom:4.5rem;
  transform:rotate(1deg);
  color:rgb(34,34,34);
  width:90vw;
  rotate:-2deg;
}

#kontakt ul {
  display:flex;
  width:90vw;
  align-items:center;
  justify-content: space-around;
}

#kontakt ul img {
  height:10vw;
  filter:brightness(0%);
  transition:0.2s;
  opacity:0.4;
}

#kontakt a:hover img {
  filter:brightness(100%);
  opacity:1;
}