@import url('https://fonts.googleapis.com/css2?family=Marvel:ital,wght@0,400;0,700;1,400;1,700&family=WDXL+Lubrifont+JP+N&family=Zen+Dots&display=swap');

:root{
  

}

*{
  box-sizing: border-box;
  transition: 700ms;

}
html{
  scroll-behavior: smooth;
  font-family: 'Marvel', sans-serif, 'Zen Dots', sans-serif;
  max-width: 100%;
  overflow-x: hidden; 

}
body{
  background-color: #221F2E;

  background-image:
    linear-gradient(white 0.11vh, transparent 0.11vh),
    linear-gradient(90deg, white 0.11vh, transparent 0.11vh);

  background-size: 15vh 15vh;
  background-blend-mode: overlay;
}

a{
    text-decoration: none;
}

p{
  color: white;
  font-family: 'Marvel', sans-serif;
  font-size: 1.5em;
  line-height: 140%;
    
  
}

img{
    width: 100%;
    height: auto;

}

/* TYTUŁY */
h2{
  font-size:6rem ;
  text-align: center;
  text-shadow: 0vh 0.03em  #3BF295;
     
}

/* h3 do metrów */
h3{ 
font-family: 'wdxl lubrifont jp n', sans-serif;
color: #FFF;
font-family: "WDXL Lubrifont JP N";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;

}

h5{
  color: var(--zielony, #3BF295);
  font-family: Marvel;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 16.08px;
  text-transform: uppercase;
  margin: 0px;
  padding: 90px 0 50px 0;

  animation: tekst 2.5s alternate infinite;
  
}

@keyframes tekst {
  from {
    color: var(--zielony, #3BF295) 0% 0%;
  }
  to {
    color: white 0% 00%;
  }
   
}

.burger{
  display: none;
}

.zamknijX{
  display: none;
  
}

#MENU ol{
  display: none;

}

section{
  color: #5940BE;
  max-width: 1200px;
  font-family: 'Zen Dots', sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto 
}

nav{
    
  font-family: 'wdxl lubrifont jp n', sans-serif;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100%;
    
  font-size: 2em;
  position: fixed;
  z-index: 4;



}

nav ol{
  max-width: 1200px;
  width: 100%;
  display: flex;
  text-align: center;
  text-decoration: none;
  margin: 10px;
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  background-color: #221F2E;
  border:#3BF295 solid 0.11vh;
  padding: 0 100px 0 100px;
 
}

nav ol li{
  flex: 1;
  text-align: center;
  justify-content: center;
  align-content: center;
  display: block;
    
}

nav ol li a{
  padding: 10px;
  display: block;
  text-align: center;
  color: white;
  flex: 1;
}

nav img{
    width: 50px;
    height: auto;
}

.zawartosc{
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;

}



/**********************************************OBRACAJACA GLOWA*/
#sekcja1{
  padding: 138px 20px 20px;
  margin: 20px;
  max-width: 100%;
  position: relative;
}

#sekcja1 .rectangle-wrapper{
  position: relative;
  width: 800px;
  max-width: 90vw;
  height: 496px;
  margin: 0 auto 40px;
}

#sekcja1 .rectangle{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  border: 1px solid #3BF295;
}

#sekcja1 img{
  mix-blend-mode:screen;
}

#sekcja1 h1{
  font-size: 1.5em;
  letter-spacing: 22px;
  color: var(--fiolet, #5940BE);
  text-align: center;
  margin: 20px;
  
}

#sekcja1 h4{
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #3BF295;
  font-family: "Zen Dots";
  font-size: 300px;
  color: transparent;
  text-transform: uppercase;
  z-index: -1;
  position: absolute;
  transform: translate(-65%, 20%) rotate(270deg);

}

#sekcja1 .pasek{
  width: 35px;
  height: 1455px;
  position: absolute;
  right: -150px;
  top: -10px;

  border: 0.11vh solid #3BF295;

  background: linear-gradient(0deg,#5940BE,#3BF295,#5940BE);
  background-size: 100% 200%;
  animation: pasek 4s linear infinite;

}

@keyframes pasek {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% 199%;
  }
}


/*********************************************CYBERCORE*/
#sekcja2{
  background-color: #221F2E;
  padding: 0 50px 50px 50px;
  width: 100%;

  border:#3C3651 solid;
  border-width: 1px 1px 1px 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  z-index: 2;
   
}

#sekcja2 h2{
    margin: 30px;
    padding: 40px 0 0 0;        
}

