@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&display=swap');

/* SELEKTORY GLOBALNE */
*{
	transition: 1s;
	box-sizing: border-box;
}

html{
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	scroll-behavior: smooth;
}

body {
	font-size: 1.6rem;
	background-color: #070B0B;
	background-image: url("../img/scylla woda.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top center;
	overflow-x: hidden;
}

a{
	text-decoration: none;
}

img{
	max-width: 100%;
}

p{
	line-height: 140%;
}

/* NAWIGACJA MOBILE*/
.burger{
	background: #222;
	color: #fff;
	/*utrwala pozycję elementu, tam gdzie on zawsze występuje*/
	position: fixed;
	right: 2rem;
	top: 2rem;
	font-size: 3rem;
	/*elementy na mobile powinny mieć wymiary co najmniej 40x40, więc to ustawiamy poniżej*/
	padding: .5rem .65rem;
	cursor: pointer;
	z-index: 1; /*kolejność - ponad treścią sekcji*/
	display: none;
}
.burger:hover{
	background-color: #eee;
	color: #000;
}

.nakladka{
	background-color: #111;
	position: fixed;
	
	top: 0; /*tak jest domyślnie - rozwijanie i zwijanie do góry*/
	right: 0; /*zmieniamy kierunek otwierania i zwijania się menu - rozwijanie i zwijanie do prawej*/
	
	width: 0%; /*parametr do zmiany skryptem*/
	height: 100%; /*parametr do zmiany skryptem*/
	
	overflow: hidden; /*ukrywa to co wystaje poza box*/
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2; /*kolejność - wyżej niż burger*/
	opacity: .9; /*zmniejsza widoczność boxu i zawartości*/
}
.nakladka ol{
	/*background-color: red;*/
	width: 100%;
	text-align: center;
}
.nakladka ol li{}
.nakladka ol li a{
	/*background-color: yellow;*/
	display: block;
	padding: 3vh 0;
	margin-bottom: 2vh;
	color: #fff;
	text-transform: uppercase;
	font-weight: 900;
}
.nakladka ol li a:hover{
	background-color: #eee;
	color: #111;
}

.zamknijX{
	background: #eee;
	position: absolute; /*pozycja względem boxu nadrzędnego*/
	top: 2rem;
	right: 2rem;
	font-size: 3.3rem;
	padding: 0 1.05rem .65rem;
	cursor: pointer;
}
.zamknijX:hover{
	background-color: #222;
	color: #eee;
}

/* NAWIGACJA DESKTOP*/
nav{
	background-color: black;
	position: fixed; /*przylepiony do krawędzi, ale traci szerokość */
	width: 100%; /* przywracamy szerokość */
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

nav ol{
/*	background-color: coral;*/ /* ctrl + ? - żeby zakomentować wiersz */
	display: flex;
	gap: 2vw;
}

nav ol li{}

nav ol li a{
	font-size: 2rem;
	color: white;
/*	background-color: darkblue;*/
	padding: 1rem 2rem;
	display: block; /* żeby hiperłącza rozciągały box, w którym się znajdują */
}

nav ol li a:hover{
	background-color: #eee;
	color: #222;
	font-weight: 800;
}

/* WSZYSTKIE SEKCJE */
section{
	min-height: 90vh; /* vh = % wysokości okna przeglądarki */
	padding: 10rem 2rem;
	display: flex; /* muszą mieć wyświetlaną zawartość elastycznie, a to znaczy, że będą się wyświetlać elementy obok siebie */
	align-items: center;
	justify-content: center;
}

.zawartosc{
/*	background-color: red;*/
	max-width: 1400px;
	width: 100%; /* dodajemy żeby wymusić max-width dodane wiersz wyżej */
}

/* PIERWSZA SEKCJA */
#pierwsza{}
#pierwsza .zawartosc{
	/* flex container */
	display: flex;
	gap: 2rem;
	flex-wrap: wrap; /* ściśle powiązane z "flex:" dla items */
	justify-content: center;
}
#pierwsza h1{
	font-family: "Kumbh Sans", sans-serif;
	font-size: 15rem;
	font-weight: 800;
/*	margin: -20rem 0rem 0rem -60rem;*/
	color: #FFFFFF;
	filter: blur(2px);
}

