.column1 {
    float: left;
    width: 100%;
    padding:1px;
    height: 100%; /* Should be removed. Only for demonstration */

}
#main{
    float: left;
    width: 80%;
    padding:1px;
    height: 100%; /* Should be removed. Only for demonstration */
}

#canvas{
    z-index: 1;
    width: 100%;
    height: 95vh;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, .4);
    transition: 0.2s;
    border-radius: 9px ;
}
#canvas1{
    z-index: 1001;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, .4);
    transition: 0.2s;
    border-radius: 9px ;
}
body{
    overflow: hidden; /* Blocca lo scorrimento */
}


.column2 {
    flex: 1; /* Fa in modo che entrambe le colonne occupino lo stesso spazio disponibile */
}
.container {
    display: flex;
}
#side{
    padding-left: 10px;
}
#lightPosition{
    padding-left: 10px;
    flex:1;

}   
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay semi-trasparente */
    backdrop-filter: blur(10px); /* Sfocatura */
    display: none; /* Nascondi di default */
    z-index: 1000; /* Assicurati che sia sopra tutto */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
}
#ContentInside {
    width: 80%;
    height: 80%; /* Altezza automatica per adattarsi al contenuto */
    background: rgb(255, 255, 255); /* Sfondo bianco */
    padding: 20px; /* Padding interno */
    border-radius: 10px; /* Raggio per gli angoli */
    display: flex;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Ombra per profondità */
    position: relative; /* Necessario per il posizionamento del bottone */
}
#buttonX {
    position: absolute; /* Posizionamento assoluto per il bottone */
    top: 10px; /* Spazio dall'alto */
    right: 10px; /* Spazio da destra */
    background: #ff4d4d; /* Colore rosso per il bottone */
    border: none; /* Nessun bordo */
    color: white; /* Colore del testo */
    font-size: 16px; /* Dimensione del testo */
    width: 30px; /* Larghezza del bottone */
    height: 30px; /* Altezza del bottone */
    border-radius: 50%; /* Rende il bottone circolare */
    cursor: pointer; /* Cambia il cursore quando si passa sopra */
    display: flex;
    align-items: center; /* Centro verticale */
    justify-content: center; /* Centro orizzontale */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Ombra per profondità */
}

#ContentInside button:hover {
    background: #ff1a1a; /* Colore più scuro al passaggio del mouse */
}