/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." *
  <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web con Estilo</title>
    <style>
        /* CONFIGURACIÓN DEL FONDO Y LA FUENTE */
        body {
            /* CAMBIA ESTO: Pon el nombre exacto de tu imagen aquí */
           background-image: url('https://i.pinimg.com/736x/16/59/9a/16599ab2b086cdea8e53983a06940db7.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center;">
    <h1>¡Hola mundo!</h1>

            
            /* Ajustes para que el fondo se vea perfecto */
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat; 
            background-attachment: fixed; 
            
            /* Tipo de letra moderno y limpio */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* CAJA CONTENEDORA (Para que el texto se lea bien sobre el fondo) */
        .tarjeta {
            background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            text-align: center;
            max-width: 400px;
            width: 90%;
        }

        /* ESTILO DEL TÍTULO */
        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 28px;
        }

        /* ESTILO DEL PARRAFO */
        p {
            color: #555555;
            font-size: 16px;
            line-height: 1.6;
        }

        /* ESTILO DEL ENLACE (LINK) */
        a {
            display: inline-block;
            margin-top: 20px;
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
        }

        /* Cambio de color al pasar el mouse por el enlace */
        a:hover {
            color: #1abc9c;
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <!-- Contenido visual de la página -->
    <div class="tarjeta">
        <h1>¡Bienvenido a mi sitio bian!</h1>
        <p>Esta página ya tiene aplicados los estilos CSS para la tipografía, los colores, la posición centrada y el fondo de pantalla.</p>
        <a href="https://biansky7.neocities.org/" target="_blank">           /* Controla el ancho de la cajita */
}
</div>
</body>
  /* Este código le da la forma, bordes y fondo a tu caja */
.mi-caja-personalizada {
    background-color: #faf6f0; /* Color de fondo pastel */
    border: 2px solid #a89493;    /* Color y grosor del borde */
    border-radius: 12px;         /* Hace las esquinas redondeadas */
    padding: 15px;               /* Espacio interno para que el texto no toque el borde */
    margin: 15px auto;           /* Espacio por fuera de la caja */
    max-width: 400px; 
</html>
 