/* DRUGA SEKCJA */
#druga{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
}

#druga .zawartosc{
	display: flex;
  	flex-wrap: wrap;
	background-color: black;
	color: white;
	gap: 14rem;
	justify-content: space-between;
	align-items: center;
	max-width: 1400px;
/*	margin: 0 auto;*/
	padding: 4rem 6rem 4rem 6rem;
}

#druga .opis{
	font-weight: 100; 
	flex: 2;
  	font-size: 3.5rem;
}

#druga .tytul{
	flex: 1;
	text-align: center;
}

#druga .tytul h2 span{
	font-family: "Kumbh Sans", sans-serif;
	font-size: 12rem;
	font-weight: 900;
	line-height: 130%;
}

/* ANIMACJA */
.animate-on-scroll{
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.animate-on-scroll.show{
	opacity: 1;
	transform: translateY(0);
}

@keyframes fadeInUp{
	from{
		opacity: 0;
		transform: translateY(50px);
	}
	to{
		opacity: 1;
		transform: translateY();
	}
}

#druga .delay-0 {
 	transition-delay: 0s;
}

#druga .delay-1 {
 	transition-delay: 0.4s;
}

#druga .delay-2 {
 	transition-delay: 0.8s;
}

/* TRZECIA SEKCJA */
#trzecia{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
}

#trzecia .zawartosc{
	display: flex;
  	flex-wrap: wrap;
  	gap: 4rem;
  	max-width: 1300px;
  	margin: 0 auto;
  	color: white;
}

#trzecia .tekst{
	flex: 2;
}

#trzecia .tekst h2{
	font-family: "Kumbh Sans", sans-serif;
	font-size: 12rem;
	font-weight: 900;
	margin-bottom: 2rem;
	white-space: nowrap;
}

#naglowek-trzeci span{
	display: inline-block;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
}

#trzecia .tekst p{
	font-weight: 100;
	font-size: 2.4rem;
	padding: 2rem 4rem 2rem 0;
}

#trzecia .podkreslenie{
	font-family: "Montserrat Underline", sans-serif;
	flex: 1;
	text-align: center;
	font-size: 6.4rem;
	font-weight: 800;
	line-height: 140%;
	padding: 13rem 0 0 2rem;
}

/* ANIMACJA */
.podkreslenie span {
  	display: block;
  	opacity: 0;
  	transform: translateX(100px);
}

.podkreslenie.aktywny span {
  	animation: slideInRight 1s ease-out forwards;
}

.podkreslenie.aktywny span:nth-child(1) { animation-delay: 0.1s; }
.podkreslenie.aktywny span:nth-child(2) { animation-delay: 0.3s; }
.podkreslenie.aktywny span:nth-child(3) { animation-delay: 0.5s; }
.podkreslenie.aktywny span:nth-child(4) { animation-delay: 0.7s; }
.podkreslenie.aktywny span:nth-child(5) { animation-delay: 0.9s; }
.podkreslenie.aktywny span:nth-child(6) { animation-delay: 1.1s; }
.podkreslenie.aktywny span:nth-child(7) { animation-delay: 1.3s; }

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#naglowek-trzeci span {
	display: inline-block;
	opacity: 0;
	transform: translateX(-100px);
 	animation-fill-mode: forwards;
}

