/*
 * Globals
 */

/* --- 1. CONFIGURAZIONE COLORI E OMBRE --- */

/* Tema Chiaro */
:root, [data-bs-theme="light"] {
  --colore-laterale: #5f28654a;
  --colore-centrale: #ffffff;
  --colore-sfondo-custom: #ffffff;
  --colore-testo-custom: #601768;
  --colore-accento-custom: #bd23cdb5; 
  --colore-accento-custom2: #832dab; 
  --colore-barra: #6f1768;
  /* Ombra scura e morbida (Nera con opacità 12%) */
  --mia-box-shadow: 0 10px 30px rgba(#ead1f1, 0, 0, 0.12);
  /* Sfondo del box che risalterà sopra la sfumatura */
  --sfondo-box: #ffffff; 
}

/* Tema Scuro (Invertito) */
[data-bs-theme="dark"] {
  --colore-laterale: #3f0062;
  --colore-centrale: #020617;
   --colore-sfondo-custom: #91309b;
  --colore-testo-custom: #ffffff;
  --colore-accento-custom: #dcd6e2;
  --colore-accento-custom2: #e3a0ab;
  --colore-barra: #ffffff;
  /* Ombra per tema scuro: Nera profonda (0.5) per staccare dal fondo centrale, 
     oppure puoi usare un leggero riflesso (es. rgba(255,255,255,0.05)) */
  --mia-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  /* Il box sarà leggermente più chiaro del centro pagina per simulare la vicinanza alla luce */
  --sfondo-box: #501856; 
}

/* --- 2. APPLICAZIONE DELLO STILE --- */

/* Sfondo della pagina con sfumatura ai lati */
.mia-pagina {
  background-image: linear-gradient(
    to right, 
    var(--colore-laterale) 0%, 
    var(--colore-centrale) 50%, 
    var(--colore-laterale) 100%
  );
  
  min-height: 100vh;
  background-attachment: fixed;
}

/* Il contenitore o la "Card" che riceve l'ombra */
.mio-box-contenuto {
  background-color: var(--sfondo-box);
  box-shadow: var(--mia-box-shadow);
  
  /* Stile estetico del box */
  border-radius: 4px;
  padding: 0.5rem;
  transition: background-color 0.3s, box-shadow 0.3s; /* Cambia l'ombra fluidamente */
}


/* --- 2. APPLICAZIONE AI TUOI ELEMENTI --- */

/* Applica le variabili ai tuoi componenti personalizzati */
.mio-blocco-contenuto, p, h1, h2, h3 {
  /*background-color: var(--colore-sfondo-custom);*/
  color: var(--colore-testo-custom);
  /* Opzionale: aggiunge una transizione fluida al cambio colore */
  transition: background-color 0.3s ease, color 0.3s ease; 
}

.hr-personale
{
  /*background-color: var(--colore-sfondo-custom);*/
border: 10px solid var(--colore-barra);
  
}

.collegamento-personalizzato
{
    color: var(--colore-testo-custom);
    /* Opzionale: aggiunge una transizione fluida al cambio colore */
    transition: background-color 0.3s ease, color 0.3s ease; 
}

.mio-testo-evidenziato {
  color: var(--colore-accento-custom);
}

.mio-testo-evidenziato2 {
  color: var(--colore-accento-custom2);
}
.area-giochi, h2, h1, h3
{
    text-align: center;
}
h4, h5, h6, p
{
    font-family: "Merriweather";
   
}
.pindietro
{
    text-align: right;
}

h1, h2, h3, a
{
    font-family: "Ribeye";
   
}
a 
{
    text-decoration: none; /* Elimina la sottolineatura di default */
}

/* Stato al passaggio del mouse */
a:hover {
    color: #bd23cdb5;        
}

.cover-container {
  max-width: 100%;
  
}
.divriquadrohalloween
{
    padding: 1rem;
}

.halloween
{
    text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  /*box-shadow: inset 0 0 5rem rgba(154, 96, 164, 1);*/
  box-shadow: inset 0 0 5rem rgb(96, 23, 131) !important;
  
}
.imgadt 
{
    width: 100%;
    height: 100%;
    object-fit: cover; /* o cover */
    border-radius: 10px;
    -moz-border-radius: 10px; /* firefox */
    -webkit-border-radius: 10px; /* safari, chrome */
    
    border-style:solid;
    border-color:#702283;
    border-width:5px;
}
.cover-container1
{
    height:400px;
    
    padding:1%;
}
.cover-container2
{
    height: 400px;
   
    
    padding:2%;
}
.divriquadrogratis
{
    padding: 3rem;
}