header{
    text-align: center;
}

h1{
    font-size: 80px;
    color: #239aff;
    text-shadow:-1px -1px 0 #e3e6e9;
}
footer{
    text-align: center;
    margin-top: 100px;
    color: #c26ab6;
    text-shadow:1px -1px 0 #6a0352;
    font-weight: bold; /*formato Negrita*/
    font-size: 25px;
}
.li{
    display: inline-block;
    font-size: 25px;
    text-align: left top;
    content: normal;
    width: 450px;
    height: auto;
    border: 2px solid #ffb3ff;
    border-radius: 0% 100% 100% 100%;
    margin: 10px;
    margin-inline: 30px;
    padding: 1% ;
    background-color: #ad529e;
    color: white;
    background-image: linear-gradient(to top , #ad529e, #c26ab6, #ad529e);
}
textarea[name="user-input"] {
    font-weight: bold;
    padding: 50px;
    background-color: #fff;
    max-width: 1800px;
    min-width: 300px;
    width: 80%;
    height: 200px;
    line-height: 1.5;
    margin: 25px;
    border: 10px  #ccc;
    border-radius: 3%;
    font-size: 30px;
    color: #6a0352;
    text-shadow:-1px -1px 0 white;
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
textarea:focus {
    background-color: #fff; 
    outline-color: #fff;
    outline-style: hidden;
    box-shadow: 2px 2px 10px white;
}
body{
    background: #fff;
    text-align: center; /*Para objetos como botones*/
    display: inline-block;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Para asegurar que el body ocupe toda la altura de la ventana */
    margin: 0; /* Eliminar márgenes predeterminados */
}

#reset-button{
    border-style: double;
    border-radius: 8px;
    font-size: 30px;
    width: 400px;
    height: 80px;
    background-color: #0faf73;
    display: inline-block;
    color: #fff;
}

ul{
    list-style: none;
}
button:active {
  outline: none; /* Quita el borde predeterminado al hacer clic o enfocar */
  box-shadow: 0 0 10px 3px white; /* Agrega sombra para resaltar */
}
div[name="page-top"] {
    background-color: #041a37;
    height: 66vh;
    left: 0;
    min-height: 600px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
div[name="textarea"] {
    position: relative;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Sombra */
    max-width: 2500px;
    min-width: 400px;
    height: 400px;
    width: 90%;
    left: 20px;
    right: 60px;
    z-index: 1; /* Coloca este div encima del otro */
    background-color: #dee3ed; /* Color de fondo */
    border: 2px solid #dee3ed; /* Borde */
    border-radius: 5px; /* Bordes redondeados */
    padding: 20px; /* Padding interno */
    margin: 40px; /* Margen exterior */
}

footer{
    margin-bottom: 40px;
}