:root {
    --fontgara: 'EB Garamond', sans-serif;
    --fontmont: 'Montserrat', sans-serif;
    --kolorluziowy: #E66B4C;
    /* --kolorzielony: #70A9A1; */
    --kolorzielony: #29D9CA;
    
    --kolorbordowy: #3C1642;
    --kolorzolty: #FFEDA8;
    --zlamanybialy: #FFFCDF;
    --szerokosc: 992px;
    --fontsize: 24px;
}

:focus {
  outline: 0;
}

a {
  outline: none;
  text-decoration: none;
}

a, img {
  border: 0;
}

button {
  cursor: pointer;
}

/* *** GLOBAL *** */
.container {
  padding-left: 30px;
  padding-right: 30px;
  max-width: var(--szerokosc);
}

.page-transition {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.page-transition.loaded {
    opacity: 1;
}

body {
  font-family: var(--fontgara);
  font-weight: 300;
  font-style: normal;
  font-size: var(--fontsize);
}

body.home {
  font-family: var(--fontgara);
  background-color: var(--kolorbordowy);
  color: var(--kolorzolty);
}

header.home {
  display:block;
  position:sticky;
  top: 0;
  width: 100%;
  height: 76px;
  background-color: var(--kolorzielony);
  z-index: 2;
  box-shadow: black 0 0 10px;
}

footer.home {
  background-color: var(--kolorzielony);
}

body.page {
  background-color: var(--kolorzielony);
  color: var(--kolorzolty);
}

header.page {
  display:block;
  position:sticky;
  top: 0;
  width: 100%;
  height: 76px;
  background-color: var(--kolorbordowy);  
  z-index: 2;
  box-shadow: black 0 0 10px;
}

footer.page {
  background-color: var(--kolorbordowy);  
}

.trescstrony {
  padding-top: 1px;
}

.content {
  display: block;
  
  margin: auto;
}

.logopage {
  display: block;
  position: relative;
  top: 25px;
  z-index: 3;
  height: 50px;
  margin: auto;
  align-items: center;
  text-align: center;
  
}

.logopage img {
  max-height: 120px;
  width: auto;
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.9));
}

footer {
  width: 100%;
  min-height: 120px;
}

        /* Hamburger od czata */
        .hamburger {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1200;
            background: none;
            border: none;
            cursor: pointer;
        }

        .icon {
            display: block;
        }

        .icon-close {
            display: none;
        }

        .hamburger.active .icon-hamburger {
            display: none;
        }

        .hamburger.active .icon-close {
            display: block;
        }

        .menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .menu-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .side-menu {
            position: fixed;
            top: 80px;
            right: 0;
            width: 280px;
            height: calc(100vh - 80px);
            background: rgba(255, 237, 168, 0.7);  /* kolorziolty */
            z-index: 1100;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            padding: 80px 20px 20px;
            border-radius: 10px 0 0 10px;
        }

        .side-menu.active {
            transform: translateX(0);
        }

        .side-menu li {
          list-style-type: none;
          margin-bottom: 10px;
        }
        .side-menu li a {
          outline: none;
          text-decoration: none;
          font-family: var(--fontmont);
          font-weight: 500;
          color: var(--kolorbordowy);
          text-transform: uppercase;
        }

        .side-menu li a:hover {
          font-weight: 800;
          color: var(--kolorbordowy);
        }


/* Sekcja kontenerów */
.zielony {
  background-color: var(--kolorzielony);
  color: var(--kolorzolty);
}

.czerwony {
  background-color: var(--kolorbordowy);
  color: var(--kolorzolty); 
}
img {
  max-width: 80vw;
}

        /* Sekcja pozycji */
        .heading {
          display:block;
          width: 100%;
          text-align: center;
          font-size: 24px;
        }
        .centered {
          width: 100%;
          text-align: center;
        }

/* Sekcja kolorów */

.shadowed {
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.5));
}

.footermenuitem {
  color: var(--kolorzolty);
  text-decoration:none;
}

        /* Sekcja Fontów  */
        h1, h2, h3, h4, h5 {
          font-family: var(--fontmont);
          font-optical-sizing: auto;
          font-weight: 500;
          font-style: normal;
          color: var(--kolorluziowy);
          letter-spacing: 3px;
          text-transform: uppercase;
        }

        .heading {
          font-family: var(--fontmont);
          font-optical-sizing: auto;
          font-weight: 500;
          font-style: normal;
          color: var(--kolorluziowy);
          font-size: var(--fontsize);
        }


/* GŁÓWNA */
.mainblogitem {min-height: 100px; border: solid 0px black; text-align: center;border-radius: 0;padding: 0;}
.mainpageblogpix {width: 100%; height: auto; border-radius: 15px;}
.mainpageblogtext {
  color: #FFFCDF;
}
/* BLOG */
.newslistimage {width: 100%; height: auto; border-radius: 10px; border: solid 9px var(--kolorzolty);}
.newsimage {width: 100%; height: auto; border-radius: 9px; border: solid 9px var(--kolorzolty);}

