.document {
    display: none; /* Hide all document divs by default */
    background-size: contain; /* Ensures the image fits within the container without cutting off */
    background-position: center;
    background-repeat: no-repeat;
    width: 30%; /* Responsive width */
    height: 50%; /* Responsive height */
    text-align: center;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    color: white; /* Adjust text color for visibility on the background */
    position: absolute;
    right: 10px; /* Positioned to the right of the screen */
    top: 60%; /* Centered vertically */
    transform: translateY(-50%); /* Ensures the div is vertically centered */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.document p {
    font-size: 1em;
    position: absolute;
    margin: 0;
    color: black;
}

/* Background images for each document */
#identity {
    background-image: url('images/identity.png');
}

#permis-conduire {
    background-image: url('images/permis-conduire.png');
}

#carte-grise {
    background-image: url('images/carte-grise.png');
}

#assurance {
    background-image: url('images/assurance.png');
}

#permis-bateau {
    background-image: url('images/permis-bateau.png');
}

#permis-avion {
    background-image: url('images/permis-avion.png');
}

#permis-chasse {
    background-image: url('images/permis-chasse.png');
}

/* Positioning each <p> for each document type */

/* Identity Card */
#identity #identity-lastname {
    top: 44%; left: 55%;
}
#identity #identity-firstname {
    top: 51%; left: 55%;
}
#identity #identity-sex {
    top: 57%; left: 55%;
}
#identity #identity-dateofbirth {
    top: 57%; left: 82%;
}
#identity #identity-documentID {
    top: 70%; left: 55%;
}
#identity #identity-height {
    top: 22%; left: 23%;
}


/* Permis de Conduire - Specific Field Positioning */
#permis-conduire #permis-conduire-name {
    top: 23%; left: 28%;
}
#permis-conduire #permis-conduire-dateofbirth {
    top: 27%; left: 28%;
}
#permis-conduire #permis-conduire-id {
    top: 31%; left: 28%;
}
#permis-conduire #permis-conduire-moto-date {
    top: 46.8%; left: 59%; font-size: 0.8em;
}
#permis-conduire #permis-conduire-voiture-date {
    top: 51.5%; left: 59%; font-size: 0.8em;
}
#permis-conduire #permis-conduire-camion-date {
    top: 67.5%; left: 59%; font-size: 0.8em;
}

/* Carte Grise */
#carte-grise #carte-grise-owner {
    top: 11.4%; left: 20%;
}
#carte-grise #carte-grise-plate {
    top: 16.3%; left: 23%;
}
#carte-grise #carte-grise-date {
    top: 21.1%; left: 23%;
}
#carte-grise #carte-grise-vehicle {
    top: 30%; left: 23%;
}
#carte-grise #carte-grise-documentID {
    top: 34%; left: 23%;
}

/* Assurance */
#assurance #assurance-name {
    top: 22%; left: 65%;
}
#assurance #assurance-plate {
    top: 40%; left: 3%;
}
#assurance #assurance-dateCreation {
    top: 28.5%; left: 0.5%;
}
#assurance #assurance-expiration {
    top: 28.5%; left: 16%;
}


/* Permis Bateau */
#permis-bateau #permis-bateau-name {
    top: 38%; left: 70%;
}
#permis-bateau #permis-bateau-id {
    top: 50%; left: 70%;
}
#permis-bateau #permis-bateau-date {
    top: 69%; left: 10%;
}

/* Permis Avion */
#permis-avion #permis-avion-name {
    top: 20%; left: 60%;
}
#permis-avion #permis-avion-id {
    top: 25%; left: 60%;
}
#permis-avion #permis-avion-date {
    top: 30%; left: 60%;
}

/* Permis Chasse */
#permis-chasse #permis-chasse-name {
    top: 45%; left: 36%;
}
#permis-chasse #permis-chasse-id {
    top: 50%; left: 36%;
}
#permis-chasse #permis-chasse-date {
    top: 55%; left: 36%;
}
