/*variables: colors*/
:root {
    --color-html: #13021d;
    --color-body: transparent;
    --color-container-bg: #F0EFF4;
    --color-link: #067a0b;
    --color-logo: #6ABB17;
    --color-logo-bg: #000;
    --color-logo-shadow: 1px -2px 1px #cff607;
}
/*structure*/
body, html {
    margin: 0; padding: 0; 
    font-family: georgia, serif;     
}

html {
    background: url(bg-html.svg) repeat-x bottom center var(--color-html) scroll;
    background-size: 120% 100%;
    }

body {
    background: url(bg-body.png) bottom right no-repeat var(--color-body) scroll;
    background-size: contain;
}
header {text-align: center;}
#container {
    width: 50%;
    max-width: 800px;
    margin: 4em 4em 0 4em;
    background-color: var(--color-container-bg);    
    padding: 1em 2em;
}
footer {
    margin: 4em 0 0 0;
    padding: 0;
    text-align: center;
    /*background: url(lawneyes-sm.png) repeat-x center top scroll;
    height: 200px;*/
}

/*text*/
h1 {
    font-size: 2em; 
    text-align: center;

}
h1 span {
    background-color: var(--color-logo-bg);
    color: var(--color-logo);
    display: block;
    font-family: "Times New Roman","Times", serif;
    font-size: larger;
    margin: .2em;    
    text-transform: uppercase;    
    text-shadow: var(--color-logo-shadow);
}

h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: 1.67em;}
h6 {font-size: .67em;}

p {font-size: 1em;}

p a, cite a {
    text-decoration: none;
    border-bottom: 2pt dotted var(--color-logo);
    color: var(--color-link);
}
p a:hover, cite a:hover {border-bottom: 2pt solid var(--color-link)}

li {margin-bottom: 20px;padding-left: 5px;}
li::marker {content: url('bullet.png')}

blockquote {
    font-family: "Courier New", monospace;
    font-size: larger; 
}
blockquote cite {
    display: block;  
    font-size: smaller;
    margin: 5px 0 auto auto;
    text-align: right;
    width: 75%;
    min-width: 500px;        
}
blockquote cite:before {content: '~~';}

/*other elements*/
img {    
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border: 1pt solid var(--color-logo);
}

/*flexbox holding the stuff */
#lawnStuff {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 1em auto;
    width: 90%;
    justify-content: space-around;
}
figure {text-align: center;}
figure img {max-width: unset;}
figcaption {font-family: monospace; width: 75%; margin: 10px auto;}

/*table*/
#tableHolder {
    background-color: #ffffff40; 
    overflow-x: auto;
    margin: 0 auto;
    width: 95%;
    }
table {    
    display: block;    
    margin: 0 auto;    
    width: 600px;    
    font-family: monospace;   
    
}

th {
    border-bottom: 2pt solid black;    
    color: darkgreen;    
}

td {
    width: 150px;
    text-align: center;
    background-color: #fff;    
}