#sekcja2 p{
  font-size: 1.5em;
  margin-left: 2vw;
  margin-right: 2vw;
  padding: 20PX;

}

/*********************************************HISTORY*/
#sekcja3{
    
}

#sekcja3 h2{
  margin: 30px;
  padding: 40px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
        
}

#sekcja3 .kontener-rodzic{
  display: flex;
  justify-content: space-between;
  padding: 20px;
 
}

#sekcja3 .box{
 background-color: #221F2E;
  border:#3BF295 solid 1px;
  width: 18rem;
  padding:20px;
  margin: 10px;
  margin-left: auto;
  margin-right: 0; 
  line-height: 140%;
  transition: transform 0.3s ease;
  
}

#sekcja3 .box:hover {
  transform: scale(1.3); 
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  color: #3BF295;
  background-color: #221F2E;

}

#sekcja3 .prawa{
  display: flex;
  flex: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px;
 
}

#sekcja3 h6{
  width: 10px;
  margin-left: 10px;
  color: var(--fiolet, #3BF295);
  font-family: "WDXL Lubrifont JP N";
  font-size: 45px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  
 }

#sekcja3 img{
  width: 100%;
  height: 100%;
}

#sekcja3 .foto1{
  width: 400px;
  max-width: 100%;
  height: 500px;
  background-color: #221F2E;
  border:#3C3651 solid;
  border-width: 1px 1px 1px 1px;

}  

#sekcja3 .foto2{
  width: 400px;
  max-width: 100%;
  height: 500px;
  background-color: #221F2E;
  border:#3C3651 solid;
  border-width: 1px 1px 1px 1px;

}

/**********************************************SPINOSAURUS*/
#sekcja4{

}

#sekcja4 img[alt="spino"]{
  mix-blend-mode: overlay;
  transform: translate(-75%, -93%);
  width: 5900px;
  margin: 100;
  z-index: -11;
  position: absolute;

}

#sekcja4 img[alt="spinobody"]{
  mix-blend-mode: exclusion;
  margin-top: 70px;
  margin-bottom: 20px;

}

#sekcja4 p{
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  border: 1px solid #3BF295;
  font-size: 1.5em;
  margin-left: 100px;
  margin-right: 300px; 
  padding: 20px;
  width: 500px;
  text-shadow: 2px 2px black;

}

#sekcja4 div{
  display: flex;

}

#sekcja4 .kontener{
  flex-direction: column;

}

#sekcja4 .prawa{
  flex-direction: column;

}

#sekcja4 .box{
  background-color: #221F2E;
  border:#3BF295 solid 1px;
  width: 404px;
  padding:20px;
  margin: 10px;
  margin-left: auto;
  margin-right: 0; 
  transition: transform 0.3s ease;
  
}

#sekcja4 .box:hover {
  transform: scale(1.3); 
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  background-color: #221F2E;
  color: #3BF295;

}

#sekcja4 h1{
  background-color: var(--zielony, #3BF295);
  width: 352px;
  height: 52px;
  color: var(--przykladowa, #221F2E);
  font-family: "Zen Dots";
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 16.2px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 5px;
  margin-left: 100px;
  margin-right: 300px; 
  margin-bottom: 10px;

}

#sekcja4 h2{
    margin: 30px;
    padding: 40px 0 0 0;
  
}
#sekcja4 h3{
  text-align: center;
}

#sekcja4  div.boxg{
border: 1px solid #3BF295;

padding: 40px;
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  transform: translate(0%, 245%);
  z-index: -11;
  
}

/*******************************************TRIKEEEEEE***/
#sekcja5{
    
}
#sekcja5 p{
  font-size: 1.5em;
  border: 1px solid #3BF295;
 height:auto;
  width: 404px;
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  padding: 20px;
  margin: 10px;

}


#sekcja5 h1{
  background-color: var(--zielony, #3BF295);
  width: 292px;
  height: 52px;
  color: var(--przykladowa, #221F2E);
  font-family: "Zen Dots";
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 16.2px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 5px;
  margin-left: 10px;
}

#sekcja5 h2{
    margin: 30px;
    padding: 40px 0 0 0;
        
}

#sekcja5 h3{
  display: flex;
  justify-content: center;
}

 #sekcja5 h4{
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #3BF295;
  font-family: "Zen Dots";
  font-size: 300px;
  color: transparent;
  text-transform: uppercase;
  z-index: -1;
  position: absolute;
  transform: translate(5%, 20%) rotate(270deg);
   
}

