/* estil.css - full CSS per la teva petició (Català)
   Fonts: Comic Sans, Arial, Times
   Estructura: nav (capçalera) amb botó tornar (esquerra) i botó inici (dreta), content, footer
*/

:root{
  --bg:#dbe3f9;
  --primary:#0b74de;
  --muted:#666;
  --nav-height:70px;
  --max-width:1000px;
}

/* Tipografia global */
html{
  height:100%;
  margin:0;
  padding:0;
  font-family: "Comic Sans MS", Arial, Times, serif;
  background:var(--bg);
  color:#111111;
  font-size: medium;
}

body{
  font-size: medium;
  font-family: "Comic Sans MS", Arial, Times, serif;
  padding-top: 70px; /* ajusta segons l'alçada real de la navbar */
  background:var(--primary);
  height: var(--nav-height);
}

/* Encabezats */
h1{
  font-family: "Comic Sans MS", Arial, Times, serif;
  font-size:2.4rem ; 
  margin:0 0 0.5rem 0 ;
}
h2{
  font-family: "Comic Sans MS", Arial, Times, serif;
  font-size:2.0rem ; 
  margin:0 0 0.5rem 0;
}
h3{
  font-family: "Comic Sans MS", Arial, Times, serif;
  font-size:1.8rem ; 
  margin:0 0 0.5rem 0;
}
h4{
  font-family: "Comic Sans MS", Arial, Times, serif;
  font-size:1.6rem ; 
  margin:0 0 0.5rem 0;
}
h5{
  font-family: "Comic Sans MS", Arial, Times, serif;
  font-size:1.4rem ; 
  margin:0 0 0.5rem 0;
}
h6{
  font-family: "Comic Sans MS", Arial, Times, serif;
  font-size:1.2rem ; 
  margin:0 0 0.5rem 0;
}

/* Enllaços sense decoració i efecte hover */
a{
  text-decoration:none;
  color:var(--primary);
}
a:hover, a:focus{
  text-decoration:underline;
  color: #064a86;
  outline:none;
}

ul {
  list-style: none; /* o list-style-type: none; */
}
/* cants la finestra de les lletres */
#lyrics {
    display: none;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }
/* Navegació fixa superior */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  background:#1b4712;
  z-index:1000;
}

.navbar .nav-left,
.navbar .nav-right{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

/* Botons simples */
.button{
  display:inline-block;
  padding:0.45rem 0.75rem;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.08);
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  color:#eee;
}
.button:hover{
  background:rgba(11,116,222,0.06);
}

/* Estil específic per al botó tornar (esquerra) */
.btn-back::before{
  content:"←";
  margin-right:0.45rem;
}

/* Estil específic per a botó inici (dreta) */
.btn-home::after{
  content:"⟲";
  margin-left:0.45rem;
}

/* Contingut principal: deixem espai per la navbar */
.main-content{
  padding-top:calc(var(--nav-height) + 1rem);
  max-width:var(--max-width);
  margin:0 auto;
  padding-left:1rem;
  padding-right:1rem;
  box-sizing:border-box;
}

/* Div de contingut i peu de pàgina */
.content{
  margin:1rem 0 2rem 0;
}

.footer{
  border-top:1px solid #eee;
  padding:1rem;
  text-align:center;
  font-size:0.95rem;
  color:var(--muted);
}

/* Imatge forçada a 600x800 (mida fixa) */
.img-600x800{
  width:600px;
  height:800px;
  object-fit:cover; /* preserva aspect ratio omplint el contenedor */
  display:block;
  max-width:100%; /* responsiu: s'encollirà a pantalles petites */
}

/* Paràgrafs amb diferents alineacions */
.p-justificat{
  text-align:justify;
}
.p-centre{
  text-align:center;
}
.p-esquerra{
  text-align:left;
}
.p-dreta{
  text-align:right;
}

/* Accessibilitat: focus visible per a elements interactius */
.button:focus, a:focus{
  box-shadow:0 0 0 3px rgba(11,116,222,0.15);
}

    /* Exemple amb clamp() fa que la lletra tingui primacia i responsive la meva no la de bootrap*/
    .size_titol {
      font-size: clamp(1.2rem, 2vw + 0.5rem, 2.5rem) !important;
      font-weight: bold;
      color: #e61818 !important;
    }

    .size_normal {
      font-size: clamp(0.9rem, 1vw + 0.6rem, 1.2rem) !important;
      line-height: 1.5;
      color: #1e17ad;
    }


/* Responsivitat petita */
@media (max-width:640px){
  .navbar{padding:0 0.5rem;}
  .img-600x800{width:100%; height:auto;}
  h1{font-size:1.6rem;} 
}