/*                   Styles particular to the Hb messages e.g. thanks or potted bio                    */

/* ------------------------------------------------------------------------------------------------ Variables -- */
/* Repeated because common53.css isn’t always used but hb0053.css probably is. */ 
:root {                      
    --hue: 240deg ;
    --saturation: 5% ;

    --saturation: 2% ;
    --nearBlack: hsl(var(--hue), var(--saturation),  8%) ;
    --dark:      hsl(var(--hue), var(--saturation), 25%) ;
    --mid-dark:  hsl(var(--hue), var(--saturation), 40%) ;
    --midtone:   hsl(var(--hue), var(--saturation), 50%) ;
    --mid-light: hsl(var(--hue), var(--saturation), 60%) ;
    --light:     hsl(var(--hue), var(--saturation), 75%) ;
    --greyOut:   hsl(var(--hue), var(--saturation), 90%) ;
    
    --brightNearBlack: hsl(var(--hue), 100%,  7%) ;
    --brightVeryDark:  hsl(var(--hue),  95%, 18%) ;
    --brightDark:      hsl(var(--hue),  90%, 25%) ;
    --brightMid-dark:  hsl(var(--hue),  80%, 40%) ;
    --brightMidtone:   hsl(var(--hue),  70%, 50%) ;
    --midMid-light:    hsl(var(--hue),  60%, 60%) ;
    --brightLight:     hsl(var(--hue),  50%, 75%) ;
    --brightOut:       hsl(var(--hue),  40%, 95%) ;
    
    --altHue: calc(var(--hue) + 155deg) ;
    --altNearBlack: hsl(var(--altHue), 100%,  5%) ;
    --altDark:      hsl(var(--altHue),  90%, 10%) ;
    --altMid-dark:  hsl(var(--altHue),  80%, 25%) ;
    --altMidtone:   hsl(var(--altHue),  50%, 40%) ;
    --altMid-light: hsl(var(--altHue),  40%, 50%) ;
    --altLight:     hsl(var(--altHue),  20%, 60%) ;
    --altVeryLight: hsl(var(--altHue),  15%, 80%) ;
    --altOut:       hsl(var(--altHue),  12%, 95%) ;
    --offwhite:     hsl(var(--altHue), var(--saturation), 98%) ;
    
    --errorColour: hsl(0deg, 100%,  50%) ;
}
:root {                      
    --main-right: 22px ;

    --left: 1ch ;
}
/* ============================================================================================ Document-wide == */
body { background: var(--offwhite) ; }
  main { 
    display: table ; margin: 2.5rem auto 0 auto ; border: 1px solid var(--midtone) ; padding: 0 2.5ch 3ex 2.5ch ;
    background: white ;
  }
      figure { display: table ; float: right ; margin: 2ex 0 3ex 2.5ch ; }
        figure img { max-height: 15rem ; }
      p { max-width: 65ch ; }
        samp { padding: 0 1ch 0 1ch ; }
        a:any-link { color: var(--brightMid-dark) ; text-decoration: none ; }
        a:hover { color: var(--brightMidtone) ; text-decoration: underline ; }
      address { margin: 2ex 4ch 3ex 6ch ; }
      button { clear: right ; float: right ; margin: 1ex 0 0 0 ; }