html {
      background: #f7f9fa url("images/background.jpeg") repeat fixed;
    }

.wrap {
      max-width: 900px;
      margin: 32px auto;              
      padding: 24px;
      background: var(--card);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
    }


body {
    font-family: "Lato", Arial, sans-serif;
    color: var(--text);
    line-height: 1.75;
  }

  h1, h2, h3 {
    font-family: "Playfair Display", serif;
    color: var(--primary);
    line-height: 1.2;
    margin: 0 0 10px 0;
  }

  h1 { 
    font-size: 2.3rem; 
    font-weight: 800; 
  }

  h2 { 
    font-size: 1.6rem; 
    font-weight: 700; 
  }

  h3 { 
    font-size: 1.2rem; 
    font-weight: 600; 
    color: var(--muted); 
  }

  .rule{
      height: 6px;
      width: 120px;
      background: var(--accent);
      border-radius: 50px;
      margin: 8px 0 18px;
  }

  .hat { 
      border: 1px solid rgba(0,0,0,.06);
      border-left-width: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #fff;
      margin-bottom: 14px;
    }
  .hat-img {
      float: right;
      width: 220px;         
      max-width: 35%;
      margin: 6px 0 12px 12px;
      border: 4px solid var(--accent);
      border-radius: 12px;
    }

    .white { 
      border-left-color: #b0bec5; 
    } 

    .red { 
      border-left-color: #e53935; 
    }

    .black { 
      border-left-color: #37474f; 
    }

    .yellow { 
      border-left-color: #ffca28;
     }

    .green { 
      border-left-color: #43a047; 
    }

    .blue { 
      border-left-color: #1e88e5; 
    }