body{
    font-family: 'shovit_gmregular_50', sans-serif; /* Specify the font family */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #ff4800; /* Couleur de fond */
}



/* Styles for the main text */
.main-text {
    position: fixed;
    font-size: 1.7vw;
    color: #000000; /* Adjust text color as needed */
    font-family: 'shovit_gmregular_50', sans-serif; /* Specify the font family */
    line-height: 1.1;
    text-align: center; /* Center the text */
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Styles for the link within the main text */
.main-text a {
    color: inherit; /* Use the same color as the main text */
    text-decoration: none; /* Remove default underline */
    position: relative; /* Establishes positioning context */
}

/* Personalized underline for the link */
.main-text a::before {
    content: ""; /* Required for pseudo-element */
    position: absolute;
    bottom: -4px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2.5px; /* Thickness of the underline */
    background-color: #000000; /* Color of the underline */
    transition: width 0.3s; /* Transition for the underline width */
}

/* Hover effect for the underline */
.main-text a:hover::before {
    width: 0%; /* Expand the width of the underline on hover */
}

/* Hide underline for email links */
.main-text a[href^="mailto"]::before {
    width: 0; /* Set the width of the underline to zero */
}

#img-space {
    position: fixed;
    bottom: 10%; /* Adjust the bottom position as needed */
    /*left: 50%; /* Positions the image in the center horizontally */
    left: calc(50% - 15%);
    /* transform: translateX(-50%); /* Centers the image horizontally */
    width: 30%; /* Set the width of the image */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

/* Styles for the second image (enter.png) */
#img-enter {
    position: fixed;
    top: 20vw; /* Adjust the top position as needed */
    right: 10%;
    width: 11%; /* Set the width of the image */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

/* Styles for the second image (enter.png) */
#img-skey {
    position: fixed;
    top:20vw; /* Adjust the top position as needed */
    left: 18%;
    width: 6%; /* Set the width of the image */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

#img-okey1,
#img-okey2,
#img-nkey {
    position: fixed;
    top: 26.2vw; /* Top position */
    width: 6%; /* Width of the image */
    height: auto; /* Maintain aspect ratio */
}

#img-skey {
    left: 13%; /* Left position */
}

#img-okey1 {
    left: 10%; /* Left position */
}

#img-okey2 {
    left: 16.2%; /* Left position */
}

#img-nkey {
    left: 22.45%; /* Left position */
}


/* Your existing CSS styles */

.img-draggable {
    cursor: pointer; /* Show pointer cursor when hovering over the images */
    position: fixed; /* Ensure images are fixed in their positions */
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

.img-draggable:hover {
    animation: wiggle 0.2s ease-out; /* Apply animation */
    animation-iteration-count: 3;
}



/*////////////////////////////////////////////////////*/
/* Media query for smaller screens */
@media screen and (max-width: 1366px) {
    .main-text {
        font-size: 1.9vw; /* Adjust font size for smaller screens */
        top: 50%; /* Adjust vertical position */
    }

    /* Personalized underline for the link */
    .main-text a::before {
    content: ""; /* Required for pseudo-element */
    position: absolute;
    bottom: -4px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2.5px; /* Thickness of the underline */
    background-color: #000000; /* Color of the underline */
    transition: width 0.3s; /* Transition for the underline width */
}    

@media screen and (max-width: 1024px) {
    .main-text {
        font-size: 2.5vw; /* Adjust font size for smaller screens */
        top: 50%; /* Adjust vertical position */
    }

    /* Personalized underline for the link */
    .main-text a::before {
    content: ""; /* Required for pseudo-element */
    position: absolute;
    bottom: -4px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2.5px; /* Thickness of the underline */
    background-color: #000000; /* Color of the underline */
    transition: width 0.3s; /* Transition for the underline width */
    }
}

@media screen and (max-width: 820px) {
    .main-text {
        font-size: 3.7vw; /* Adjust font size for smaller screens */
        top: 50%; /* Adjust vertical position */
    }

    /* Personalized underline for the link */
    .main-text a::before {
    content: ""; /* Required for pseudo-element */
    position: absolute;
    bottom: -4px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 2.5px; /* Thickness of the underline */
    background-color: #000000; /* Color of the underline */
    transition: width 0.3s; /* Transition for the underline width */
    }    

}

/* Media query for even smaller screens */
@media screen and (max-width: 430px) {
    .main-text {
        font-size: 3.7vw; /* Further adjust font size for very small screens */
        top: 50%; /* Further adjust vertical position */
    }

    /* Personalized underline for the link */
    .main-text a::before {
    content: ""; /* Required for pseudo-element */
    position: absolute;
    bottom: -3px; /* Adjust as needed */
    left: 0;
    width: 100%;
    height: 1.3px; /* Thickness of the underline */
    background-color: #000000; /* Color of the underline */
    transition: width 0.3s; /* Transition for the underline width */
    }
}