body {
     font-family: "Georgia", "Times New Roman", serif;
     background: #f8f5f1;
     color: #222;
     margin: 0;
     line-height: 1.5;
     font-size: 16px;
     color: #222;
     margin: 0;
 }

 .container {
     max-width: 720px;
     margin: 40px auto;
     padding: 0 16px;
 }

 header {
     text-align: left;
 }

 h1 {
     font-size: 48px;
     margin: 0 0 8px;
     letter-spacing: 1px;
 }

 .blink {
     animation: blinky 0.9s steps(2, start) infinite;
     background: yellow;
     padding: 2px 6px;
     border: 2px dashed #000;
     display: inline-block;
 }

 @keyframes blinky {
     to {
         visibility: hidden;
     }
 }

 .card {
     background: #fff;
     border: 3px groove #c0c0c0;
     padding: 16px;
     margin: 16px 0;
 }

 .card p {
     text-align: justify;
     text-justify: inter-word;
 }

 .counter {
     font-weight: bold;
 }

 footer {
     text-align: center;
     padding: 24px;
     color: #555;
 }

 .buttons a {
     display: inline-block;
     margin: 6px;
     padding: 6px 8px;
     border: 2px solid #222;
     text-decoration: none;
     color: #222;
     background: #ffeb3b;
     box-shadow: 3px 3px 0 #222;
     font-family: "Andale Mono", "Courier New", Courier, monospace;
 }

 .buttons a:active {
     transform: translate(2px, 2px);
     box-shadow: 1px 1px 0 #222;
 }

 marquee {
     background: #222;
     color: #ff0;
     padding: 8px 0;
     font-family: monospace;
     border-bottom: 3px double #ff0;
 }

 img.bad {
     float: left;
     margin: 12px 12px 12px 12px;
     width: 150px;
     height: auto;
     image-rendering: pixelated;
 }

 .hr {
     border: 0;
     height: 2px;
     background: #222;
     margin: 0px 0;
 }

 .hr1 {
     border: 0;
     height: 1px;
     background: #222;
     margin: 0px 0;
 }