/* For The Darkness of Summer  Authors: Peter Howard, Heather Howard */


.dark     {color: #330033}
.light    {color: #FFCC99}

a         {font-weight: bold; text-decoration: none; font-size: 1rem; vertical-align: bottom}
a:link    {color: #FF8800}
a:visited {color: #FF8800}
a:hover   {color: #FF0000; text-decoration: underline}
a:active  {color: #FF0000}
a.footer  {font-size: 0.8rem}
a.large   {font-size: 2.25rem}

body         {margin: 0;  font-family: Arial, Helvetica, sans-serif;  font-size: 1rem;  font-weight: normal}
body.basic   {background-image: url("sun mockup large.jpg");  color: #330033}
body.darkest {background-color: #000000              ;  color: #FFFFFF}
body.light1  {background-color: #EEEEFF              ;  color: #000000}
body.light2  {background-color: #EEEEFF              ;  color: #000000}
body.light3  {background-color: #EEEEFF              ;  color: #000000}
body.light4  {background-color: #CCCCDD              ;  color: #000000}
body.light5  {background-color: #BBBBCC              ;  color: #000000}
body.light6  {background-color: #AAAABB              ;  color: #000000}
body.light7  {background-color: #9999AA              ;  color: #000000}

    @media only screen and (max-width: 1000px)
    {
         body.basic   {background-image: url("sun mockup medium.jpg")}
    }

* {box-sizing: border-box}

h1       {font-size: 2.25rem;  color: #FF9900}        /* Title of poem sequence */
h2       {font-size: 1.25rem;  font-weight: normal}   /* Title of poem */
h2.large {font-size: 2.25rem}

img            {display: block;  max-width: 100%;  height: auto;  margin: auto;  border: 0}
img.quasilogo  {margin-bottom: 33px}                               /* jpg 99 x 99 px, let it be */
img.partition  {width: 50%;  height: 11px;  margin-top: 33px}      /* gif 620 x 11 px */
    @media only screen and (max-width: 1000px)
    { 
        img.partition {width: 75%; margin-top: 11px}
    }
img.arrow      {margin-left: 11px}                                 /* gif 31 x 31 px, let it be */

table.base, table.darkestbase 
{
    width: 50%;  margin: auto;  margin-top: 10vh;  border: 0;  padding: 1vh;  text-align: center;  background: #FFEE99;
}
table.darkestbase {background: #000300}

    @media only screen and (max-width: 1000px)
    {
       table.base, table.darkestbase
       {
           width: 100%
       }
    }

}

table.creeping 
{
    table-layout: fixed;  width: 100vw;  height: 100vh;  margin: 0;  border: 0;  padding: 0;
}
table.creeping td {vertical-align: top;  text-align: left}