header{
    background-image:url(Sources/wallgat_1920x1200.jpg) ;
    background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
    font-family: fantasy;
    padding: 55px 60px; /* Relleno interno del título */
    font-size: 40px;
    text-align: center;
}


.titulo {
    max-width: 100%; /* Asegura que el logo no se vuelva más grande que el contenedor padre (header) */
    color: #c5c5c5;
    text-decoration: wavy;

}

body{
    background: url(Sources/wallmateeialistic.com_1920x1200.jpg);
    background-size: cover;
    background-color: black;
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: 870px;
}

form{
    justify-content: center;
    align-items: center;
    display: flex;
    margin: auto;
    max-width: 90%;


}

.container{
    /* Otros estilos para el contenedor, como color de fondo, relleno, etc. */
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
    width: 100%; /* Ajusta el ancho del contenedor según tus necesidades */
    padding-top: 40px; /* Ajusta el espacio entre #msg y el contenedor */
    gap: 1px; /* Separar las textareas con un espacio entre ellas */
}

.button-container{
    display: flex;
    gap: 10px; /* Espacio entre los contenedores */
    padding-bottom: 30px;
}

.textarea-container{
    padding-top: 1px; /* Ajusta el espacio entre #input-txt y el contenedor */
    gap: 10px; /* Espacio entre los contenedores */
}

.textarea-container2{
    padding-top: 1px; /* Ajusta el espacio entre #input-txt y el contenedor */
    gap: 10px; /* Espacio entre los contenedores */
}


#input-txt {
    /* Estilos para el campo de entrada */
    opacity: 0.4;
    background-size: cover;
    background-image: url(Sources/wallgat_1920x1200.jpg);
    font-size: 1rem; /* Ajusta el tamaño del texto según sea necesario */
    text-align: left;
    border: 0.12rem solid; /* Ajusta el borde según sea necesario */
    border-radius: 15px;
    color: white;
    border-color: #88D8C0;
    background-color: transparent;
    text-decoration: underline; /* Subrayado al pasar el ratón por encima */
    resize: none; /* Evita que el usuario pueda redimensionar el textarea */
    cursor: text; /* Cambia el cursor a un marcador de texto */
    justify-content: space-between; /* Espacio entre los elementos */
    transition: opacity 0.3s ease; /* Transición suave de la opacidad */
    width: 100%;
}

#msg{
    /* Estilos para el campo de entrada */
    opacity: 0.4;
    background-size: cover;
    background-image: url(Sources/wallgat_1920x1200.jpg);
    font-size: 1rem; /* Ajusta el tamaño del texto según sea necesario */
    text-align: left;
    border: 0.12rem solid; /* Ajusta el borde según sea necesario */
    border-radius: 15px;
    color: white;
    border-color: #88D8C0;
    background-color: transparent;
    text-decoration: underline; /* Subrayado al pasar el ratón por encima */
    resize: none; /* Evita que el usuario pueda redimensionar el textarea */
    cursor: text; /* Cambia el cursor a un marcador de texto */
    justify-content: space-between; /* Espacio entre los elementos */
    transition: opacity 0.3s ease; /* Transición suave de la opacidad */
    width: 100%;
}

#input-txt:hover, #msg:hover{
    opacity: 1.0;
    color: #fff;
}

::placeholder{
    /* Estilos para el texto de marcador de posición */
    opacity: 1; /* Hacer el texto de marcador de posición completamente opaco */
    color: white; /* Color del texto de marcador de posición */
}

#btn-encript{
    background-color: #88D8C0;
    background-size: cover;
    box-sizing: border-box;
    color: black; /* Color del texto */
    cursor: pointer;
    padding: 5px 10px; /* Tamaño original */
    font-size: 16px; /* Tamaño original de la fuente */
    transition: all 0.9s ease; /* Transición suave */
    margin-right: 10px; /* Espacio entre los botones */
    border-radius: 15px;
    gap: 10px; /* Espacio entre los botones */
    display: inline-block; /* Permite que el botón se comporte como un bloque */
    position: relative;
}


#btn-desencript{
    background-color: #88D8C0;
    background-size: cover;
    color: black; /* Color del texto */
    border-radius: 15px;
    cursor: pointer;
    padding: 5px 10px; /* Tamaño original */
    font-size: 16px; /* Tamaño original de la fuente */
    transition: all 0.9s ease; /* Transición suave */
    margin-right: 10px; /* Espacio entre los botones */
    gap: 10px; /* Espacio entre los botones */
    display: inline-block;
    position: relative;
}

@media screen and (max-width: 600px) {
    .boton {
      font-size: 14px; /* Disminuye el tamaño de fuente en pantallas pequeñas */
      padding: 8px 16px; /* Ajusta el espaciado interno en pantallas pequeñas */
    }
  }

#btn-copy, #btn-copy2{
    background-color: #88D8C0;
    background-size: cover;
    color: black; /* Color del texto */
    cursor: pointer;
    padding: 5px 10px; /* Tamaño original */
    margin-right: 10px; /* Espacio entre los botones */
    font-size: 16px; /* Tamaño original de la fuente */
    border-radius: 15px;
    transition: all 0.9s ease; /* Transición suave */
    display: inline-block;
    gap: 0; /* Espacio entre los botones */
    position: relative;

}

#btn-encript:hover, #btn-desencript:hover, #btn-copy:hover, #btn-copy2:hover{
    /* Estilos del botón cuando se coloca el cursor sobre él */
    padding: 6px 12px; /* Nuevo tamaño */
    font-size: 18px; /* Nuevo tamaño de la fuente */
    background-color: #621176;
    color: white;
}

/* Estilos para el pie de página */
.footer {
    background-image: url(Sources/wallgat_1920x1200.jpg);
    background-color: black; /* Color de fondo */
    color: #fff; /* Color del texto */
    padding: 20px; /* Espaciado interno */
    background-size: cover;
    text-align: center;
    position: fixed; bottom: 0;
    width: 100%;
    max-height: 100px;

}

#logo{
    max-width: 100%; /* Asegura que el logo no se vuelva más grande que el contenedor padre (header) */
    width: 300px;
    height: 100px;
    display: inline-block;
}

p{
    text-align: center; /* Centra el texto horizontalmente */
    margin:0%;
}

a{
    color: #88D8C0;
}