#sekcja5 h6{
  color: white;
  font-family: 'Marvel', sans-serif;
  font-size: 1.5em;
  line-height: 140%;
  text-transform: none;
  padding: 30px;
   
}

#sekcja5 div{


}

#sekcja5 .tytul{
 display: flex;

}
#sekcja5 img[alt="tricebody"]{
  mix-blend-mode: exclusion;

}
#sekcja5 img[alt="glowa"]{
  width: 700px;
  height: 700px;
  border:#3C3651 solid;
  border-width: 1px 1px 1px 1px;

}

.kontener-rodzic {
  display: flex; 
  width: 100%; 
}
#sekcja5 .box{
  background-color: #221F2E;
  border:#3BF295 solid 1px;
  width: 404px;
  padding:20px;
  margin: 10px;
  margin-top: 20px;
  margin-right: 0; 
  line-height: 140%;
  transition: transform 0.3s ease;
  
}

#sekcja5 .box:hover {
  transform: scale(1.3); 
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  background-color: #221F2E;
  color: #3BF295;

}

.lewy-panel{
  display: flex;
  flex-direction: column;
}

#sekcja5 .prawy-panel h3{
  background-color: #38efa8;
  font-family: Zen Dots;
  width: 100px ;
  height: 20px;
  margin-bottom: 0;

}

.linia {
  position: relative;
  height: 2px;
  background-color: #38efa8; 
  margin: 50px auto;
  margin-bottom: 20px;
  width: 97%; 

}
.linia::before, .linia::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #38efa8;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

/* Lewy romb */
.linia::before {
  left: -6px; 
}

/* Prawy romb */
.linia::after {
  right: -6px;
}

/**********************************************/
#sekcja6{
  position: relative;
}

#sekcja6 div{
  display: flex;

}

#sekcja6 img[alt="carnohead"]{
  mix-blend-mode: overlay;
  transform: translate(17%, -29%);
  width: 1400px;
  position: absolute;
  z-index: -1;
  overflow: hidden;

}
#sekcja6 img[alt="carnobody"]{
  mix-blend-mode: exclusion;

}

#sekcja6 .pudlo{
  display: flex;
  flex-direction: column;

}

#sekcja6 h1{
  background-color: var(--zielony, #3BF295);
  width: 302px;
  height: 52px;
  color: var(--przykladowa, #221F2E);
  font-family: "Zen Dots";
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 16.2px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 5px;
  margin-left: 10px;
  margin-top: 20px;

}

#sekcja6 h2{
  margin: 30px;
  padding: 40px 0 0 0;
     
}

#sekcja6 h6{
  color: var(--fiolet, #5940BE);
  font-family: "WDXL Lubrifont JP N";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 20.6px;
  text-transform: uppercase;
  margin-left: 10px;

}

#sekcja6 p{
  font-size: 1.5em;
  border: 1px solid #3BF295;
  height:auto ;
  width: 347px;
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  padding: 25px;
  margin: 10px;
 
}

#sekcja6 .box-kontener {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 80px;
  justify-content: space-between;

}

#sekcja6 .box{
  background-color: #221F2E;
  border: #3BF295 solid 1px;
  width: 370px;
  padding: 20px;
  margin: 0;
  transition: transform 0.3s ease;
  
}

#sekcja6 .box:hover {
  transform: scale(1.3); 
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  color: #3BF295;
  background-color: #221F2E;

}

 /**************************************************/ 
#stopka{
  font-family: 'wdxl lubrifont jp n', sans-serif;
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  background-color: #221F2E;
  height: 400px;
  padding: 50px;

  max-width: none;
  width: 100%;

  display: flex;
  justify-content: space-around;
  align-items: center;
  border:#3BF295 solid 1px;

  flex-direction: column;
  gap: 1rem;
}

#stopka img{
  width: 100px;

}

#stopka .pudlo{
  margin: 0;
}

#stopka div{
  display: flex;
  justify-content: space-around;
  margin: 50px;
 

}

#stopka .about{
  display: flex;
  flex-direction: column;

}

#stopka h6{
  color: var(--fiolet, #5940BE);
  font-family: "WDXL Lubrifont JP N";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

  text-transform: uppercase;
  margin-bottom: 20px;;

}

#stopka h5{
  color: var(--zielony, #3BF295);
  font-family: Marvel;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  align-items: left;
  line-height: 140%;
  margin: 0px;
  padding: 0;
  animation: none;

}

#stopka h5:hover{
 color: white;

}

#stopka .news{
  display: flex;
  flex-direction: column;

}

#stopka .przyciski{
  margin: 0;
}

