/* Resetta margini e padding per tutti gli elementi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.circle{
    width: 150px;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #3f3f3f);
    
  }
  
/* Imposta il corpo della pagina */
body {
    height: 100vh; /* Imposta l'altezza della finestra del browser */
    display: flex;
    background-color: #ffffff;
    flex-direction: column; /* Imposta l'orientamento in colonna */
    justify-content: center; /* Allinea orizzontalmente al centro */
    align-items: center; /* Allinea verticalmente al centro */
    background-image: url(images/zombie/ComfyUI_02427_.png); /* Immagine di sfondo */
    background-size: cover; /* Adatta l'immagine di sfondo per coprire l'intero schermo */
    background-position: center; /* Centra l'immagine di sfondo */
    background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine */        font-family: "Jacquarda Bastarda 9", serif;
    font-weight: 400;
    font-style: normal;
    font-family: "Cutive Mono", monospace;

          
}

/* Stili per il contenitore */
.container {
    position: relative; /* Per posizionare gli elementi in modo assoluto */
    width: 650px; /* Larghezza del contenitore del cerchio */
    height: 650px; /* Altezza del contenitore del cerchio */
    overflow: hidden; /* Nasconde la parte dei link che esce dai bordi */
}

/* Stili per il cerchio */
.circle {
    position: absolute; /* Per posizionare i link in modo assoluto all'interno del cerchio */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Rende il contenitore rotondo */
    animation: rotate 10s linear infinite; /* Ruota il cerchio */
}

/* Animazione per la rotazione del cerchio */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
    
}

/* Stili per il link */
.link {
    position: absolute; /* Posizione assoluta per ogni link */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; /* Rimuove la sottolineatura del link */
    color: rgb(46, 45, 45);
}

/* Posizionamento dei link a forma di cerchio */
.link:nth-child(1) { transform: rotate(0deg) translateX(180px) rotate(0deg); }
.link:nth-child(2) { transform: rotate(60deg) translateX(180px) rotate(0deg); }
.link:nth-child(3) { transform: rotate(120deg) translateX(180px) rotate(0deg); }
.link:nth-child(4) { transform: rotate(180deg) translateX(180px) rotate(0deg); }
.link:nth-child(5) { transform: rotate(240deg) translateX(180px) rotate(0deg); }
.link:nth-child(6) { transform: rotate(300deg) translateX(180px) rotate(0deg); }
/* Animazione per ruotare il cerchio */

/* Stili per l'immagine */
.image {
    width: 250px; /* Imposta la larghezza dell'immagine */
    height: auto; /* Mantiene le proporzioni dell'immagine */
    margin-bottom: 5px; /* Distanza tra l'immagine e il testo */
    transition: transform 0.3s; /* Aggiunge una transizione per l'effetto di ingrandimento */
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: rotate 20s linear infinite; /* Ruota più lentamente, 30s per una rotazione completa */
}

/* Stili per il testo */
.text {
    
    font-size: 1rem; /* Dimensione del testo */
    color: #000000; /* Colore del testo */
    text-transform: lowercase; /* Rende il testo tutto in minuscolo */
}

/* Effetto di ingrandimento al passaggio del cursore */
.link:hover .image {
    transform: scale(1.1); /* Ingrandisce l'immagine al passaggio del cursore */
}

/* Cambia l'immagine del cursore quando il link è cliccato */
.link:active {
    cursor: url('images/cursorclick.png'), auto; /* Cambia il cursore quando il link è cliccato */
}

/* Cambia il cursore quando si clicca su tutto lo schermo */
body:active {
    cursor: url('images/cursorclick.png'), auto;
}