#naglowek-trzeci.aktywny span:nth-child(1) { animation: slideInLeft 1s ease-out forwards 0.1s; }
#naglowek-trzeci.aktywny span:nth-child(2) { animation: slideInLeft 1s ease-out forwards 0.3s; }
#naglowek-trzeci.aktywny span:nth-child(3) { animation: slideInLeft 1s ease-out forwards 0.5s; }
#naglowek-trzeci.aktywny span:nth-child(4) { animation: slideInLeft 1s ease-out forwards 0.7s; }
#naglowek-trzeci.aktywny span:nth-child(5) { animation: slideInLeft 1s ease-out forwards 0.9s; }
#naglowek-trzeci.aktywny span:nth-child(6) { animation: slideInLeft 1s ease-out forwards 1.1s; }
#naglowek-trzeci.aktywny span:nth-child(7) { animation: slideInLeft 1s ease-out forwards 1.3s; }

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tekst {
	opacity: 0;
	transition: opacity 4s ease-out;
}

.tekst.show {
	opacity: 1;
}

/* SEKCJA CZWARTA */
#czwarta .zawartosc{
	color: white;
	padding: 100px 40px;
	text-align: center;
	font-weight: 100;
	position: relative;
}

#czwarta .zawartosc h2{
	font-family: "Kumbh Sans", sans-serif;
	font-size: 12rem;
	font-weight: 900;
	margin-bottom: 10rem;
	text-align: center;
}

#czwarta .trivia-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px;
}

#czwarta .trivia-card{
  width: 340px;
  transition: transform 0.5s ease;
  transform-origin: center;
}

.trivia-frame {
  background-color: black;
  position: relative;
  padding: 40px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  transform: rotate(0deg); /* tekst i ramka nie obracają się */
  transition: all 0.5s ease;
  overflow: visible;
}

.trivia-content {
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: left;
  position: relative;
  transform: translate(10px, -10px); /* przesunięcie tekstu względem ramki */
  transition: transform 0.4s ease, text-align 0.4s ease;
}

/* Początkowe rotacje całej kartki (ale nie ramki ani tekstu) */
.rotate-left {
  transform: rotate(-8deg);
}

.rotate-right {
  transform: rotate(8deg);
}

.rotate-center {
  transform: rotate(-4deg);
}

/* Hover: prostowanie, powiększenie ramki i wycentrowanie tekstu */
.trivia-card:hover {
  transform: rotate(0deg) scale(1.2);
  z-index: 2;
}

.trivia-card:hover .trivia-frame {
  transform: rotate(0deg);
}

.trivia-card:hover .trivia-content {
  transform: translate(0, 0);
  text-align: center;
}

/* STOPKA */
#stopka {
	background-color: #000000;
	color: white;
	min-height: 15vh;
	padding: 2rem 5rem 2rem 15rem;
	align-items: center;
	justify-content: center;
	display: flex;
}

#stopka .zawartosc {
 	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2rem;
}

#stopka .zawartosc > div {
	flex: 0 1 250px;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	text-align: left;
	padding: 3rem 0 3rem 0;
}

#stopka h2{
	color: #142D26;
	font-size: 1.7rem;
	font-weight: 800;
}

#stopka li {
	color: white;
	font-size: 1.2rem;
}

#stopka a {
 	color: white;
}

#stopka ol{
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

#stopka ol li{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	padding: 0 0 20px 0;
}
#stopka .stopka2 a{
	text-decoration: none;
}

#stopka .stopka2 a img{
	border: 0;
	width: 5rem;
	object-fit: fill;
	display: inline-block;
	padding: 0.5rem;
}

#stopka .stopka2 a img:hover{
	transform: scale(1.2);
}

#stopka .stopka3{
	padding: 3rem 0 3rem 0;
	line-height: 100%;
}

#stopka .stopka3 input[type=email] {
	padding: 1.5rem 8vw 1.5rem 1.5rem;
	margin-bottom: 1rem;
	border-radius: 20px 20px 20px 20px;
	border: 0;
	margin-right: 1rem;
}

