body {font-family: 'Arial', Helvetica, sans-serif;
			font-size: 16px;
            line-height: 1.5;
    color: black;
    background-color:black;
		}
        
    
@media(max-width:900px){p.a{color:darkred;}}

h1
{
font-family: 'Arial', Helvetica, sans-serif;
text-align: center;}

h2
{ font-family: 'Arial', Helvetica, sans-serif;
text-align: center;
font-size:18px;
font-weight: bold;}

h3
{ font-family: 'Arial', Helvetica, sans-serif;
text-align: left;
font-size:16px;
font-weight: 900;}

h4
{ font-family: 'Arial', Helvetica, sans-serif;
text-align: center;
font-size:18px;
font-weight: 900;}




a.external:link {color: white; font-weight: bold; }
a.external:visited {color: floralwhite; font-weight: bold; }
a.external:hover {text-decoration: overline;}
a.external:active {color: black; }

body {font-size:100%;} 
@media(min-width:60em){body{font-size: 110%}}

        #content{
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-auto-rows: minmax(100px, auto);
            grid-gap: 10px;
            max-width: 960px;
            margin: 0 auto;
            grid-template-areas:
                "main main main main main main main main"
                "footer footer footer footer footer footer footer footer";


        }
        /* desktop grid */
        @media screen and (min-width: 760px){
    		#content{
    			display: grid;
    			grid-template-columns: repeat(8, 1fr);
    			grid-auto-rows: minmax(100px, auto);
    			grid-gap: 10px;
    			max-width: 960px;
    			margin: 0 auto;
                grid-template-areas:
                    "main main main main main main main main"
                    "footer footer footer footer footer footer footer footer";
    		}
        }
		#content > *{
			padding: 10px;
		}

        main{
            grid-area: main;
            background-color:azure;
            align-self:stretch;
        }

       
@media screen and (max-width: 600px) {nav{transform:scale(0.8)}
}


     
/* footer */
footer {
    grid-area: footer;
    border: 0.1rem #000 solid;
    border-left: 0;
    border-right: 0;
    text-align: center;
    font-size: 1.1 vw;
    font-family: "Courier New", Courier, monospace;
    background-color:azure;
}

.cells {
    display: inline-block;
    border-right: 1vh #e8b93a solid;
    text-align: center;
    padding: 0vw 0.5vw;
    margin: 0.1vw;
    font-family: "Courier New", Courier, monospace;
}

 table  {
	border-collapse:collapse
}
td, th {
	border:2px solid #343434;
	padding:8px;
    text-align:center;
}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}