/* Theme */
@keyframes gradientAnimation {
  0% {
    background-position: 50% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 50% center;
  }
}

html {
    background-image: linear-gradient(to right, #ff007f, #303F9F);
    background-size: 210% auto;
    color: #fff;
    padding: 0px;
    animation: gradientAnimation 5s linear infinite;
    overflow-y: auto;
    scroll-behavior: smooth;
}

main {
	padding: 20px;
}
/*main {
	background: #303F9F;
	color: #FAFAFA;
}*/

::selection {
	color: #303F9F44;
	background: #FAFAFA44;
}

::-moz-selection {
	color: #303F9F44;
	background: #FAFAFA44;
}

.icons-social
{
}
.icons-social i {
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 1% 5%;
    padding: 2% 2%;
    transition: 0.3s;
}
.icons-social i:hover {
    color: #303F9F44;
    transition: 0.3s;
    scale: 1.25;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
}
.icons-social svg {
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 1% 5%;
    padding: 2% 2%;
    transition: 0.3s;
}
.icons-social svg:hover {
    color: #303F9F44;
    transition: 0.3s;
    scale: 1.25;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
}

.icons-social2
{
    display: flex;
    flex-wrap: nowrap;  /* Prevents icons from wrapping to the next line */
    justify-content: space-between;  /* Distributes icons with space in between */
    align-items: center;
}
.icons-social2 i {
    scale: 3;
    flex: 2 2 auto;
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 1% 5%;
    padding: 2% 2%;
    transition: 0.3s;
}
.icons-social2 i:hover {
    color: #303F9F44;
    transition: 0.3s;
    scale: 6;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
}
.icons-social2 svg {
    scale: 3;
    flex: 2 2 auto;
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 1% 5%;
    padding: 2% 2%;
    transition: 0.3s;
}
.icons-social2 svg:hover {
    color: #303F9F44;
    transition: 0.3s;
    scale: 6;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
}
/*.icons-social i:hover {*/
/*	background: #FFFFFF;*/
/*	color: #d2d5e8;*/
/*}*/

.icons-social 

.icons-social a svg path{
	fill: #FAFAFA;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	width:100%;
	font-size:14px;
	color:#fff;
	position: absolute;
	bottom: 10px;
}
footer:visited {
	color:#fff;
}
.host {
	padding: 0% 2%;
}
.lang {
	padding: 0% 2%;
}

.lang a {
	text-decoration: none;
	color: #fff;
}
.don {
	padding: 0% 2%;
}

.don a {
	text-decoration: none;
	color: #fff;
}
.next-page
{
    display: flex;
    position:fixed;
    bottom: 33px;
    right: 3px;
    z-index: 99;
    cursor: pointer;
    padding: 2%;
    margin: 5%;
    justify-content: flex-end;
}

.next-page i {
	color: #FAFAFA;
	transition: color 0.3s, background 0.3s; /* Adding transition effect */
	margin: 0% 5%;
	padding: 2% 2%;
	font-size: 59px;
	transition: 0.3s;
}
.next-page i:hover {
	color: #303F9F44;
  	animation: gradientAnimation 5s linear infinite;
	background: #FAFAFA44;
	transition: 0.3s;
	scale: 1.25;
}

.next-page svg {
	color: #FAFAFA;
	transition: color 0.3s, background 0.3s; /* Adding transition effect */
	margin: 0% 5%;
	padding: 2% 2%;
	font-size: 59px;
	transition: 0.3s;
}
.next-page svg:hover {
	color: #303F9F44;
  	animation: gradientAnimation 5s linear infinite;
	background: #FAFAFA44;
	transition: 0.3s;
	scale: 1.25;
}
.content div
{
	padding: 3%, 5%;
}
.content2
{
	padding: 5%;
	background: #FAFAFA33;
}
.content2 div
{
	padding: 5%;
	background: #FAFAFA66;
}
.content3 
{
	display: flex;
	align-content: center;
	align-items: center;
}
.content3 div
{
	scale: 0.5;
	padding: 1%;
	flex: 1;
}
.tagline
{
	position: -webkit-sticky;  /* For Safari */
    position: sticky;
    top: 8%;
    z-index: 1000;
    
}
.tagline a 
{
	background-image: linear-gradient(to right, #ff007f, #303F9F);
    background-size: 210% auto;
    color: #fff;
    padding: 0px;
    animation: gradientAnimation 5s linear infinite;
}
.tagline a {
	color: #FAFAFA;
	transition: color 0.3s, background 0.3s, 0.3s; /* Adding transition effect */
	margin: 0% 5%;
	padding: 1% 2%;
	text-decoration: none;
}
.tagline a:hover {
	color: #303F9F88;
	transition: 0.5s;
	font-size: 54px;
  	animation: gradientAnimation 5s linear infinite;
	background: #FAFAFA88;
	text-decoration: none;
}
.tagline a:visited {
	color: #FAFAFA;
	transition: color 0.3s, background 0.3s; /* Adding transition effect */
	margin: 0% 5%;
	padding: 2% 2%;
	text-decoration: none;
}
footer 
{
	position: sticky;
	background-image: linear-gradient(to right, #ff007f, #303F9F);
    background-size: 210% auto;
    color: #fff;
    padding: 0px;
    animation: gradientAnimation 5s linear infinite;
	padding: 1%;
	bottom: 0;  
	z-index: 100;  
}
.scrollable 
{
	height: 100%;
 	overflow: hidden;
}
.intro 
{
	position: -webkit-sticky;  /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
	background-image: linear-gradient(to right, #ff007f, #303F9F);
    background-size: 210% auto;
    color: #fff;
    padding: 0px;
    animation: gradientAnimation 5s linear infinite;
    
}
.lang i 
{
}
.content4 div 
{
	background-image: linear-gradient(to right, #ff007f77, #303F9F77);
    background-size: 210% auto;
    padding: 0px, 10px;
    animation: gradientAnimation 5s linear infinite;
    
}
.pytanie div 
{
	background-image: linear-gradient(to right, #ff007f, #303F9F);
    background-size: 210% auto;
    padding: 0px;
    animation: gradientAnimation 5s linear infinite;
    
}
.odpowiedz div 
{
	background-image: linear-gradient(to right, #ff007f99, #303F9F99);
    background-size: 210% auto;
    padding: 0px;
    animation: gradientAnimation 5s linear infinite;
    
}

.jpgi 
{
    padding: 0%;
    margin: 0%;
}
.jpgi img
{
    transition: 0.3s;
    opacity: 0.65;
    rotate: inherit;
}
.jpgi a:hover
{
    transition: 0.3s;
    opacity: 1;
    scale: 0.8;
}
.jpgi img:hover 
{
    opacity: 1;
    scale: 1.1;
}
.jpgiSkala
{
    scale: 1;
    padding: 0%;
    margin: 0%;
}
.jpgiSkala img
{
    scale: 0.7;
    transition: 0.3s;
    opacity: 0.65;
    rotate: inherit;
}
.jpgiSkala a:hover
{
    transition: 0.3s;
    opacity: 1;
    scale: 0.8;
}
.jpgiSkala img:hover 
{
    opacity: 1;
    scale: 0.8;
}
.shop-items
{
}
.shop-items a {
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 1% 5%;
    padding: 2% 2%;
    transition: 0.3s;
}
.shop-items a:hover {
    color: #303F9F44;
    transition: 0.3s;
    scale: 1.25;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
}
.shop-items
{
	margin: 1%;
	padding: 3%;
    font-weight: 999;
    display: flex;
    flex-wrap: nowrap;  /* Prevents icons from wrapping to the next line */
    justify-content: space-between;  /* Distributes icons with space in between */
    align-items: center;
}

.shop-items a {
    align-items: center;
	padding: 2%;
	text-decoration: none;
}
.tagline2 a
{
	text-decoration: none;
	color: #FAFAFAFF;
	
}
.tagline2 a:hover
{
	text-decoration: none;
	color: #bdf245c4;
	text-decoration: underline;
}

.shop-content 
{
    font-size: 24px;
    padding: 2%;
}
.shop-content input 
{
    color: #ffffff;
    background-color: #80808073;
    border: none;
    outline: 3px solid white;
    font-size: 23px;
}
.shop-content input:focus 
{
    color: #099602a1;
    background-color: #ffffff73;
    outline: 3px solid green;
    font-size: 23px;
}
.shop-content input:hover 
{
    color: #099602a1;
    background-color: #ffffff73;
    outline: 3px solid green;
    font-size: 23px;
}
.tip 
{
    padding: 1%;
}
.shop-content a
{
    text-decoration: none;
    color: #FAFAFAFF;
    
}
.shop-content a:hover
{
    text-decoration: none;
    color: #bdf245c4;
    text-decoration: underline;
}

.last-page
{
    display: flex;
    position:fixed;
    bottom: 33px;
    left: 3px;
    z-index: 99;
    cursor: pointer;
    padding: 2%;
    margin: 5%;
    justify-content: flex-end;
}

.last-page i {
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 0% 5%;
    padding: 2% 2%;
    font-size: 59px;
    transition: 0.3s;
}
.last-page i:hover {
    color: #303F9F44;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
    transition: 0.3s;
    scale: 1.25;
}
.last-page svg {
    color: #FAFAFA;
    transition: color 0.3s, background 0.3s; /* Adding transition effect */
    margin: 0% 5%;
    padding: 2% 2%;
    font-size: 59px;
    transition: 0.3s;
}
.last-page svg:hover {
    color: #303F9F44;
    animation: gradientAnimation 5s linear infinite;
    background: #FAFAFA44;
    transition: 0.3s;
    scale: 1.25;
}

.zwrot a 
{
    text-decoration: none;
    color: #aaaaaa;
}
.zwrot a:hover
{
    text-decoration: underline;
    color: #bdf245c4;
}

.tor-link {
    padding: 0 2%;
    display: inline-block;
}

.tor-button {
    display: inline-block;
    background-color: #4b4b4b;
    color: white;
    padding: 10px 10px 10px 20px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 0 0 0 10px;
}
.tor-button i {
    margin-right: 8px;
}
.tor-button .onion-icon {
    margin-left: 8px;
}
.tor-button:hover {
    background-color: #333333;
}