/*Almanacco Penelope iltelaiodipenelope.it */
body {
background-color:transparent;
overflow:hidden;
padding:0;
margin: 0;
}
.box{
position: relative;
border: 3px solid #e5a1a7;
background: url('/gadget/almanacco/pastello/img/penelope_ciliegio.jpg') center/cover no-repeat;
width: 260px;
height: 430px;
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(41, 39, 39, 0.3);
}  
.box-content{
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
padding: 10px;
top: 16px;
left: 12px;
width: 230px;
height: 380px;
background: rgba(197, 152, 172, 0.15);
backdrop-filter: blur(3px);
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 6px 16px rgba(36, 35, 35, 0.15);
-webkit-backdrop-filter: blur(3px);
border-radius: 8px;
box-sizing: border-box;
}
.almanacco{
position: absolute;
text-align: center; 
font-family: "Handlee", cursive; 
line-height: 1.3; 
font-size: 14px; 
color: #772332; 
margin: auto;
}
.titolo {
font-family: "Handlee", cursive;
line-height: 1.2;
font-size: 18px;
color: #772332;
font-weight: bold;
margin-top: 4px;
margin-bottom: 4px;
text-align: center;
}
.testo {
font-family: "Handlee", cursive;
line-height: 1.3;
font-size: 14px;
color: #772332;
text-align: center;
margin-top: 8px;
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
}
.testo-proverbio {
width: 85%;
height: 40px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: "Handlee", cursive;
line-height: 1.3;
font-size: 14px;
color: #772332;
font-style: italic;
overflow: hidden;
white-space: pre-line;
}
.testo_scuro {
font-family: "Handlee", cursive;
line-height: 1.3;
font-size: 14px;
color: #521822;
text-align: center;
margin-top: 8px;
text-align: center;
}
.telaio-credits {
position: absolute;
bottom: 2px;
left: 10px;
}  
a:link { 
text-decoration: none; 
cursor:nw-resize;
font-family: "Handlee", cursive; 
font-size: 12px;
color: #772332; 
}
a:visited { 
text-decoration:none; 
cursor:nw-resize;
font-family: "Handlee", cursive; 
font-size: 12px;
color: #772332; 
}
a:hover {
text-decoration: underline; 
color: #52131fff;
}
.pioggia {
position:absolute;
left:0;
top:0;
width:180%;
height:450px;
pointer-events:none;
}
.brillantino{
position:absolute;
top:-40px;
animation: caduta linear infinite;
animation-duration: calc(5s + var(--i) * 0.5s);
animation-delay: calc(var(--i) * 0.5s);
}
@keyframes caduta{
from { transform: translateY(-40px); }
to { transform: translateY(320px); }
}