:root {
	--colorGlowny: #00bfff;
	--colorNapisy: #006485;
	--colorLampa: #FFD164;
	--colorOmnie: #31C9FC;
}



* {
		margin: 0;
		padding: 0;
		outline: 0;
	}



	body {
		font-size: 20px;
		font-family: "Lato", sans-serif;
	}
	

	h1 {
		width: 100%;
		font-size: 3rem;
		padding: 1rem 0;
		background-color: var(--colorGlowny);
		color: #000;
		text-align: center;
		vertical-align: middle;
		font-weight: 400;
		font-style: normal;	
	}

	h1 a {
		color: #000;
		text-decoration: none;
	}

	main {
		width: 100%;
	}

	article {
		width: 100%;
		font-size: 2rem;
		font-family: Futura, sans-serif;
		font-weight: 400;
		font-style: normal;	
	}

	h2 {
		font-family: "montserrat", sans-serif;
		padding: 20px 5%;
	}
	
	/*napisy początkowe*/

	#poczatek {
		background-image: radial-gradient(circle at 80% 90%, var(--colorLampa), #000);

	}

	#poczatek p {
		padding-left: 5%;
	}

	p.slowo1 {
		color: #00bfff;
		font-size: clamp(22px, 15vw, 96px);
	}

	p.slowo2 {
		color: #00d4f7;
		font-size: clamp(22px, 7vw, 64px);
	}

	p.slowo3 {
		color: #00e5dc;
		font-size: clamp(22px, 15vw, 96px);
	}

	p.slowo4 {
		color: #56f2b4;
		font-size: clamp(22px, 5vw, 48px);
	}

	p.slowo5 {
		color: #adf88b;
		font-size: clamp(22px, 5vw, 48px);
	}

	p.slowo6 {
		color: #f9f871;
		font-size: clamp(22px, 10vw, 64px);
	}

	p.slowo7 {
		color: #46a6f8;
		font-size: clamp(22px, 14vw, 64px);
	}

	p.slowo8 {
		color: #728ae6;
		font-size: clamp(22px, 14vw, 72px);
	}

	p.slowo9 {
		color: #936cc9;
		font-size: clamp(22px, 15vw, 48px);
	}

	p.slowo10 {
		color: #a74aa1;
		font-size: clamp(22px, 12vw, 64px);
	}

	p.slowo11 {
		color: #7d1f7a;
		font-size: clamp(22px, 10vw, 56px);
	}

	/* O MNIE na głównej */

	#oMnie {
		background-color: var(--colorLampa);
		padding: 1rem 0;
	}

	#oMnie h2 {
		color: #7d1f7a;
		text-align: center;
	}

	#oMnie a {
		text-decoration: none;
	}

	/* o mnie podstrona */

	#tekst  {
		background-color: var(--colorLampa);
		color: #7d1f7a;
		padding: 20px 0; 
	}

	#tekst p {
		margin: 10px 5%;
	}

	/*kostki*/

	.kostki {
		width: 100%;
		padding: 10px 5%;
		display: flex;
		gap: 20px;
		align-content: space-around;

	}

	.kostki a figure {
		width: 350px;
		position: relative;
	}

	.kostki figure img {
		width: 100%;
	}

	.kostki a {
		color: #fff;
		text-decoration: none;
	}

	.kostki figure figcaption {
		position: absolute;
		top: 160px;
		left: 70px;
		font-size: clamp(1rem, 2.5vw, 2rem);
	}

	/*WYSTAWY strona główna*/

	#wystawy {
		background-color: #000;
		color: #000;
		height: 400px;
	}

	/* strony z wystawami */

	#opisPlakatu {
		text-align: center;
	}

	/*PLIKI DO POBRANIA */

	#pliki {
		background-color: #fff;
		color: #000;
	}

	

	#pliki figcaption {
		position: absolute;
		color: #fff;
		top: 170px;
		left: 60px;
		font-size: clamp(1rem, 2.5vw, 2rem);
	}


	#wystawa {
		background-color: #fff;
	}

	#wystawa img {
		width: 100%;
		margin: 0;
	}

	#wystawa h2 {
		text-align: center;
		font-size: clamp(3.5rem, 3vw, 4.5rem);
		margin: 40px 20px 10px;
	}	

	p#opis {
		font-size: clamp(1.5rem, 3vw, 2rem);
		padding: 1em 2em;
	}

	#wystawa h5 {
		text-align: center;
		font-weight: normal;
		font-size: 2em;
		margin-top: 30px;
	}

	#wystawa ul {
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		width: 80%;
		font-size: 1.7em;
		margin: 0.3em auto 0 auto;
		padding-bottom: 2em;	
	}

	#wystawa ul li {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		list-style-type: none;
		text-align: center;
		justify-content: space-around;
		margin: 15px;
		padding: 10px;
		border-radius: 7px;
		background-color: #000;
	}

	#wystawa ul a {
		text-decoration: none;
		color: #fff;
	}
	#wystawa ul li:hover {
		box-shadow: 5px 5px 5px #869da5;
	}

	

	article p {
		margin: 23px;
	}

	/*KONTAKT*/

	#kontakt {
		width: 100%;
		background-color: #00bfff;
		font-family: "montserrat", sans-serif;
		font-weight: 400;
		font-style: normal;	
		font-size: 1rem;
		color: #fff;
		padding: 1em 0;
		text-align: center;
	}

	#kontakt a {
		text-decoration: none;
		color: #000;
	}

	footer {
		font-size: 1rem;
		text-align: right;
		margin-bottom:60px;
		padding-bottom: 20px;
		color: #000;
		font-family: "montserrat", sans-serif;
		font-weight: 400;
		font-style: normal;	
	}

	#copy {
		margin-right: 20px;
	}

	/**/


	/*Kartki 2025*/

	

	#kartki2025 {
		background-color: #000;
		color: #fff;
	}

	#kartki2025 h2 {
		text-align: center;
		padding: 20px;
		color: #00bfff;
		font-size: 2em;
	}

	#kartki2025 .galeria {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin: 20px;
        }


    #kartki2025 p.opis {
    	margin: 20px;
    	padding: 20px 0;
    	font-size: 1.4em;
    }    

       /* Tablety */


        @media (min-width: 600px) {
            #kartki2025 .galeria {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Laptopy i większe ekrany */

        @media (min-width: 900px) {
            #kartki2025 .galeria {
                grid-template-columns: repeat(3, 1fr);
            }
        }

     #kartki2025 figure  {
            position: relative;
            overflow: hidden;
        }

    #kartki2025 figure p {
    	font-size: 0.8em;
    }    

    #kartki2025 figure img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        } 

        /* Lekki zoom przy najechaniu */

        
    #kartki2025 figure:hover img {
            transform: scale(1.03);
        } 

    #kartki2025 figcaption {
    	position: absolute;
    	top: 20px;
    	left: 20px;
    	font-size: 1.5em;
    	opacity: 0;
    	color: #fff;
    	text-shadow: 2px 2px 2px #000;
    }    

    #kartki2025 .download-icon {
            position: absolute;
            width: 40px;
            height: 40px;
            bottom: 40px;
            right: 10px;    
            text-decoration: none;
            color: #fff;
            opacity: 0;
            padding: 10px;
            transition: opacity 0.3s, transform 0.3s;
            transform: scale(0.8);
            background-image: url("pobierzBiala.png");
        } 
        
    /* Pokazuje ikonę dopiero przy najechaniu */
    
    #kartki2025 figure:hover .download-icon,
    #kartki2025 figure:hover figcaption {
            opacity: 1;
            transform: scale(1);  
        }  


        /*GALERIE ZDJĘĆ*/

        main#galeria {
        	background-color: #000;
        	color: #fff;
        }

        #galeria h2 {
        	text-align: center;
        }


          /*Ogólne*/


	@media screen and (min-width: 768px) {

		body {
			background-color: #7d1f7a;
		}


		main, header, footer {
			max-width: 1000px;
			margin: 0 auto;
		}

		article p {
			margin: 0 10%;
		}


	}