body { font-family: Arial, Georgia, Verdana; margin: 0px; padding: 0px; padding-top: 70px; font-size:16px; line-height: 140%;}
#wrapper { 
	display: flex; 
	justify-content: center; /* center horizontally */ 
	align-items: center; /* center vertically */ 
} 
i {text-decoration: none; font-size:16px;}
li {text-decoration: none; font-size:16px;}
ul {text-decoration: none; font-size:16px;}
.j {text-align: left; font-size:16px; line-height: 140%;}
a {color:#9d50bb; text-decoration: none; font-size:16px;transition: color 0.3s ease;}

a:hover {
color: #ffdf91 !important;
  text-shadow: 0 0 10px rgba(255, 223, 145, 0.8);
  transition: 0.3s; /* Płynne przejście koloru */
}

.n {background-color: #006699}
.nja {background-color: #B1E3FE}
.czerwony {font-size: 16pt;color: red}
.niebieski {color: blue}
.bialy {color: white}
.cz {background-color: #000000}
.zo {background-color: #FEE378}
.zoj {background-color: #FFFFCC}
.kolor1 {
background-color: #F7EFE7;
}
.kolor2 {
background-color: rgba(239, 239, 239, 1); 
background-image: linear-gradient(90deg, rgba(239, 239, 239, 1) 0%, rgba(221, 218, 218, 1) 50%);	
}
.kolor3 {
background-color: #F7EFE7;
}
.kolor4 {
background-color: #2F6760;
}
.kolor5 {
background-color: #E7EFE7;
}
.kolor6 {
background-color: #324395;
}
.kolor7 {
background-color: #F7EFE7;
}
.kolor8 {
background-color: #AA000F;
}
.kolor10 {
background-color: #396342;
}
.kolor11 {background-color: #255030;}
.zoa {background-color: #FFCF00}
.sz {background-color: #CCCCCC}
.csz {background-color: #999999}
.jsz {background-color: #F4F4F4}
.sza {color:#666666; font-weight: normal}
.male {font-size: 10px; font-weight: normal; color:black; font-family: Arial, Georgia, Verdana;}
.males {font-size: 10px; font-weight: normal; color:666666; font-family: Arial, Georgia, Verdana;}
A.menu {font-family: MS Sans Serif, Arial CE, Helvetica;text-decoration:none; font-size: 9pt}
a.menu:hover {color:#339966;text-decoration: none}
A.zu {text-decoration:underline; font-size: 9pt; font-weight: normal; color:#003366}
a.zu:link { text-decoration:underline; color:#003366}
a.zu:hover {color: #6078B6;text-decoration: none}
A.u {text-decoration:none; font-size: 9pt; font-weight: normal; color:#990000}
a.u:hover {color: #6078B6;text-decoration: none}
A.nj {font-weight: bold; color:#006699; font-size: 10pt; text-decoration: underline}
a.nj:hover {color: black; text-decoration: none}
A.m {text-decoration:none; font-size: 10px; font-weight: normal; color:#003366; font-family: Arial, Georgia, Verdana;}
A.slink {text-decoration:none; font-size: 10px; font-weight: normal; color:#003366; font-family: Arial, Georgia, Verdana;}
A.s {text-decoration:none; font-size: 8pt; font-weight: normal; color:#666666}
A.lbelka {text-decoration:none; font-size: 10px; font-weight: normal; color:#FFFFFF; font-family: Arial, Georgia, Verdana;}
a.lbelka:hover {color: #FFFFFF;text-decoration: none}
h1 {font-size: 22px;color:#E6BE8A;font-family: Arial, Georgia, Verdana;}
h2 {font-size: 20px;color:#E6BE8A;font-family: Arial, Georgia, Verdana;}
h3 {font-size: 18px;color:#E6BE8A;font-family: Arial, Georgia, Verdana;}

/* --- STYLE BAZOWE PRZYCISKÓW --- */
.btn1, .btn2, .btn3 {
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px; /* Zaokrąglenie pasujące do Twoich ramek */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;
}

.btn1 {
    border: 1px solid #b8860b;
    background-color: rgba(30, 10, 50, 0.6);
    color: #e6be8a;
    padding: 10px 24px;
    font-size: 15px;
}

.btn2 {
    border: 1px solid #b8860b;
    background-color: rgba(30, 10, 50, 0.6);
    color: #e6be8a;
    padding: 14px 28px;
    font-size: 16px;
}

.btn3 {
    border: 2px solid #ffdf91;
    background: linear-gradient(135deg, rgba(55, 20, 90, 0.8) 0%, rgba(20, 10, 30, 1) 100%);
    color: #ffdf91;
    padding: 10px 24px;
    font-size: 18px;
    width: 100%; /* Responsywność */
    max-width: 480px;
    height: 150px;
    text-shadow: 0 0 10px rgba(255, 223, 145, 0.5);
}

/* --- WARIANT ZŁOTY (dawny Success) --- */
.success {
    border-color: #ffdf91 !important;
    color: #ffdf91 !important;
    background-color: rgba(184, 134, 11, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.success:hover {
    background-color: #b8860b !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

/* --- WARIANT FIOLETOWY (dawny Success3) --- */
.success3 {
    border-color: #9d50bb !important;
    color: #e0bbe4 !important;
    background-color: rgba(157, 80, 187, 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.success3:hover {
    background-color: #9d50bb !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(157, 80, 187, 0.6);
    transform: translateY(-2px);
}

/* --- WARIANT DOMYŚLNY (dawny Default) --- */
.default {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.default:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* --- EFEKTY DLA WSZYSTKICH PRZYCISKÓW --- */
.btn1:hover, .btn2:hover, .btn3:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

div{ font-family: Arial, Georgia, Verdana; font-size:16px; color:#F5F5F5;}
div#glowny { width: 1400px;margin: 0px auto 0px auto;text-align:left;}
div.pelny{ width: 100%;margin:0px;padding:4px 0px 0px 0px;text-align:center;}
img{ border:0px;}
div.lewy{ width: 380px;float:left;margin: 5px;}
div.srodek{ width: 300px;float:left;margin: 5px;}
div.prawy{ width: 680px;float:left;margin: 5px;}
div.top7{ padding-top:7px;}
div.adsense{ width:370px;float:right;text-align:center;background-color:#FBFBFB;margin-top:5px;border: 1px solid #F5F5F5;}
div.menu1{ width: 370px;height:78px;background-image: url('https://horoskopy.fazi.pl/png/menu1.gif');}
div.menu2{ width: 370px;height:78px;background-image: url('https://horoskopy.fazi.pl/png/menu2.gif');}
div.tabs{ font-family:Tahoma, Helvetica; font-size:12px; color:#BBBBBB; padding: 8px 15px;}
select,input.pole{ border-style: solid; border-color: #DDDDDD; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; font-size: 12px; font-family: Arial; color: black;}


div.menuf				{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}



div.menuc			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuz			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menus { 
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
  
div.menun			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuf1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuc1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuz1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
div.menus1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menun1			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuf6			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menuc6		{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
  
div.menuz6			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menus6			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}

div.menun6			{  
  /* Szerokość dopasowana do ramki poniżej */
  width: 100%;
  height: 38px;
  
  /* Resetujemy box-sizing, aby padding nie rozpychał belki na boki */
  box-sizing: border-box; 
  
  /* Gradient starego złota */
  background: #b8860b;
  background: linear-gradient(to right, #b8860b, #8b6508, #b8860b);
  
  /* PEŁNE ZAOKRĄGLENIE (wszystkie 4 rogi) */
  border-radius: 12px; 
  
  /* Subtelna złota linia na CAŁYM obwodzie (przywrócony dół) */
  border: 1px solid rgba(255, 223, 145, 0.4);
  
  /* Cień dający efekt unoszenia się */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  
  /* Centrowanie tekstu w pionie */
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  /* MARGINESY: */
  /* Zwiększ tę wartość (np. na 20px lub 30px), aby bardziej obniżyć belkę */
  margin-top: 5px; 
  /* Odstęp między tą belką a ramką z treścią pod spodem */
  margin-bottom: 10px; 
  
  position: relative;
  clear: both;
}
div.menub7{ width: 1250px;height:1px;background-image: url('https://horoskopy.fazi.pl/grafika/menub7.gif'); }
div.menub{ width: 980px;height:33px;background-image: url('https://horoskopy.fazi.pl/grafika/menub1.gif');float:left;}
div.pp1{ float:left;width:190px;}
div.pp2{ float:right;width:160px;}
span.mini{ font-size:11px;}
span.szary{ color:#B9B9B9;}
span.dzial{ display:block; float:left; width:80px;font-weight:bold;}
span.menut { color:#000000; font-family: Arial, Georgia, Verdana; font-size:17px; font-weight:bold;vertical-align:-7px; margin-left: 5px; }
span.smskartka{ vertical-align:-2px;}
div.imieniny{ float:left;width:550px;}
div.sms{ float:right;width:200px;text-align:right;display:inline;}
div.marginesy{ padding:7px;}
div.marginesy1{padding:7px;}
div.marginesy15{ margin: 0px;padding:0px;}
ul { list-style:none;}
hr {height: 0 !important;height: 1px; /* wysokosc pod ie */color: #E5E5E5; /* kolor pod ie */background: transparent;border-width: 1px 0 0 0;border-color: #F7EFE7;border-style: solid;
} 
div.marginesy15ul { float:left;width:160px;margin-top:15px;margin-left:10px;margin-bottom:0px;padding:0px;}
div.stopka { width:750px;float:left;border-top:1px solid #d5dade;background-color:#fff;padding:5px 0px 5px 0px;margin-top:10px;}
div.stopka0 { width:980px;float:left;border-top:1px solid #d5dade;background-color:#fff;padding:5px 0px 5px 0px;margin-top:10px;}

div.stopka { width:750px;float:left;border-top:1px solid #d5dade;background-color:#fff;padding:5px 0px 5px 0px;margin-top:10px; }
div.stopka0 { width:980px;float:left;border-top:1px solid #d5dade;background-color:#fff;padding:5px 0px 5px 0px;margin-top:10px; }



div.teksta1{ 
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}

div.teksta5{
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}

div.teksta {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}
  
div.tekstb5 {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}


div.tekstb1 {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}

		
		
div.tekstb {
width: 100%;
  margin-top: 20px;
  /* Gradient od głębokiego fioletu do czerni */
  background: linear-gradient(135deg, rgba(45, 0, 77, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
  border: 1px solid #9d50bb; /* Fioletowa cienka linia */
  border-radius: 15px;
  /* Fioletowa poświata wokół ramki */
  box-shadow: 0 0 20px rgba(157, 80, 187, 0.4);
  padding: 20px;
  color: #f0f0f0;
  box-sizing: border-box;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  /* DODAJ TE LINIE: */
  margin-top: -3px !important; /* To podciągnie belkę do góry */
  clear: both; /* To wyczyści konflikty z elementami obok */
}
	

.obrazek
{
display: block;
margin-left: auto;
margin-right: auto;
height: auto;display: block;max-width: 100%;
-webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 0.2s ease;
-ms-transition: all .02s ease;
transition: all 0.2s ease;
}
.obrazek:hover
{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
overflow: hidden;
}
.obrazek1
{
height: auto;display: block;max-width: 100%;
-webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 0.2s ease;
-ms-transition: all .02s ease;
transition: all 0.2s ease;
}
.obrazek1:hover
{
-webkit-filter:
grayscale(100%);
}


.wdgt-view-list{border:1px solid transparent;letter-spacing:-.5px;margin-left:0;margin-right:0;padding:0}
.wdgt-view-list>li{border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid transparent;list-style-type:none;margin:0 0 -1px;padding:0;position:relative}
.wdgt-view-list>li>a{display:block;line-height:1.2rem;overflow:hidden;padding:.5rem 1.5rem .5rem .5rem;text-overflow:ellipsis;white-space:nowrap}
.wdgt-view-list>li>a:hover{background:rgba(0,0,0,.05);text-decoration:none}
.wdgt-view-list>li>a:after{color:rgba(0,0,0,.6);content:"\f054";font-family:FontAwesome;font-size:.75rem;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1rem}
.wdgt-view-list>li>a:before,
.wdgt-view-list>li>a>.wdgt-view-icon{background:var(--wdgt-list-icon-bg,#090);border-radius:50%;color:var(--wdgt-list-icon-fg,#fff);display:inline-block;flex-shrink:0;font-size:.875rem;height:1.425em;line-height:1.425em;margin-right:.5rem;text-align:center;width:1.425em}




#navbarg {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: black;
  text-align: center;
  height: 65px;
  transition: box-shadow 0.3s ease;
  z-index: 1050;
}

/* Klasa dodawana po scrollu */
#navbarg.scrolled {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.custom-menu {
    /* Identyczny gradient jak w kolor15 i kolor16 */
    background-color: rgba(30, 10, 50, 1);
    background-image: linear-gradient(90deg, rgba(20, 10, 30, 1) 0%, rgba(55, 20, 90, 1) 50%, rgba(20, 10, 30, 1) 100%);
    
    width: 100%;
    display: flex;
    justify-content: center;
    
    /* Złota linia na dole menu, spójna z resztą pasków */
    border-bottom: 1px solid rgba(184, 134, 11, 0.4);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.custom-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 54px;
    align-items: stretch;
    max-width: 1240px;
    width: 100%;
}

.custom-menu li {
    margin: 0;
    padding: 0;
    height: 100%;
}

.custom-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 15px;
    
    /* Jasny perłowy kolor, aby tekst był idealnie widoczny na fiolecie */
    color: #ffffff !important; 
    
    text-decoration: none;
    font-family: 'Georgia', serif; 
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    
    /* Cień pod tekstem dla czytelności */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.custom-menu a:hover {
    /* Rozświetlenie po najechaniu - fioletowy blask */
    background-color: rgba(157, 80, 187, 0.3) !important;
    
    /* Zmiana koloru tekstu na jasne złoto przy najechaniu */
    color: #ffdf91 !important;
    
    /* Poświata wokół napisu */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    
    /* Złoty pasek u dołu aktywnego elementu */
    box-shadow: inset 0 -3px 0 0 #b8860b;
}

.obrazek-menu {
    height: 22px; /* Subtelniejszy rozmiar flagi */
    margin-right: 8px;
    vertical-align: middle;
    /* Cień pod flagą, żeby nie "płakała" na ciemnym tle */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}


#navbarg {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: black;
  text-align: center;
  height: 65px;
  transition: box-shadow 0.3s ease;
  z-index: 1050;
}

/* Klasa dodawana po scrollu */
#navbarg.scrolled {
box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}


  .custom-menu {
    background-color: rgb(247, 239, 231);
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .custom-menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 54px;
    align-items: stretch;
  }

  .custom-menu li {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  .custom-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px; /* mniejszy padding */
    color: black;
    text-decoration: none;
    font-weight: none;
    transition: background-color 0.3s, color 0.3s;
  }

  .custom-menu a:hover {
    background-color: rgb(129, 55, 114);
    color: white;
  }

  .obrazek-menu {
    height: 30px;
    margin-right: 8px; /* lekki margines między flagą a tekstem */
    vertical-align: middle;
  }



#sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  z-index: 9999;
  transition: box-shadow 0.3s ease;
}

#sticky-header::after {
  content: "";
  display: block;
  height: 0;
background: #ccc; /* Szary, bez efektu poświaty */
  transition: height 0.3s ease, background 0.3s ease; /* ✅ dodajemy tło do animacji */
}

#sticky-header.scrolled::after {
  height: 1px;
  background: #ccc !important;
}


#sticky-header.scrolled {
box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.navbar {
  max-width: 1200px;
  margin: auto;
  padding: 0px 0px;
  display: flex;
  align-items: center;
  gap: 0px; /* zwiększa odstęp tylko między elementami */
  justify-content: flex-start; /* elementy będą przylegać do lewej */
}


.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
	  margin-left: 20px;
  height: 50px;
-webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 0.2s ease;
-ms-transition: all .02s ease;
transition: all 0.2s ease; 
}

.logo:hover
{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
overflow: hidden;
}

.store-icon {
  height: 39px;
  -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 0.2s ease;
-ms-transition: all .02s ease;
transition: all 0.2s ease; 
}

.store-icon:hover
{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
z-index: 0;
overflow: hidden;
}


.nav-menu {
  display: flex;
  list-style: none;
  gap: 1px; /* mniejszy odstęp między pozycjami */
  flex-grow: 1;
  justify-content: flex-start;
  flex-wrap: nowrap; /* zapobiega łamaniu się wierszy */
 
}


.nav-item {
  position: relative;
}

.nav-item > a {
  text-decoration: none;
  color:#003366;
  display: block;
font-weight: bold; 
  font-size: 17px; /* minimalne zmniejszenie tekstu */
  padding: 8px 10px; /* mniejsze odstępy w przyciskach */
  white-space: nowrap; /* zapobiega łamaniu tekstu */
}

.nav-item > a:hover {
  background-color: #933276;
  color: white;
  border-radius: 4px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 1200px; /* Taka sama jak .navbar */
  background-color: white;
  border-top: 2px solid #933276;
  padding: 20px 40px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: left;
}


.dropdown-menu.columns-4,
.dropdown-menu.columns-2 {
  display: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
   max-width: fit-content;
  width: fit-content;
   text-align: left;
}

.columns-4 > div,
.columns-2 > div {
  display: flex;
  flex-direction: column;
  width: 190px; /* 🔧 ustawienie jednakowej szerokości */
  padding-right: 20px;
  margin-right: 30px;
  border-right: 1px solid #eee;
  flex-shrink: 0; /* zapobiega kurczeniu kolumn */
}


.columns-4 > div:last-child,
.columns-2 > div:last-child {
  border-right: none;
  margin-right: 0; /* opcjonalnie usuń dodatkowe odstępy */
  padding-right: 0;
}




.dropdown-menu h3 {
  font-size: 17px;
  color: #933276;
    text-align: center;
  margin-bottom: 12px; /* zwiększona odległość (domyślnie było 8px) */
}

.dropdown-menu a {
  color: #003366; /* niebieski odcień */
  text-decoration: none; /* brak podkreślenia */
  padding: 8px 0;
  font-size: 16px;
  border-bottom: 1px solid #eee; /* delikatna linia między wierszami */
  display: block;
  transition: color 0.3s ease;
}

.dropdown-menu a:hover {
  color: #CC3300; /* czerwony po najechaniu */
  text-decoration: none; /* nadal bez podkreślenia */
}


.dropdown-menu a:last-child {
  border-bottom: none; /* usunięcie linii z ostatniego elementu */
}


.nav-item:hover > .dropdown-menu {
  display: flex;
}

/* Przesunięcie dla 4. i 5. podmenu */

/* Własne reguły dla czwartego podmenu */
.nav-item:nth-child(4) .dropdown-menu {
  left: auto; /* zaczyna się od lewej krawędzi .nav-item */
    right: 20px; /* minimalna odległość od prawej krawędzi */
  transform: translateX(+90px); /* lekkie przesunięcie w lewo */
  min-width: 190px;
  max-width: 90vw;
}

.nav-item:nth-child(5) .dropdown-menu {
  left: auto;
  right: 20px; /* minimalna odległość od prawej krawędzi */
  transform: translateX(-20px); /* lekkie przesunięcie w lewo */
  min-width:190px;
  max-width: 90vw; /* zabezpieczenie, by nie wychodziło poza ekran */
    white-space: normal; /* pozwala łamać tekst w razie potrzeby */
  word-wrap: break-word;
}

.nav-item:nth-child(5) .columns-4 > div,
.nav-item:nth-child(5) .columns-2 > div {
  width: 210px; /* ustalona, spójna szerokość */
  flex-shrink: 0;
  padding-right: 20px;
  margin-right: 30px;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.nav-item:nth-child(5) .columns-4 > div:last-child,
.nav-item:nth-child(5) .columns-2 > div:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}





    /* Styl tła, który nie wpływa na resztę strony */
    #magiczne-tlo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
        z-index: -9999; /* Zawsze pod Twoją treścią */
        overflow: hidden;
        pointer-events: none; /* Pozwala klikać w Twoje przyciski pod spodem */
    }

    /* Efekt spadającej gwiazdy */
    .meteor {
        position: absolute;
        width: 2px;
        height: 2px;
        background: linear-gradient(90deg, #fff, transparent);
        border-radius: 50%;
        opacity: 0;
        animation: meteor-anim 5s infinite;
    }

    @keyframes meteor-anim {
        0% { transform: rotate(200deg) translateX(0); width: 0; opacity: 1; }
        10% { width: 100px; opacity: 1; }
        20% { transform: rotate(200deg) translateX(-600px); width: 0; opacity: 0; }
        100% { opacity: 0; }
    }
	



.kolor15 {
    /* Identyczne tło jak w kolor16 - spójność góry strony */
    background-color: rgba(30, 10, 50, 1);
    background-image: linear-gradient(90deg, rgba(20, 10, 30, 1) 0%, rgba(55, 20, 90, 1) 50%, rgba(20, 10, 30, 1) 100%);
    
    width: 100%;
    height: 70px; /* Wysokość dopasowana do paska narzędzi */
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    
    /* Złote linie identyczne jak w kolor16 */
    border-top: 1px solid rgba(184, 134, 11, 0.3);
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
    
    /* Cień wewnętrzny dla głębi */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.kolor15-inner {
    max-width: 1240px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-family: 'Georgia', serif;
}

/* Stylizacja tekstu z DATĄ */
.kolor15 .data {
    color: #e6be8a !important; /* Stare złoto */
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(157, 80, 187, 0.6);
    white-space: nowrap;
}

.kolor15 .search-wrapper {
    display: flex;
    align-items: center;
}

/* Pole INPUT wyszukiwarki */
.kolor15 input[type="text"] {
    padding: 10px 15px;
    width: 250px;
    background: rgba(0, 0, 0, 0.4); /* Bardzo ciemne, przejrzyste tło */
    border: 1px solid rgba(157, 80, 187, 0.5); /* Fioletowa obwódka */
    border-radius: 5px;
    color: #ffffff !important;
    font-family: 'Georgia', serif;
    outline: none;
    transition: all 0.3s ease;
}

.kolor15 input[type="text"]:focus {
    border-color: #ffdf91; /* Złoto przy aktywnym polu */
    box-shadow: 0 0 10px rgba(157, 80, 187, 0.5);
    background: rgba(255, 255, 255, 0.05);
}

/* Przycisk wyszukiwania */
.kolor15 button {
    padding: 9px 18px;
    margin-left: 10px;
    background: linear-gradient(to bottom, #b8860b, #8b6508); /* Złoty gradient przycisku */
    border: 1px solid #ffdf91;
    border-radius: 5px;
    color: #ffffff !important;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.kolor15 button:hover {
    background: linear-gradient(to bottom, #d4af37, #b8860b);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    transform: translateY(-1px);
}

/* Kolor znaku zapytania lub ikonki lupy jeśli ją masz */
.kolor15 input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}


.kolor16 {
    /* Zmieniamy zieleń na ciemny, magiczny fiolet (identyczny z Twoim menu i kolor15) */
    background-color: rgba(30, 10, 50, 1);
    background-image: linear-gradient(90deg, rgba(20, 10, 30, 1) 0%, rgba(55, 20, 90, 1) 50%, rgba(20, 10, 30, 1) 100%);
    
    height: 120px;
    width: 100%;
    max-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-family: 'Georgia', serif; /* Zmieniamy na szeryfową, pasującą do Tarota */
    box-sizing: border-box;
    text-align: center;
    
    /* Dodajemy złote linie obramowania, aby pasowało do reszty pasków */
    border-top: 1px solid rgba(184, 134, 11, 0.3);
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
    
    /* Efekt głębi tła */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.kolor16 .data {
    margin: 0 auto;
    text-align: center;
    white-space: normal;
    /* Delikatna fioletowa poświata pod tekstem */
    text-shadow: 0 0 10px rgba(157, 80, 187, 0.6);
}

.kolor16 .bialy {
    color: #ffffff !important; /* Wymuszamy biały kolor dla tekstu */
    margin: 0;
    padding: 0;
}

.kolor16 .bialy p {
    margin: 6px 0;
    line-height: 1.6;
    color: #ffffff !important;
}

/* Styl dla linków - zmieniamy na złoto, które teraz steruje stroną */
.kolor16 .bialy a {
    color: #e6be8a !important; /* Stare złoto zamiast bieli */
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.kolor16 .bialy a:hover {
    /* Zamiast czerwonego (red), który nie pasuje, dajemy jasne złoto/biel */
    color: #ffffff !important;
    background-color: rgba(157, 80, 187, 0.4); /* Fioletowe podświetlenie tła linku */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Styl dla przycisku przełącznika trybu jasny/ciemny */
.button-toggle {
    /* 1. Pozycjonowanie, aby nie przesuwało loga i menu */
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999; /* Zapewnia widoczność nad innymi elementami */

    /* 2. Stałe wymiary (zapobiegają skakaniu menu przy zmianie tekstu) */
    width: 130px;
    height: 38px;
    
    /* 3. Wygląd i Kolorystyka (dopasowana do ciemnego stylu) */
    background: rgba(0, 0, 0, 0.6);      /* Ciemne tło dla kontrastu */
    border: 1px solid #ffdf91;          /* Jasnozłota ramka */
    color: #ffdf91;                     /* Jasnozłoty tekst */
    border-radius: 5px;
    cursor: pointer;
    
    /* 4. Typografia i Czytelność */
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;                /* Tekst zawsze w jednej linii */
    
    /* 5. Centrowanie zawartości przycisku */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    
    /* 6. Animacja i efekty */
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(255, 223, 145, 0.2);
}

/* Efekt po najechaniu myszką */
.button-toggle:hover {
    background: #ffdf91;                /* Złote tło */
    color: #1e0a32;                     /* Fioletowy tekst */
    box-shadow: 0 0 15px rgba(255, 223, 145, 0.6);
    text-shadow: none;                  /* Usuwamy cień tekstu przy ciemnych literach */
}


/* Ta reguła sprawi, że wszystkie teksty oznaczone tą klasą będą białe */
.tekst-kolorowy {
    color: #ffffff !important;
    /* Możesz tu dodać coś jeszcze, np. delikatny cień, by lepiej było widać na fiolecie */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
}