.blogh2 {font-size: 40px;text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
.blogcontent {display: block;}
.blogcontent .starter,.news .starter {font-size: 32px; line-height: 120%;color: var(--kolorzolty)}
.blogcontent .filler, .news .filler {font-size: 24px; line-height: 140%;}
.blogcontent .newsbuttonmeer {color: #FC9AA7; font-size: 32px; text-transform: uppercase;}
.blogreadmore {width: 100%; display: flex; flex-direction: row;justify-content: end;}
.blogreadmore a, .blogback a {color: var(--kolorluziowy);font-family: var(--fontmont);font-weight: 600;text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}

/* audio */
  audio { width: 100%;}
  audio::-webkit-media-controls-panel {background-color:#a8a75a}
  audio::-webkit-media-controls-mute-button {color: white;}
  audio::-webkit-media-controls-play-button {}
  audio::-webkit-media-controls-timeline-container {}
  audio::-webkit-media-controls-current-time-display {}
  audio::-webkit-media-controls-time-remaining-display {}
  audio::-webkit-media-controls-timeline {}
  audio::-webkit-media-controls-volume-slider-container {}
  audio::-webkit-media-controls-volume-slider {}
  audio::-webkit-media-controls-seek-back-button {}
  audio::-webkit-media-controls-seek-forward-button {}
  audio::-webkit-media-controls-fullscreen-button {}
  audio::-webkit-media-controls-rewind-button {}
  audio::-webkit-media-controls-return-to-realtime-button {}
  audio::-webkit-media-controls-toggle-closed-captions-button {}

/* zoom */
.zoom {
    transition: transform .2s; /* Animation */
  }
  
  .zoom:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

/* GALERIE ZDJĘCIOWE */
.images-grid {
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: center;
}
.gallery-item {margin: 0px;}
.gallery-item img {
    max-width: 320px; 
    height: auto;
}
.gallery-item-2 {
    margin: 10px;
    border-radius: 10px;
}
.gallery-item-2 img {
    max-width: 300px; 
    height: auto;
}

.gallery-item-3 img {
    max-width: 520px;
    width: 90%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
    z-index: 3;
}
.gallery-item-3 a:hover {
    opacity: 0.9;
}

.gallery-item-3 span {
    display: none;
    width: 85%;
    height: 45px;
    padding: 5px 15px;
    background: #00000050;
    position:absolute;
    bottom: 15px;
    left: 20px;
    color: white;
    font-family: var(--fontface);
    font-size: normal;
    font-weight: 200;
    z-index: 4;
}

.galleryDescription {
    display: block; 
    width: 200px; 
    color: white; 
    font-size: 12px; 
    text-align: center; 
    padding-top: 6px; 
    padding-bottom: 15px;
}


.gallery-image {
    width: 250px; 
    height: 200px; 
    background-size: cover !important;
    background-position: center;
    border-radius: 10px;
    /* border: solid 2px white; */
}
.gallery-image:hover {opacity: 0.7;}

.gray {
    border: solid 1px #00000040 !important;
}
.gray .gallery-image {
    /* border: solid 8px #ffffff !important; */
}

/* TO TOP */
#totopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--holand); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 30px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #totopBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }

  .gallerytitle {
    color: var(--kolorzolty);
    position: relative;
    top: 15px;
  }

  .ikonadoc {
    height: 80px;
    width: auto;
    filter:drop-shadow(2px 2px 6px black);
  }

  .ikonadoc:hover {
    transition: all .3s ease;
    transform: scale(1.1);
  }

  .itemdescription {
    text-decoration: none;
    font-family: var(--fontgara);
    color: var(--kolorzolty);
  }

.obrazeklewy {
    float: left;
    margin-right: 25px; 
    margin-bottom: 10px;
    max-width: 35%;

  transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  /* filter: blur(2px); */
  opacity: 0.5;
  transition: 0.6s ease all;

  &:hover {
    transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

.tlokolka {
  background-image: url('/img/frontend/tlokolka.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain, cover 80%;
  
}

.tlokolkaduze {
  background-image: url('/img/frontend/tlokolkaduze.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
}

.tlokfiotki {
  background-image: url('/img/frontend/tlokfiotki.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}

.tlokfiotki2 {
  background-image: url('/img/frontend/kwiotkiGPT2.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}

.tlokfiotki3 {
  background-image: url('/img/frontend/kwiotkiGPT3.png');
  background-position: top 20px center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-attachment: fixed;
}

.brazowy {color: #422D28}
.cientekstu {text-shadow: 4px 5px 10px #626262}
.bloghead {color: var(--zlamanybialy); }