body{  color: rgb(255,255,255);
    background-color: rgb(0,0,0);
    }
  main {
    max-width: 38rem;
    padding: 1rem;
    margin: auto;
  }
  #drawzone {
    max-height: 70vh;
  }
  P { text-align: center;
  }
  
  canvas {
      display:block;
      margin-left:auto;
      margin-right:auto;
  }
  
  a:link{
      color: rgb(168,203,240);
  }
  a:visited{
      color: rgb(255,0,255);
  }
  
  /* Alternating image-text layout */
  /* courtesy claude sonnet 4 */
  /* wrap your image-text pairs in <div class="content-row"> elements */
  .content-row{display:flex;align-items:center;gap:2rem;padding:0.5rem;margin-bottom:3rem;min-height:200px;}
  .content-row:nth-of-type(even){flex-direction:row;}
  .content-row:nth-of-type(odd){flex-direction:row-reverse;}
  .content-image{flex:0 0 256px;max-width:512px;min-width:256px;image-rendering:crisp-edges;}
  .content-image img{width:100%;height:auto;border-radius:4px;display:block;}
  .content-text{flex:1;}
  .content-text h3{margin-top:0;margin-bottom:1rem;font-size:1.25rem;}
  .content-text p{margin:0;opacity:0.95;}
  @media (max-width:640px){.content-row{gap:1rem;min-height:auto;}}