/* For 'Back' illustrated hypertext poem.  Author: Heather Howard, migrating to HTML5 */


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


body       {margin: 0;  font-family: Arial, Helvetica, sans-serif;  font-size: 1rem;  font-weight: normal;  color: #000000}
body       {background-color: #FFFFF0}
body.intro {background-color: #CC6633;  background-image: url("wallrusset.jpg")}


* {box-sizing: border-box}


h1, h2 {text-align: center}


img      {max-width: 50%;  height: auto;  border: 0}
    

iframe   {width: 100vw;  min-height: 100vh}


p   /* Side-by-side on large screen, everything underneath t'other on small */
{
    display: inline-block;  float: left;  margin: 1px;  border: 0;  padding: 1vw;  
    background: #FFFFF0;  text-align: center;  width: 49%;  max-width: 49%
}
p:nth-child(odd)
{
    clear: both;
}
    @media only screen and (max-width: 1000px)
    {
        p {width: 98%;  max-width: 98%}
    }
p.img, p.txt
{
    display: flex;  min-height: 80vh;  align-items: center;  justify-content: center
/*    min-height: 80vh; */
}

    @media only screen and (max-width: 1000px)
    {
        p.img {min-height: 0}
        p.txt {min-height: 0;  margin-bottom: 10vh;}
    }


table.intro
{
    width: 60%;  margin: auto;  margin-top: 2vh;  border: 0;  padding: 1vh;  background-color: #FFFFFF
}
table.intro td
{  
    vertical-align: middle;  text-align: left
}
    @media only screen and (max-width: 1000px)
    {
        table.intro {width: 90%}
    }


table.poem
{
    max-width: 100%;  width: 100%;  height: auto;  margin: 0;  border: 0;  padding: 0;  
}
table.poem td
{  
    vertical-align: top;
}


/* Misc overrides: */

.centered {text-align: center}
.invis    {color: #FFFFF0}       /* font same color as p background */
.large    {font-size: 1.5em}
.small    {font-size: 0.8em}

/* end */