body {
            background-color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            /* Occupa l'intero schermo */
            margin: 0;
            padding: 0;
            color: white;
            font-family: 'Magneto', bold;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow: hidden;
            /* Evita lo scorrimento */
        }

        h1 {
            font-size: 3vw;
            /* Font size relativo alla larghezza dello schermo */
            font-weight: bold;
            margin: 1vh 0;
            /* Margine verticale adattabile */
            text-align: center;
        }

        .main-layout {
            display: flex;
            flex-direction: row;
            /* Mantiene rettangoli e cerchio sulla stessa riga */
            justify-content: space-between;
            align-items: center;
            width: 100%;
            /* Occupa tutta la larghezza dello schermo */
            height: 70%;
            /* Occupa il 70% dello schermo */
            padding: 0 2vw;
            /* Margini laterali */
            gap: 2vw;
            /* Spazio tra i contenitori */
            position: relative;
            box-sizing: border-box;
            /* Include padding e margini */
        }

        .container {
            display: flex;
            gap: 2vw;
            /* Spazio tra i rettangoli */
            justify-content: flex-start;
            align-items: center;
            flex: 1;
            /* Occupa tutto lo spazio disponibile */
            min-width: 60%;
            /* Assicura spazio sufficiente per i rettangoli */
            box-sizing: border-box;
        }

        .rectangle-container {
            width: 18vw;
            /* Incrementa la larghezza */
            max-width: 300px;
            /* Dimensione massima */
            margin-bottom: 80;
        }

        .rectangle {
            width: 100%;
            aspect-ratio: 4 / 5;
            /* Mantiene il rapporto larghezza/altezza */
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            /* Aggiunge un bordo arrotondato */
        }

        .rectangle img {
            max-width: 100%;
            /* Immagini scalate per adattarsi */
            max-height: 100%;
            object-fit: contain;
            /* Evita distorsioni */
            display: none;
            /* Assicura visibilità */
            image-rendering: optimizeQuality;
            /* Ottimizza la qualità dell'immagine */
        }

        .image-container {
            position: relative;
            width: 100%;
            margin-top: 1vh;
            text-align: center;
        }

        .image-container img {
            width: 100%;
            height: auto;
            object-fit: contain;
            /* Adatta l'immagine mantenendo le proporzioni */
        }

        .needle {
            position: absolute;
            top: 39.3%;
            /* Default */
            left: 48.9%;
            /* Default */
            transform: translate(-50%, -50%) rotate(-129deg);
            width: 10%;
            /* Dimensioni adattive */
            height: 30%;
            /* Altezza adattiva */
            background-color: red;
            clip-path: polygon(60% 100%, 60% 15%, 100% 15%, 50% 0%, 0% 15%, 40% 15%);
            cursor: move;
            /* Mostra il cursore per il dragging */
        }

        .rotation-control {
            margin-top: 1vh;
            -webkit-appearance: none;
            width: 80%;
            height: 1vh;
            /* Altezza adattiva */
            background: white;
            outline: none;
            opacity: 0.7;
            -webkit-transition: 0.2s;
            transition: opacity 0.2s;
        }

        .rotation-control:hover {
            opacity: 1;
        }

        .rotation-control::-webkit-slider-runnable-track {
            width: 100%;
            height: 12px;
            /* Aumentato da 8px */
            background: white;
        }

        .rotation-control::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 30px;
            /* Aumentato da 20px */
            height: 30px;
            /* Aumentato da 20px */
            background: red;
            border-radius: 50%;
            cursor: pointer;
            margin-top: -9px;
            /* Aumentato da -6px */
        }

        .rotation-control::-moz-range-track {
            width: 100%;
            height: 12px;
            /* Aumentato da 8px */
            background: white;
        }

        .rotation-control::-moz-range-progress {
            background: red;
        }

        .rotation-control::-moz-range-thumb {
            width: 30px;
            /* Aumentato da 20px */
            height: 30px;
            /* Aumentato da 20px */
            background: red;
            border-radius: 50%;
            cursor: pointer;
        }

        .rotation-control::-ms-fill-lower {
            background: red;
        }

        .rotation-control::-ms-fill-upper {
            background: white;
        }

        .rotation-control::-ms-thumb {
            width: 30px;
            /* Aumentato da 20px */
            height: 30px;
            /* Aumentato da 20px */
            background: red;
            border-radius: 50%;
            cursor: pointer;
        }

        .rotation-control:focus::-ms-fill-lower {
            background: red;
        }

        .rotation-control:focus::-ms-fill-upper {
            background: white;
        }

        .circle {
            width: 12vw;
            /* Dimensioni relative */
            height: 12vw;
            max-width: 250px;
            /* Limite massimo */
            max-height: 250px;
            background-image: url('images/WellAU.png');
            background-size: cover;
            border: 0.5vw solid white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            overflow: hidden;
            position: absolute;
            top: 50%;
            /* Posiziona al centro verticale */
            right: 2vw;
            /* Posiziona a destra dello schermo */
            transform: translateY(-50%);
            flex-shrink: 0;
            /* Evita che il cerchio si ridimensioni troppo */
            margin-left: 2vw;
            /* Spazio fisso tra rettangoli e cerchio */
        }

        .circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .circle input[type="file"] {
            display: none;
        }

        .circle span {
            position: absolute;
            color: white;
            font-size: 1.5em;
            text-align: center;
            display: none;
        }

        .toggle-button {
            margin-top: 20px;
            /* Aumenta il margine superiore */
        }

        .toggle-button img {
            width: 50px;
            height: auto;
        }

        /* Garantisce che il cerchio non si sovrapponga */
        .container {
            flex: 1 1 auto;
            /* Permette ai rettangoli di occupare più spazio possibile */
        }

        .circle {
            flex-shrink: 0;
            /* Evita che il cerchio si ridimensioni e si sovrapponga */
            margin-left: auto;
            /* Spinge il cerchio completamente a destra */
        }

        .circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        /* Bottoni in basso */
        .main-buttons {
            display: flex;
            gap: 1vw;
            /* Spazio tra i bottoni */
            justify-content: center;
            /* Centra orizzontalmente */
            align-items: center;
            /* Centra verticalmente */
            flex-wrap: nowrap;
            /* Mantiene i bottoni su una riga */
            position: absolute;
            /* Posiziona i bottoni rispetto al contenitore */
            bottom: 5%;
            /* Distanza dal fondo del container */
            left: 44%;
            /* Centra orizzontalmente rispetto al container */
            transform: translateX(-50%);
            /* Compensa il 50% di larghezza per centrare */
        }


        .button {
            background-color: black;
            color: white;
            padding: 0.8vh 1.5vw;
            border: 0.2vw solid white;
            border-radius: 0.5vw;
            cursor: pointer;
            font-size: 1.2vw;
            /* Adattabile alla dimensione dello schermo */
            transition: background-color 0.3s, color 0.3s;
        }

        .button:hover {
            background-color: white;
            color: black;
        }

        @keyframes flash {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .flash {
            animation: flash 1s ease-in-out infinite;
            /* Lampeggio continuo */
        }

        /* Countdown rosso */
        .countdown {
            color: red;
            font-size: 2em;
            margin-top: 20px;
            /* Margine per distanziare dal well */
            text-align: center;
        }

        /* Schermi grandi */
        @media (min-width: 1920px) {
            .rectangle-container {
                width: 12vw;
                /* Dimensioni più piccole per schermi grandi */
            }

            .circle {
                width: 15vw;
                height: 15vw;
            }

            .button {
                font-size: 1vw;
            }
        }

        /* Schermi medi */
        @media (max-width: 1200px) {
            .rectangle-container {
                width: 18vw;
            }

            .circle {
                width: 20vw;
                height: 20vw;
            }

            h1 {
                font-size: 4vw;
            }

            .button {
                font-size: 1.5vw;
            }
        }

        /* Schermi piccoli */
        @media (max-width: 768px) {
            .rectangle-container {
                width: 22vw;
            }

            .circle {
                width: 25vw;
                height: 25vw;
                right: 1vw;
                /* Riduce la distanza laterale */
            }

            h1 {
                font-size: 5vw;
            }

            .button {
                font-size: 2vw;
            }
        }

        .modal {
            display: none;
            /* Nascosto di default */
            position: fixed;
            /* Posizionamento rispetto alla finestra */
            top: 0;
            left: 0;
            width: 100%;
            /* Copre tutta la larghezza */
            height: 100%;
            /* Copre tutta l'altezza */
            background-color: rgba(0, 0, 0, 0.5);
            /* Sfondo semi-trasparente */
            z-index: 999;
            /* Dietro al modal */
        }

        .modal-content {
            background-color: white;
            position: fixed;
            /* Posizionamento assoluto rispetto alla finestra */
            top: 50%;
            /* Centrato verticalmente */
            left: 50%;
            /* Centrato orizzontalmente */
            transform: translate(-50%, -50%);
            /* Corregge l'offset per centrare */
            padding: 20px;
            border-radius: 5px;
            width: 60%;
            max-width: 500px;
            color: black;
            text-align: center;
            font-family: Arial, Verdana, "Times New Roman", serif;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            /* Aggiunge un'ombra */
            z-index: 1000;
            /* Assicura che il modal sia sopra gli altri contenuti */
        }

        .modal-content h2 {
            margin-top: 0;
            font-size: 1.5em;
            font-family: "Times New Roman", serif;
            /* Font classico per il titolo */
        }

        .modal-content ul {
            list-style-type: none;
            padding: 0;
            font-family: Verdana, Arial, sans-serif;
            /* Font leggibile per l'elenco */
        }

        .modal-content li {
            margin: 10px 0;
            font-size: 1em;
        }

        .modal-content a {
            color: blue;
            text-decoration: none;
            font-family: Arial, Verdana, sans-serif;
            /* Font semplice e leggibile */
            font-size: 1em;
        }

        .modal-content a:hover {
            text-decoration: underline;
            font-weight: bold;
        }

        .close-button {
            color: red;
            float: right;
            font-size: 1.5em;
            font-weight: bold;
            cursor: pointer;
            font-family: Arial, sans-serif;
            /* Font moderno e chiaro */
        }