/* Styles généraux pour le corps et l'arrière-plan */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'overwaveregular';
    background-color: #000;
    font-size: 16px;
}

/* Style pour la vidéo de fond */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style pour le contenu centré */
.content {
    position: absolute;
    top: 50%;
    left: 48.5%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 1;
}

/* Style pour le bouton */
.content button {
    background-color: rgba(170, 16, 253, 0.7);
    border: none;
    color: white;
    font-family: 'malicious_moonlightregular'!important;	
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: 0.3125rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.content button:hover {
    background-color: rgba(170, 16, 253, 1);
    transform: scale(1.1);
}

/* Style pour le conteneur de la voyante */
.voyante-container {
    display: none;
    text-align: center;
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transition pour le fondu */
}

/* Style pour l'image de la voyante */
.voyante-image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 600px; /* Largeur maximale du GIF */
    overflow: hidden; /* Cache tout texte qui déborde du conteneur */
}

/* Style pour le GIF de la voyante */
.voyante-container img {
    width: 100%;
    height: auto; /* Assure que l'image garde ses proportions */
}

/* Style pour le message dans la boule de cristal */
.crystal-ball-message {
    font-family: 'malicious_moonlightregular'!important;
    position: absolute;
    top: 68%;
    left: 48.5%;
    transform: translate(-50%, 0) scale(0); /* Initial scale */
    color: white;
    font-size: 1.5vw;
    max-width: 8vw;
    text-shadow: 0px 0px 10px rgb(0 0 0);
    z-index: 2;
    text-align: center;
    box-sizing: border-box;
    opacity: 0; /* Initial opacity */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Transition pour opacité et échelle */
}

/* Style pour le message de la boule de cristal avec effet de zoom */
.crystal-ball-message.zoom-in {
    transform: translate(-50%, 0) scale(1); /* Final scale */
}

/* Style pour le message de la boule de cristal avec effet de lévitation */
.crystal-ball-message.levitate {
    opacity: 1; /* Final opacity */
    animation: levitate 3s ease-in-out infinite; /* Animation de lévitation */
}

/* Keyframes pour l'effet de lévitation */
@keyframes levitate {
    0%, 100% {
        transform: translate(-50%, 0); /* Position initiale et finale */
    }
    50% {
        transform: translate(-50%, -10%); /* Point médian, légèrement au-dessus */
    }
}

/* Style pour le conteneur d'entrée */
.input-container {
    margin-top: 2rem;
}

/* Style pour le champ de texte */
.input-container input {
    padding: 0.625rem;
    font-size: 1.125rem;
    border-radius: 0.3125rem;
    border: 1px solid #aaa;
}

/* Style pour le bouton d'envoi */
.input-container button {
    margin-left: 0.625rem;
    padding: 0.625rem 1.25rem;
    font-size: 1.125rem;
    background-color: rgba(170, 16, 253, 0.7);
    color: white;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.input-container button:hover {
    background-color: rgba(170, 16, 253, 1);
}

/* Style pour le message de statut */
.status-message {
    margin-bottom: 2rem;
    font-size: 2rem;
    font-family: 'overwaveregular';
    transition: opacity 1s ease-in-out; /* Transition pour le fondu */
    opacity: 0; /* Initial opacity */
}

/* Classe pour afficher le message */
.status-message.show {
    opacity: 1;
}

/* Classe pour cacher le message */
.status-message.hide {
    opacity: 0;
}
input:disabled, button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@font-face {
    font-family: 'overwaveregular';
    src: url('overwave.woff2') format('woff2'),
         url('overwave.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'malicious_moonlightregular';
    src: url('malicious_moonlight_free.woff2') format('woff2'),
         url('malicious_moonlight_free.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}