#stopka input{
  width: 240px;
  height: 30px;
  padding: 10px 10px 10px 10px;
  background-color: var(--zielony, #3BF295);
  border: none;
  font-size: 20px;
  font-family: Marvel;

}

#stopka button{

    background-color:var(--fiolet, #5940BE);
   font-size: 20px;
    border: none;
     font-family: Marvel;
    color: white;
    width: 30%;
margin-left: 20px;
}

#stopka button:hover {
  background-color: var(--zielony, #3BF295);
  color: var(--color-braz);

}

#stopka .copyright{
  width: 100%;
 animation: inga 1.5s alternate infinite;
   font-family: Marvel;
}

@keyframes inga {
  from {
    color: var(--zielony, #3BF295);
  }
  to {
    color:  white;
  }
}   

@media (max-width: 440px){

body{
  overflow-x: hidden;
}

h1{
  font-size: 1em;
  text-align: center;
 }

h2{
  font-size: 4em;
  display: flex;
  justify-content: center;

}

 h5{
  font-size: 1rem;
  padding: 0;
  display: flex;
  justify-content: center;
  text-align: center;

 }

 div{
  display: flex;
  flex-direction: column;

 }

 .zawartosc{
    padding: 0;

 }

.section{
  max-width: 440px;    
}

#MENU ol{
  display:block;
}

.burger{
  display: block;
  background-color: none;
  color: #3BF295;  
  position: fixed;
  right: 2rem;
  top: 2rem;
  font-size: 3rem;
  cursor: pointer;
  z-index: 5;

}

.burger:hover{
  background-color: rgb(255, 255, 255);
  color:  #5940BE ;
  z-index: 10;
  display:block;
  
}

.nakladka{
  z-index: 5;
  background-color: #221F2E;
  border: 2px solid #3BF295;  ;
  color: rgb(255, 255, 255);
  position: fixed;
  right: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  opacity: .9;
  display: flex;
  justify-content: center;
  align-items: center;

}

.zamknijX{
  position: absolute;
  top: 2rem;
  right: 2rem;
  background-color: #3BF295; 
  font-size: 3rem;
  padding: .1rem 1rem 0.5rem;
  cursor: pointer;
  display:block;

}

.zamknijX:hover{
  background-color: #5940BE ;
  color: rgb(28, 236, 132);

}

.nakladka ol{
  width: 100%;
  padding: 2rem 0;

}

.nakladka ol li a{
  font-family: "WDXL Lubrifont JP N";
  background-color: #221F2E;
  color: white;
  display: block;
  text-align: center;
  text-decoration: none;
  border: 1px solid #3BF295;  ;

  font-size: 2rem;
  margin-bottom: 2vh;
  padding: 1rem;
  margin: 2rem;
  font-size: 10vw;
  display: flex;
  justify-content: center;

}

.nakladka ol li a:hover{
  background-color: #eee;
}

nav{
    display: none;

}

section{
        padding: 2rem 0;
        
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   SEKCJA1 */
#sekcja1{
  padding: 0;
}

#sekcja1 h1{
  margin-top: 90px;
  margin-bottom: 30px;
  font-size: 4.5vw;
  letter-spacing: 5vw;
  display: flex;
  justify-content: center;
  
}

#sekcja1 .rectangle-wrapper{
  width: 100%;
  margin: 0;
  height: 30vh;

}

#sekcja1 img{
  display: flex;
  justify-content: center;
  align-items: center;

}

#sekcja1 .pasek{
  top: 740px;
  position: absolute;
  right: 0;
  transform: translate(-89vw, -20vw);
  height: 90vh;

  
}

#sekcja1 h4{
  transform: translate(-50%, 20%) rotate(270deg);
  z-index: -10;

}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   SEKCJA2 */
#sekcja2{
  padding: 0;

}
#sekcja2 h2{
  display: flex;
  justify-content: center;
   font-size: 18vw;
   max-width: 100%;
}
#sekcja2 p{
  padding: 30px;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   SEKCJA3 */

#sekcja3 .lewa{
  display: flex;
  align-items: center;
  
}

#sekcja3{
  margin:20;

}

#sekcja3 .box{
  margin-left: 0;
  max-width: 100%;
 
}

#sekcja3 .box:hover {
  transform: scale(1.1); 
}

#sekcja3 h6{
  font-size: 0px;
}

#sekcja3 .foto1{
  width: 100%;
  height: 50%;

}