#stopka .stopka3 input[type=submit] {
    border: none;
	width: 10rem;
	height: 4rem;
    padding: 1rem 1.5rem;
    border-radius: 20px 20px 20px 20px;
    color: #142D26;
    background-color: white;
    font-weight: 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    text-decoration: none;
	float: right;
	margin-top: 3rem;
}

#stopka .stopka3 input[type=submit]:hover{
	background-color: #142D26;
	color: white;
}

#zgody{
	margin: 1rem 0rem;
	font-size: 1.2rem;
}


.copy{
	background-color: black;
	color: darkgray;
	padding: 1rem;
}

.copy h6{
	font-size: 1rem;
	display: flex;
	justify-content: center;
}

/*******************************/
/**************RWD**************/
@media all and (max-width:600px){
    /* Globalne style dla mobile */
    html {
        font-size: 14px;
    }
	
	.burger {
     	display: block;
    }
    
    nav {
        display: none;
    }
    
    #pierwsza h1 {
		font-size: 17vw;
		margin: 1rem;
		text-align: center;
		line-height: 1.2;
		padding: 0 1rem;
  	}

  	section {
		padding: 5rem 1rem;
		flex-direction: column;
  	}

  	/* Druga sekcja */
  	#druga .zawartosc {
		flex-direction: column;
		padding: 2rem;
		gap: 3rem;
		text-align: center;
  	}

  	#druga .opis {
    	font-size: 2rem;
  	}

  	#druga .tytul h2 span {
    	font-size: 5rem;
  	}

	 /* Trzecia sekcja */
	#trzecia .zawartosc {
		flex-direction: column;
		padding: 2rem 1rem;
		gap: 2rem;
	}

	#trzecia .tekst h2 {
		font-size: 5rem;
		white-space: normal;
		text-align: center;
	}

	#trzecia .tekst p {
		font-size: 1.4rem;
		padding: 1rem;
		text-align: justify;
	}

	#trzecia .podkreslenie {
		font-size: 2rem;
		padding: 2rem 2rem 0 2rem;;
		text-align: center;
		line-height: 150%;
	}

	  /* ANIMACJE – zachowanie */
	.animate-on-scroll {
		opacity: 0;
		transform: translateY(50px);
		transition: opacity 1.5s ease-out, transform 1.5s ease-out;
	}

	.animate-on-scroll.show {
    	opacity: 1;
    	transform: translateY(0);
	}
	
	  /* Czwarta sekcja */
	#czwarta .zawartosc h2 {
		font-size: 5rem;
		margin-bottom: 5rem;
	}

	#czwarta .trivia-grid {
		flex-direction: column;
		gap: 3rem;
	}

	#czwarta .trivia-card {
		width: 100%;
		transform: none;
	}

	.rotate-left {
		transform: rotate(-6deg);
	}

	.rotate-right {
		transform: rotate(6deg);
	}

	.rotate-center {
		transform: rotate(-3deg);
	}

	.trivia-card:hover {
		transform: rotate(0deg) scale(1.1);
	}

	.trivia-content {
		font-size: 1.3rem;
		text-align: center;
		padding: 1rem;
		transform: none !important;
	}

	 /* Stopka */
	 #stopka {
		padding: 2rem;
	 }

	 #stopka .zawartosc {
		flex-direction: column;
		align-items: center;
		text-align: center;
		justify-content: center;
	 }

	 #stopka .zawartosc > div {
		width: 100%;
		padding: 1.5rem 0;
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	 }

	 #stopka input[type="email"],
	 #stopka input[type="submit"] {
		width: 100%;
		margin: 0.5rem 0;
		float: none;
	 }

	 #stopka h2 {
		font-size: 1.6rem;
	 }

	 #stopka li {
		font-size: 1.2rem;
	 }

	 #stopka .stopka2 a img {
		width: 4rem;
	 }

	 .copy h6 {
		font-size: 1rem;
		text-align: center;
		padding: 1rem;
	 }
}