@font-face {
   font-family: 'Proxima';
   src: url('../fonts/Proxima.woff2') format('opentype');
   font-display: swap;
}
@font-face {
   font-family: 'ds';
   src: url('../fonts/HandveticaNeue-Regular.woff2') format('opentype');
   font-display: swap;
}

        body { 
            padding-top: 180px; /* Ustawiono padding-top aby uwzględnić wysokość paska SCENA */
 	    background-color: black; 
        }

        .top-bar { 
/*           margin: 0;   */
/*           height: 100vh; */  /* Zapewnia, że tło będzie rozciągać się na całą wysokość ekranu */
/*           background-size: 1000px; */
 	    background-color: black; 
            background-image: url('https://www.duzascena.pl/media/ds.avif');
            filter: brightness(1.05);
            background-size: auto; /* Obraz będzie rozciągnięty na całe tło */
            background-position: center; /* Wyśrodkowanie obrazu na tle */
            background-repeat: no-repeat; /* Zapobieganie powtarzaniu obrazu */
            color: black; 
            text-align: center; 
            padding: 17px;
            font-size: 52px; 
            text-shadow: 0 0 12px #fff;
	    font-weight: 700;
            position: fixed; 
            width: 100%; 
            top: 0; 
            z-index: 1050; 
            transition: top 0.3s; 
        }

        .navbar { 
	    height: 60px;
            transition: top 0.3s; 
            margin-top: 116px; /* Ustalamy margines dla paska nawigacji */
            padding: 0 0;
        }
        .hidden-navbar { 
            top: -120px; 
        }


	.card {
/* zamiast tego sa zdjecia odrazu w formacie 800pix 
    width: 70%;
    height: 70%;
*/
    	}


        .right-column { 
            background-color: #f8f9fa; 
            padding: 20px; 
            border-radius: 8px; 
            height: 100%; 
        }
        .footer {
             background-color: #222;
             padding: 20px 0;
             color: white;
             text-align: center;
        }
        .custom-link {
/*            color: white; */
	    text-decoration: none;
/*            font-size: 26px;  */
	    font-size: clamp(13px, 2vw, 28px);
            position: relative;
            display: inline-block;
            padding: 0 2.5rem;
            font-family: ProximaNovaExCn_Black, Impact, "Roboto Condensed", "Arial Narrow", sans-serif;
            color: #fff;
/*            text-transform: uppercase; */
            text-shadow: 0 0 30px #fff;
       }
    
    /* Kolor red po najechaniu myszką na kategorie*/
    .custom-link:hover {
      color: red;
    }

    /* Podkreślenie w kolorze czerwonym po kliknięciu */
    .custom-link:focus, .custom-link:active {
/*      text-decoration: underline;  */
      text-decoration-color: red;
      text-decoration-thickness: 3px;
    }

/* Ustawienie szerokości obrazów, aby były bardziej elastyczne na różnych urządzeniach */
img {
    max-width: 100%;
    height: auto;
}

.image-container {
  width: 100%;   
  aspect-ratio: 16 / 13; /* Stałe proporcje np. 16:9 */
  overflow: hidden; /* Ukrycie nadmiaru */
}

 /* zmniejsza swiatlo pomiedzy H1 i H3 */
 h3 {  
 margin-bottom: -4px !important; /* zmniejsza swiatlo pomiedzy H1 i H3 */

 }
/* h3 {  letter-spacing: -1px;} */


/* text exclusive */
.media-exclusive {
    /* position:absolute; */
    /* top:5px; */
    left: 5px;
    padding: 0 .5rem;
    font-style: italic;
    font-weight: bold;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    background-color: #cf0000;
    height: auto !important;
    height: initial !important;
    width: auto !important;
    width: initial !important;
    margin: 3px;
}

    /* podkreslenie naglowka1 i 2 */
        .underline-effect {
            display: inline-block;
            color: black;
            -webkit-text-decoration:none;
            text-decoration:none;
        }
        .underline-effect:hover {
            -webkit-text-decoration:underline;
            text-decoration:underline;
        }


.icovideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="10" fill="none" /%3E%3Cpolygon points="10,8 16,12 10,16" /%3E%3C/svg%3E') no-repeat center center;
  background-size: contain;
  opacity: 0.6;
}

p {
color: white;
}

a {
color: white;
}

    .image-wrapper {
        overflow: hidden; /* Ukrywa nadmiar obrazu poza kontenerem */
        position: relative;
    }

    .zoom-effect {
        transition: transform 0.3s ease; /* Animacja transformacji */
    }

    .zoom-effect:hover {
        transform: scale(1.1); /* Powiększenie obrazu o 10% po najechaniu */
    }

    .ramka {
        border: 2px dashed #c73e9cde;
        border-radius: 20px;
        padding: 15px; /* Odstęp wewnętrzny, aby tekst i obrazki nie dotykały ramki */
    }



/* --------- MOBILE --------- */
@media (max-width: 850px) {

    body { 
    padding-top: 120px; /* Ustawiono padding-top aby uwzględnić wysokość paska SCENA */
    }

    .navbar {
        margin-top: 70px;
        height: 45px;
    }

    .navbar .custom-link {
      /*  font-size: 13px; */
        padding: 0 0.4rem;
    }

    .top-bar { /* napis DS */
     font-size: 36px;
     padding: 10px;
     filter: brightness(1.1);
     background-size: cover;
    }

    .card {
       width: 100%; 
    }

    .ramka {
        border: 1px dashed #c73e9cde;
}
/*  .col-md-8 {
    padding-top: 3rem !important;  
    }
*/    

/*  h1 {  letter-spacing: 1px;}  */

}  /* ------- END MOBILE ------*/

