/* Styl dla ekranów o szerokości 800px i więcej */
@media screen and (min-width: 800px) {


html {
    line-height: 1; 
    scroll-behavior: smooth;}
body {
    background-image: url('img/bg_04-02.jpg'); /* Backround Source: Generated by AI Copilot Microsoft   */
    background-attachment: fixed;
    font-family: "Unica One";
    font-size: 1.5em;
    text-shadow: 0 1px 0 white; }

#maindiv {
width: 950px;
margin:auto;
background-color: rgb(255, 255, 254);
}

/* --- EFFEKT MENU ----*/

.nav {
    background-color: rgb(235, 225, 225);
    text-align: center;
    overflow: hidden;
    margin: 1em auto;
    width: 950px;
    height: 55px;
    position: relative;
    position: fixed; }
    .nav a {
      display: block;
      position: relative;
      float: left;
      padding: 1em 0 2em;
      width: 25%;
      text-decoration: none;
      color: #393939;
      -webkit-transition: .7s;
      -moz-transition: .7s;
      -o-transition: .7s;
      -ms-transition: .7s;
      transition: .7s; }
      
.nav a:hover {
        color: #c6342e; }
        /* Tlo paska nawigacji po najechaniu mysza */
.nav:hover {
background-color: #ffffff;
}

.effect {
    position: absolute;
    left: -12.5%;
    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    -ms-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out; }
  
    .nav a:nth-child(1):hover ~ .effect {
      left: 12.5%; }
    .nav a:nth-child(2):hover ~ .effect {
      left: 37.5%; }
    .nav a:nth-child(3):hover ~ .effect {
      left: 62.5%; }
    .nav a:nth-child(4):hover ~ .effect {
      left: 87.5%; }
    
/* ----- line example -----*/

.ph-line-nav .effect {
    width: 90px;
    height: 2px;
    bottom: 36px;
    background: #c6342e;
    box-shadow: 0 1px 0 rgb(246, 3, 189); 
    margin-left:-45px;
  }

.parallax {
    /* Ustawienie podstawowej szerokości bloku div */
    width: 950px;
   HEIGHT: 300px;
    /* Utworzenie efektu paralaksy */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.divText {
    font-family: "Unica One";
    font-size:large;
}

/* Ustawienie obrazów dla poszczególnych bloków div */
#div1 {background-image: url('img/image1.jpeg');
    background-size: cover;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}     
#div3 {background-image: url('img/obraz2.jpg');
    background-size: cover;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
#div4 {background-image: url('img/div4.jpeg');
     background-size: cover;
     width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
#div5 {background-image: url('img/div5.jpg');
        background-size: cover;
        width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;}

#div5_end{background-image: url('img/div5.jpg');
        background-size: cover;
        width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;}

/* USTAWIENIE OBOK SDIEBIE DIV KONTAKT */
.kontakt {
  display:flex;
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
  
}

.RozmieszczenieTekstu {
  display: inline-flex;
  /*border: 1px solid rgb(8, 8, 8); */
  padding: 1rem 1rem;
  vertical-align: middle;
  width: 40%;
  font-family: "Unica One";
 }
 .RozmieszczenieTekstu a {
  text-decoration: none;
 }

.footer{
    font-family: "Unica One";
    /*position: sticky;*/
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(235, 225, 225);
    color: rgb(1, 1, 1);
    text-align: center;
    padding: 1px 0;
    font-size: small;
    justify-content: space-between;
}
.footer p {
    flex: 1;
    margin: 1px;
    padding: 1px;
    border: 0px solid black;
} 
.footer:hover{
  background-color: rgb(242, 247, 247);
}
    
     }     /* zakonczenie stylu dla szerokosci media screen powyzej 800px */

/* Styl dla ekranów o szerokości poniżej 800px */


/* @media screen and (max-width: 799px) {
  body {
    background-color: lightcoral;
  }
   Dodaj tutaj więcej stylów */