html {
    font-family: 'Press Start 2P', monospace;
    line-height: 1.5; 
  }
  *,
  ::before,
  ::after {
    border-width: 0; 
    border-style: solid; 
    border-color: #e2e8f0;
  }
  a {
    color: inherit;
    text-decoration: inherit;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  @media (min-width: 1024px) {
    .container {
      max-width: 1024px;
    }
  }
  .bg-black {
    background-color: #000;
  }
  .bg-white {
    background-color: #fff;
  }
  .bg-tele-blue {
    background-color: #1410FF;
  }
  .bg-tele-yellow {
    background-color: #FEFF00;
  }
  .bg-tele-green {
    background-color: #00FF00;
  }
  .bg-tele-aqua {
    background-color: #01FFFF;
  }
  .hover\:bg-transparent:hover {
    background-color: transparent;
  }
  .hover\:bg-white:hover {
    background-color: #fff;
  }
  .hover\:bg-gray-100:hover {
    background-color: #f7fafc;
  }
  .hover\:bg-tele-blue:hover {
    background-color: #1410FF;
  }
  .border-2 {
    border-width: 2px;
  }
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .justify-between {
    justify-content: space-between;
  }
  .flex-auto {
    flex: 1 1 auto;
  }
  .m-1 {
    margin: 0.25rem;
  }
  .m-2 {
    margin: 0.5rem;
  }
  .mx-48 {
    margin-left: 12rem;
    margin-right: 12rem;
  }
  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-px {
    margin-left: 1px;
    margin-right: 1px;
  }
  .ml-2 {
    margin-left: 0.5rem;
  }
  .mt-4 {
    margin-top: 1rem;
  }
  .mr-4 {
    margin-right: 1rem;
  }
  .mb-4 {
    margin-bottom: 1rem;
  }
  .mb-5 {
    margin-bottom: 1.25rem;
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: 0.25rem;
  }
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
 .px-6 {
    padding-left: 6.5rem;
    padding-right: 4rem;
  }
  .pt-5 {
    padding-top: 1.25rem;
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .text-center {
    text-align: center;
  }
  .text-white {
    color: #fff;
  }
  .text-red-600 {
    color: #e53e3e;
  }
  .text-yellow-400 {
    color: #f6e05e;
  }
  .text-tele-yellow {
    color: #FEFF00;
  }
  .text-tele-green {
    color: #00FF00;
  }
  .text-lg {
    font-size: 1.125rem;
  }
  .w-20 {
    width: 5rem;
  }
  .w-1\/3 {
    width: 33.333333%;
  } 
  .w-full {
    width: 100%;
  }
  .h-2\/3 {
    height: 66.66667%;
  }
  body{
    font-family: 'Press Start 2P', monospace;
  } 
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:m-1 {
      margin: 0.25rem;
    }
    .md\:mx-1 {
      margin-left: 0.25rem;
      margin-right: 0.25rem;
    }
    .md\:p-8 {
      padding: 2rem;
    }
    .md\:px-20 {
      padding-left: 5rem;
      padding-right: 5rem;
    }    
    .md\:pl-3 {
      padding-left: 0.75rem;
    }
    .md\:pr-4 {
      padding-right: 1rem;
    } 
    .md\:text-4xl {
      font-size: 2.25rem;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:flex-row {
      flex-direction: row;
    }
    .lg\:text-sm {
      font-size: 0.875rem;
    }
    .lg\:text-2xl {
      font-size: 1.5rem;
    }
    .lg\:w-2\/3 {
      width: 66.666667%;
    }
	form {
		display: flex;
		align-items: center;
	}
	.absolute{
		z-index: -1;
	}

@media (max-width: 991px) {

  /* 1 ─ Scroll verticale, reset dimensioni */
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    width: 100% !important;
    background-color: #000; /* Assicura il nero sullo scroll */
  }

  .container {
    transform: none !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 12px !important; /* Leggermente più margine laterale */
    box-sizing: border-box;
    overflow-x: hidden;
  }

  html { font-size: 10px; }

  /* 2 ─ HEADER ARMONIZZATO */
  .c-header {
    padding: 1rem 0 !important; /* Più respiro verticale */
  }
  
  /* Nascondiamo "TELESIMOD" testuale (c'è già il logo sotto) per fare spazio */
  .c-header span.inline.text-white:not(#orologio) {
    display: none !important; 
  }
  
  /* Rimpiccioliamo leggermente l'input e l'orologio */
  #refpage { width: 35px !important; padding: 0 2px !important;}
  #orologio { 
    font-size: 0.75rem !important; 
    margin-left: 5px;
  }
  
  /* Bottoni lingua più compatti */
  #btn-it, #btn-en {
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  /* 3 ─ LOGO */
  .c-logo img { max-height: 42px !important; padding-top: 10px !important; }

  /* 4 ─ SUB-HEADER (HOT PROJECT) */
  .md\:p-8 { padding: 0.6rem !important; font-size: 0.85rem !important; }
  .flex-col.md\:flex-row.mt-4 {
    gap: 8px; /* Distanzia le etichette */
  }

  /* 5 ─ CONTENT AREA MAIN */
  .lg\:flex-row { flex-direction: column !important; }
  .lg\:w-2\/3 { width: 100% !important; margin: 0 !important; }

  /* 6 ─ SIDEBAR LINKS: Griglia 2 colonne pulita */
  .w-1\/3 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  
  .text-left.text-lg {
    font-size: 0.65rem !important;
    padding: 0.5rem !important;
    line-height: 1.3 !important;
    white-space: nowrap; /* Evita a capo strani */
    overflow: hidden; 
    text-overflow: ellipsis; /* Puntini se il testo sborda */
  }

  /* 7 ─ DISCLAIMER E FOOTER */
  #blink {
    white-space: normal !important;
    overflow: visible !important;
    font-size: 0.8rem !important;
    padding: 12px !important;
    line-height: 1.5;
  }
  
  .py-4.px-4 h1, h1.text-white {
    white-space: normal !important;
    font-size: 0.75rem !important;
    word-break: normal !important; /* Evita che le parole si spezzino a metà */
    text-align: center; /* Centra il testo del footer per eleganza */
    line-height: 1.6;
  }
}

/* Rimpicciolisce la foto in Chi Sono solo su mobile */
  .foto-profilo {
    max-width: 45% !important; /* Puoi abbassare o alzare questa percentuale per regolare la grandezza */
    height: auto !important;
  }