/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

/* ===== IMPORT FONTS DA FAVOLA ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');

html, body {
height: auto; /* Non forzare altezza fissa */
min-height: 100vh; /* Almeno tutta l'altezza schermo */
margin: 0; /* ELIMINA marginali di default dei browser */
padding: 0; /* ELIMINA padding di default */
}

body {
background-image: url('bosco-fatato.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 'Cinzel', serif;
display: flex;
flex-direction: column;

/* CURSORE PERSONALIZZATO */
/*cursor: url('https://cdn.pixabay.com/animation/2023/10/22/03/32/03-32-04-391__480.png'), auto;*/
}

a {
color: #fcdb79;
text-decoration: underline;
}

a:hover {
color: #ffffff;
}

a:visited {
color: #ffa500;
}

.heading-box {
padding: 20px;
text-align: center;
color: #fcdb79;
}

.flex-box{
display: flex;
flex-direction: row;
flex-wrap: wrap; /* Permette agli elementi di andare a capo */
gap: 20px;
padding: 10px;
}


.interests {
background-color: #6d3614;
border-radius: 5px;
padding: 20px;
padding-top: 5px;
text-align: left;
color: #fcdb79;
width: 25%;
min-width: 280px; /* Minimo per contenere i contenuti */
max-width: 400px;
margin: auto;
margin-left: 20px;
box-sizing: border-box;
}

.stories-box {
display: flex;
flex-direction: column;
text-align: center;
border: dashed;
border-radius: 5px;
border-color: #fcdb79;
padding: 20px;
padding-top: 5px;
margin-right: 60px;
width: 10%;
animation: lampeggia 0.8s ease-in-out infinite alternate;
}

@keyframes lampeggia {
from { border-color: rgba(252, 219, 121, 0.3); }
to { border-color: #fcdb79; }
}

.rss-button {
display: inline-block;
background-color: #6d3614;
color: #fcdb79;
padding: 5px;
text-decoration: none;
text-align: center;
font-weight: bold;
border-radius: 5px;
margin-top: 15px;
transition: all 0.3s ease; /* Effetto fluido */
margin-bottom: 20px;
}

.rss-button:hover {
background-color: #ffffff; /* Diventa bianco allo hover */
color: #6d3614;
transform: translateY(-2px); /* Si alza leggermente */
box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Ombra elegante */
}

.side_bar{
  color: #ffa500;
  margin: 2px;
  margin-bottom: 4px;
  }
  
.footer {
  text-align: center;
  color: #ffa500;
  margin: 5px;
  }
  
  /*pagina articoli inglese*/

.articles-list {
background-color: #6d3614;
border-radius: 15px;
display: flex;
flex-direction: column;
margin: 20px;
padding: 10px;
text-align: justify;
min-width: 280px; /* Minimo per contenere i contenuti */
max-width: 400px;
color: #fcdb79;
}

.article-structure {
background-color: #6d3614;
border-radius: 15px;
display: flex;
margin: 50px;
margin-bottom: 5px;
padding: 20px;
text-align: justify;
color: #fcdb79;
font-family: 'Arial', serif;
line-height: 1.5;
}

.article-heading {
margin: 50px;
padding: 20px;
text-align: center;
color: #fcdb79;
font-size: 50px;
}

.back-link {
margin: 50px;
}


/* Media Query per schermi medi (tablet) */
@media (max-width: 768px) {
.interests {
width: 45%; /* Occupa circa metà dello schermo */
}
}

/* Media Query per schermi piccoli (mobile) */
@media (max-width: 500px) {
.interests {
width: 90%; /* Quasi tutto lo schermo */
font-size: 14px; /* Testo leggermente più piccolo */
}
}


/* Storie in italiano */
.header-container {
    display: flex;
    justify-content: space-between;  /* Titolo sinistra, Immagine destra */
    align-items: center;              /* Centra verticalmente */
    padding: 20px;
}

.stories-title {
    color: #fcdb79;
    text-align: center;
    margin: 0;
}

.header-icon {
    image-rendering: pixelated;
    width: 80px;                      /* Dimensione opzionale */
    height: auto;
}

header {
    padding: 20px;
    text-align: center;
    color: #fcdb79;
}

.stories-box_ita {
    border-radius: 50px;
    border-radius: 10px;
    margin: 50px auto;
    padding: 20px;
    color: #fcdb79;
    text-align: justify;
    font-family: 'Arial', serif;
    line-height: 1.5;
    max-width: 600px;
    min-width: 280px;
     /* Dimensione fissa dell'altezza */
    max-height: 400px;           /* Altezza massima prima dello scroll */
    overflow-y: auto;            /* Abilita lo scrolling verticale SOLO quando necessario */
    overflow-x: hidden;          /* Nasconde eventuale scrollbar orizzontale */
    

    background: linear-gradient(to bottom,
            rgba(80, 40, 10, 0.4) 0%,
            rgba(100, 55, 15, 0.45) 15%,
            rgba(120, 65, 20, 0.5) 30%,
            rgba(140, 75, 25, 0.55) 50%,
            rgba(160, 85, 30, 0.5) 70%,
            rgba(180, 95, 35, 0.45) 85%,
            rgba(200, 110, 40, 0.4) 100%);

    backdrop-filter: blur(2px);
}