/* Stili per il footer */
.footer {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    color: #000000;
    font-family: "Cutive Mono", monospace;
    font-weight: 400;
    font-style: normal;   
    font-size: 0.8rem; /* Dimensione del testo del footer */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stili per il contenitore del testo embossato */
.embossed-container {
    text-align: center;
}

/* Stili per il testo embossato */
.embossed-text {
    font-size: 8rem;
    font-weight: bold;
    color: transparent; /* Rende il testo trasparente per mostrare l'effetto emboss */
    background: linear-gradient(45deg, #ccc, #eee); /* Gradiente per simulare l'effetto emboss */
    -webkit-background-clip: text; /* Usa il gradiente come clip del testo */
    background-clip: text; /* Compatibile con Firefox */
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.814),
        -1px -2px 0 rgba(255, 255, 255, 0.77),
        1px 1px 0 rgb(0, 0, 0),
        -1px 1px 0 rgb(0, 0, 0); /* Simula l'effetto di embossing */
    mix-blend-mode: multiply; /* Applica il mix-blend-mode per far interagire il testo con lo sfondo */
    margin-bottom: 50px;
    font-family: 'Times New Roman', Times, serif;
}
.embossed-text::before {
    content: attr(data-shadow);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 120px; /* Match the text size */
    text-transform: uppercase;
    color: rgb(0, 0, 0); /* Shadow color */
    z-index: -1; /* Place the shadow behind the text */
    text-shadow: -1px -2px 1px rgb(255, 255, 255), 1px 1px 3px rgb(0, 0, 0);
    mix-blend-mode: normal; /* Ensures the shadow is not affected by blend mode */
    pointer-events: none; /* Ensures the shadow does not interfere with interactions */
}


/* Stili per la granata */
.grenade-link {
    position: fixed;
    border-bottom: 80px; /* Posizione in basso */
    bottom: 80px;
    right: 20px; /* Posizione a sinistra */
    width: 200px;
    height: 200px;
}

.grenade-image {
    width: 100%;
    height: auto;
}

/* Stili per l'overlay */
.overlay {
    display: none; /* Inizialmente nascosto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Mostra sopra altri elementi */
}

.timer {
    font-size: 100px;
    color: rgb(252, 0, 0); /* Colore del testo del timer */
    font-family: 'Courier New', Courier, monospace;
}

body.new-background {
    background-image: url('images/backzombie.jpg'); /* Cambia il percorso con quello corretto */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Courier New', Courier, monospace; /* Cambia con il nome del font desiderato */
    color: #ffffff;
}
.menu-icon {
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}




/* Stili per dispositivi mobili */
@media (max-width: 600px) {
    .container {
        width: 100vw; /* Usa una larghezza più gestibile */
        height: 200vw; /* Mantiene un rapporto 1:1 */
        padding: 10px; /* Spaziatura interna */
        display: flex; /* Imposta il contenitore come un contenitore flessibile */
        justify-content: center; /* Centra orizzontalmente */
        align-items: center; /* Centra verticalmente */
        position: relative; /* Necessario per il posizionamento assoluto degli elementi interni */
    }

    .circle {
        width: 70vw; /* Occupa tutta la larghezza disponibile */
        height: 100%; /* Altezza automatica per mantenere le proporzioni */
    }
    .link:nth-child(1) { transform: rotate(0deg) translate(150px, -10px); }
    .link:nth-child(2) { transform: rotate(60deg) translate(150px, -10px); }
    .link:nth-child(3) { transform: rotate(120deg) translate(150px, -10px); }
    .link:nth-child(4) { transform: rotate(180deg) translate(150px, -10px); }
    .link:nth-child(5) { transform: rotate(240deg) translate(150px, -10px); }
    .link:nth-child(6) { transform: rotate(300deg) translate(150px, -10px); }
    
    .image {
        width: 60%; /* Dimensione dell'immagine per i dispositivi mobili */
        height: auto; /* Mantiene le proporzioni */
    }


    .embossed-text {
        font-size: 4.2rem;
        border-bottom: 50px;
    }

    .footer {
        font-size: 0.7rem; /* Dimensione del testo del footer per mobile */
    border-bottom: 10px;
    }

    #grenade {
        position: absolute; /* Posizionamento assoluto per la granata */
        top: 5px; /* Distanza dall'alto */
        right: 10px; /* Distanza da destra */
        display: flex; /* Riduce l'area cliccabile alla dimensione dell'immagine */
        width: 80px; /* Dimensione della granata */
        height: 100px; /* Mantiene le proporzioni */
        cursor: pointer; /* Cambia il cursore quando si passa sopra */
    }
    
    
    
}