/* Estilos generales */
body {
    margin: 0%;
    padding: 0%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #05132e, #04040a);
    overflow: hidden;
}
svg{
    color: #e4e4ee;
}
.send{
    border-top-left-radius: 25%;
    background-color: #04040a;
    border-color: #04040a;
}
input{
    border-bottom-right-radius: 40%;
    color: whitesmoke;
    background-color: #04040a;
    border-color: #04040a;
}
.value{
    border-top-right-radius: 40%;
    background-color: #04040a;
    border-color: #04040a;
}
#error{
    text-align: center;
    color: red;
}

.backImage{
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Estilo cuando la imagen está expandida */
.back-image.expanded {
    transform: scale(1.5); /* Puedes ajustar el valor según el grado de expansión que desees */
}

.cabeza {
    margin-left: 0;
    float: left;
    position: absolute;
    top: 20%;
    left: 40%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

.title-section {
    position: fixed;
    top: 7%;
    left: 44%;
    transform: translate(-50%, -50%);
    padding: 10px;
    color: black;

}

.title-section h1.title {
    animation-name: slideIn;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}


.chatIframe {
    width: 100%;
    height: 160px;
    position: relative;
    top: 40%;
    left: 10%;
    transform: translate(-10%, -50%);
    padding: 10xp;
    color: black;
}

#chatIframe {
    width: 300%;
    top: 355px;
}

.backImage {
    border-radius: 200%;
}

li {
    color: hsla(0, 0%, 100%, 0.473);
}

.imgf {
    align-items: center;
    text-align: center;
    border-radius: 45%;
    color: #9999CC;
    position: fixed;
    top: 60%;
    left: 9%;
}

.photo-ico {
    width: 25px;
}

#imageInput {
    display: none;
}

.photo-ico {
    cursor: pointer;
}

.menu {
    background-color: rgba(255, 255, 255, 0.616);
    text-align: start;
    position: absolute;
    top: 95px;
    left: 0;
    width: 20%;
}

.back-image {
    background-color: rgba(10, 10, 10, 0.397);
    width: 200px;
    height: 250px;
    position: absolute;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
}

.ico-usr1 {
    background-color: rgba(107, 20, 20, 0.459);
    border-radius: 140%;
    width: 80%;
    height: 45px;
}

.search {
    text-align: end;
    margin: 0;
    position: static;
}


.search form {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

/* Estilos adicionales para clases e IDs mencionados */

/* Estilos para elementos específicos */

.backImage {
    border: 2px solid white; /* Añade un borde blanco de 2px */
    border-radius: 50%; /* Hace que la imagen tenga forma de círculo */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Añade una sombra con transparencia */
}

.imgf {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Añade una sombra alrededor de la imagen */
    transition: all 0.3s ease; /* Agrega una transición suave a los cambios */
}

.imgf:hover {
    transform: scale(1.1); /* Escala la imagen al 110% en hover */
}

.menu {
    border: 1px solid rgba(0, 0, 0, 0.3); /* Añade un borde delgado y semitransparente */
    border-radius: 10px; /* Hace que el menú tenga bordes redondeados */
}

.menu li {
    padding: 5px; /* Añade un espacio interno a los elementos de la lista */
    transition: all 0.3s ease; /* Agrega una transición suave a los cambios */
}

.menu li:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Cambia el color de fondo al pasar el ratón */
}
.title{
    color: #9999CC;
    font-family: 'Times New Roman', Times, serif;    
}