#sekcja3 .foto2{
  width: 100%;
  height: 50%;

}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   SEKCJA4 */
#sekcja4{
  overflow: hidden;
  position: relative;
}

#sekcja4 img[alt="spino"]{
  transform: translate(-49%, -63%) rotate(-60deg);
  width: 3000px;
  overflow: hidden;
}

#sekcja4 .box{
  margin-left: 0;

}
#sekcja4 .box:hover {
  transform: scale(1.1); 
}

#sekcja4 .kontener{
  margin-top: 20px;

}

#sekcja4 h1{
  width: 100%;
  margin: 0;
    font-size: 10vw;
  max-width: 100%;
  letter-spacing: 4vw;



}

#sekcja4 h2{
  padding: 0;
   font-size: 18vw;
   max-width: 100%;
  

}
#sekcja4 p{
  margin: 0;
  width: 100%;
  text-shadow: 2px 2px #000000;

}

#sekcja4{
  margin: 20px;
}

#sekcja4 .box{
  width: 440px;
  max-width: 100%;
}

#sekcja4 h5{
  margin-bottom: 20px;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   SEKCJA5 */
#sekcja5{
  margin: 20px;

}

#sekcja5 img[alt="glowa"]{
  max-width: 440px;
  width: 100%;
  height: 100%;

}

#sekcja5 p{
  max-width: 440px;
  width: 100%;
  height: 100%;
  margin: 0;
  text-shadow: 2px 2px #000000;

}
#sekcja5 h1{
  width: 100%;
  margin: 0;
  font-size: 10vw;
  max-width: 100%;
   letter-spacing: 5vw;

}

#sekcja5 h2{
  padding: 0;
  font-size: 18vw;
  max-width: 100%;

}

#sekcja5 h3{
  margin-bottom: 20px;
  text-align: center;

}

#sekcja5 h4{
  background-color: red;
  font-size: 0;

}

#sekcja5 .box{
  margin:0;
  margin-top: 20px;
  max-width: 100%;

}

#sekcja5 .box:hover {
    transform: scale(1.1); 
}

#sekcja5 h5{
  margin-bottom:20px ;

}

#sekcja5 .linia{
  margin-bottom: 0;

}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   SEKCJA6 */
#sekcja6 {
  margin: 20px;
  overflow-x: hidden;

}

#sekcja6 h5{
  margin-bottom: 20px;

}

#sekcja6 h6{
  display: flex;
  font-size: 20px;
  letter-spacing: 10px;
  justify-content: center;
  margin-bottom: 20px;

}

#sekcja6 h1{
  margin: 0;
    width: 100%;
  margin: 0;
    font-size: 10vw;
  max-width: 100%;


}
#sekcja6 h2{
   font-size: 18vw;
  max-width: 100%;
}

#sekcja6 img[alt="carnohead"]{
  width: 1200px;
  position: absolute;
  transform: translate(-30%, -20%);
  overflow: hidden;

}

#sekcja6 img[alt="carnobody"]{
  margin-top: 20px ;
  /* width: 900px;
  height: 380px; */
  width: 170vw;
  height: 70vw;


  transform:translate(-27%, 40%) rotate(90deg);
  overflow-x: hidden;
  margin: 20px;
  margin-right: 90px;
  align-items: center;
  justify-content: center;

}

#sekcja6 p{
  background: linear-gradient(90deg, var(--fiolet, rgba(89, 64, 190, 0.20)) 0%, var(--zielony, rgba(59, 242, 149, 0.20)) 100%);
  margin: 0;
  width: 100%;
  text-shadow: 2px 2px #000000;

}

#sekcja6 .box{
  max-width: 440px;
  width: 100%;
  margin-top: 20px;

}
#sekcja6 .box:hover {
  transform: scale(1.1); 
}
#sekcja6 .box-kontener{
  margin-top: 300px;
  align-items: center;


}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   STOPKA */
#stopka{
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 1rem;

}
#stopka .copyright{
  align-items: center;
}
#stopka .pudlo{
width: 100%;
}
#stopka .pudlo div{
  display: flex;
  margin-left: 0;

}

#stopka .about{
  text-align: left;
  justify-content: left;

}

#stopka h5{
  text-align: left;
  justify-content: left;

}
#stopka h6{
  font-size: 12vw;
}
#stopka .przyciski{
  max-width: 100%;
}
#stopka .text{
 
}
#stopka input{
  max-width: 100%;
}
#stopka button{
  margin: 0;
  margin-top: 10px;
  display: block;
  max-width: 100%;
  width: 30vw;
}
#stopka .icon{


}
}