/* 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." */

/* ==========================================
   1. ESTILOS GENERALES (BODY)
   ========================================== */
body {
    /* Fondo de pantalla */
    background-image: url('fondoblog.png');
    background-size: cover;       /* Hace que la imagen cubra toda la pantalla */
    background-position: center;  /* Centra la imagen */
    background-attachment: fixed; /* Hace que el fondo quede quieto al hacer scroll */
    
    /* Tipografía y Colores */
    color: #566627;
    font-family: "Butterfly Kids", cursive;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
}

/* Estilo por defecto para los títulos de tu web */
h1, h2, h3 {
    text-align: center;
}



/* La columna de notas con fondo de cuadrícula de cuaderno */
.columna-notas-cuadricula {
    width: 280px;
    min-width: 260px;
    
    /* El truco mágico de CSS para crear un fondo cuadriculado rosa pastel */
    background-color: #ffffff;
    background-image: 
        linear-gradient(to right, rgba(255, 182, 193, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 182, 193, 0.4) 1px, transparent 1px);
    background-size: 20px 20px; /* Tamaño de los cuadraditos */
    
    /* Bordes estilo caja sólida rosa */
    border: 3px solid #FFB6C1; 
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
    box-shadow: 4px 4px 0px rgba(255, 182, 193, 0.4); /* Sombra sólida retro */
}

/* Ajuste para que tus notas resalten sobre la cuadrícula de fondo */
.nota-individual {
    background-color: rgba(255, 255, 255, 0.95); /* Blanco sólido para leer bien */
    border: 2px solid #FFB6C1;
    border-left: 5px solid #FFB6C1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}