<style type="text/css">
	* {padding: 0; margin: 0;
	 max-zoom: 2;
	
	}
	
	
@font-face {
  font-family: 'appleberry';
  src: url('appleberry.ttf') format('truetype');
}	
	
.ranking h1 {
    text-align: center;
}
	
	

body {
    height: 100%;
    width: 100%;
    background: #FFF url("background.jpg") repeat;
    background-size: 100% auto;
    background-attachment: local;
    color: #fff;
    font-family: "appleberry", sans-serif;
    font-size: 20px;
	animation: backgroundMove 60s ease-in-out infinite;
	
}

@keyframes backgroundMove {
    0% {
        background-position: 0 0;
		 background-size: 100% auto;
	 
		 
		}

	50% {
		 background-position: 0 500px;
        background-size: 110% auto;
	}
    100% {
        background-position: 0 0;
		background-size: 100% auto;
    }
}


a#menu {
    color: #CFB307;
    text-decoration: none;
    margin: 0 5%; /* Zmieniamy margines na 0 10px, aby zachować odstęp między elementami <a> wewnątrz <ul> */
	text-align: center;
}
			
			
			
	a {
    text-decoration: none; /* Usuń podkreślenie pod linkiem */
    transition: transform 0.2s; /* Dodaj płynność do zmiany transformacji */
}

a:hover {
    transform: scale(1.1); /* Powiększ link o 10% po najechaniu na niego */
}		
			
			
			
			
			
	a#link {
		color: #CFB307;
		text-decoration: none;
		margin: 60px;
	}
			
			
	a:hover {
		color: #774707;
		text-decoration: underline;
	}
			
	h1 {
		color: #49E551;
		font-weight: 800;
	}
			
	h2 {
    color: #fff;
    margin: 10px 0 40px;
    text-align: center;
    font-size: 2em; /* Zastosowana jednostka względna dla rozmiaru czcionki */
}
			
	h3 {
		color: #49E551;
		font-weight: 400;
		text-align: left;
		margin: 0 0 20px;
		text-align: center;
	}
			
	h4 {
		font-weight: 400;
		margin: 10px 0 40px;
		text-align: center;
	}
			
	.wrap {
    background: rgba(0, 0, 0, 0.6);
    max-width: 60%;
    max-height: 95%;
    text-align: center;
    padding: 50px 40px 50px;
    margin: 5% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
	
	 flex-wrap: wrap;
	 

}
		
.ranking {
    text-align: left;
}

.ranking-list {
    text-align: left;
    margin: 0 auto;
    max-width: 400px;
}

		
	.logo {
    display: block; /* Zmieniamy display na block, aby logo było blokowym elementem */
    margin-top: 50px; /* Zwiększamy margines na górę, aby zachować odstęp między ul#menu a logo */
    z-index: 1; /* Dodajemy z-index, aby logo było poniżej ul#menu */
}
			
	ul#spis {
		color: #fff;
		list-style: square;
		text-align: left;
		line-height: 26px;
		padding: 0 0 0 15px;
	}
	
	ul#spis li {
    line-height: 26px; /* Zachowaj istniejący odstęp między liniami */
    margin-bottom: 10px; /* Zwiększ odstęp między punktami o 10 pikseli */
}
			
	ul#menu {
    background: rgba(0, 0, 0, 0.5);
    border: solid black 3px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
	 justify-content: center;
    top: 2%;
    right: 3%;
    left: 3%;
    margin: auto;
    z-index: 2;
}

.wrap a {
    display: block; /* Dodajemy display: block; aby logo było poniżej ul#menu */
    margin-top: 3%; /* Dodajemy margines na górę dla odstępu między ul#menu a logo */
}	
	.logowanie,
    .rejestracja {
        background: rgba(0, 0, 0, 0.6);
        max-width: 350px;
        max-height: 180px;
        padding: 15px;
        margin: 20px;
        float: right; /* Dodajemy float: right; */
		margin-bottom: 20px;
		clear: right;
    }


.logowanie form,
.rejestracja form {
    text-align: right;
}

		html {
    scroll-behavior: smooth;
}


.film1,
.film2 {
    background: rgba(0, 0, 0, 0.6);
    max-width: 30%;
    max-height: 60%;
font-family: appleberry;
    padding: auto;
    margin: 1% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
	
	 flex-wrap: wrap;
}

	p {
	
		color: #fff;
		margin: 20px 0 0;
		font-size: 1em; 
	}
	
	
	input[type=button],
	input[type=submit],
	input[type=reset],
	button {
		background: rgba(0, 0, 0, 0.5);
		border: 3px solid black;
		color: #CFB307;
		font-family: appleberry;
		font-size: 20px;
		padding: 5px 15px;
		text-decoration: none;
		margin: 4px 2px;
		cursor: pointer;
		transition: transform 0.2s;
	}
	input[type="submit"]:hover {
    transform: scale(1.1); /* Powiększ przycisk o 10% po najechaniu na niego */
}
	
	
button {
		background: rgba(0, 0, 0, 0.5);
		border: 3px solid black;
		color: #CFB307;
		font-family: appleberry;
		font-size: 20px;
		padding: 5px 15px;
		text-decoration: none;
		margin: 4px 10px;
		cursor: pointer;
		transition: transform 0.2s;
	}




	button:hover,
a#showDiscord:hover,
#showGame:hover,
#showNews:hover,
#showRanking:hover {
    transform: scale(1.2);
}
	
	
	
	
	
#gameContent {
    display: block; /* Pokaż domyślnie */
    transition: opacity 0.8s ease;
}

#newsContent, #rankingContent {
    display: none; /* Ukryj domyślnie */
    transition: opacity 0.8s ease;
}
	
	.menupoziome {
    position: absolute; /* Absolutne pozycjonowanie względem wrap */
    top: 20px; /* Ustawienie na górze wrap */
    width: 100%; /* Szerokość na całą dostępną przestrzeń */
    /* Pozostałe style dla menupoziome */
}
	
	
.content-section {
    opacity: 1; /* Domyślnie widoczny */
    transition: opacity 0.2s ease-in-out; /* Płynne przejście */
}

.hidden {
    opacity: 0; /* Ukryty */
    pointer-events: none; /* Zapobiega kliknięciom */
}
	
.assistant-container {
    background: rgba(255, 255, 255, 0.8); /* Półprzezroczyste tło */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.assistant-container h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.assistant-container form {
    display: flex;
    flex-direction: column;
}

.assistant-container label {
    margin-bottom: 10px;
    font-weight: bold;
}

.assistant-container textarea {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.assistant-container input[type="submit"] {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

.assistant-container input[type="submit"]:hover {
    background-color: #0056b3;
}

.assistant-container p {
    margin-top: 20px;
    font-size: 16px;
}

	
	
</style>
