/* CSS Document */
  body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f6f9; color: #333; line-height: 1.6; }
        .container { max-width: 800px; margin: 0 auto; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        h1 { font-size: 24px; color: #2c3e50; margin-bottom: 5px; }
        h2 { font-size: 18px; color: #2c3e50; margin-top: 25px; margin-bottom: 10px; border-bottom: 2px solid #f0f0f0; padding-bottom: 5px; }
        p { font-size: 14px; color: #555; margin-top: 0; }
        
        .linkkiverkko { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 15px; margin: 20px 0; }
        .kortti { background: #fcfcfc; border: 1px solid #bbb; padding: 15px; border-radius: 6px; text-decoration: none; color: #333; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
        .kortti:hover { background: #e8f8f5; border-color: #2ecc71; transform: translateY(-2px); }
        .kortti-otsikko { font-weight: bold; font-size: 15px; color: #2196F3; margin-bottom: 5px; }
        .kortti:hover .kortti-otsikko { color: #2ecc71; }
        .kortti-kuvaus { font-size: 12px; color: #666; }
        
        .ohje-lista { list-style: none; padding: 0; font-size: 13px; }
        .ohje-lista li { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
        .merkki { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 4px; font-size: 12px; }
        .merkki.x { background-color: #dcdcdc; color: #888; }
        .merkki.miinus { background-color: #e74c3c; color: white; }
        .merkki.plus { background-color: #2ecc71; color: white; }

/* otsikko tyyli 1*/
/*.otsikko {
    background: #eef4fa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #003366;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}  '/

/*otsikko tyyli 2 */

.otsikko {
    background: #e7f1fb;        /* kevyt sininen */
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #003366;             /* tumma sininen */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}