/*Almanacco Penelope iltelaiodipenelope.it */
body {
background-color:transparent;
overflow:hidden;
padding:0;
margin: 0;
}
.box{
position: relative;
border: 3px solid #b84c2c;
background: url('/gadget/almanacco/cozy_images/img/penelope_autunno.jpg') center/cover no-repeat;
width: 260px;
height: 360px;
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: 305px;
background: rgba(201, 197, 148, 0.15);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 6px 12px rgba(36, 35, 35, 0.15);
-webkit-backdrop-filter: blur(4px);
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: #653b23; 
margin: auto;
}
.titolo {
font-family: "Handlee", cursive;
line-height: 1.2;
font-size: 16px;
color: #69431f;
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: #653b23;
margin-top: 8px;
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.testo_scuro {
font-family: "Handlee", cursive;
line-height: 1.3;
font-size: 14px;
color: #472613ff;
text-align: center;
margin-top: 8px;
margin-left: auto;
margin-right: auto;
}
.testo_strong {
font-family: "Handlee", cursive;
line-height: 1.2;
font-size: 16px;
color: #653b23;
font-weight: bold;
margin-top: 8px;
}
.telaio-credits {
position: absolute;
bottom: 2px;
left: 20px;
}  
a:link { 
text-decoration: none; 
cursor:nw-resize;
font-family: "Handlee", cursive; 
font-size: 14px;
color: #472b10ff; 
}
a:visited { 
text-decoration:none; 
cursor:nw-resize;
font-family: "Handlee", cursive; 
font-size: 14px;
color: #472b10ff; 
}
a:hover {
text-decoration: underline; 
color: #d66f0eff;
}
.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); }
}