body {font-family: 'Arial', Helvetica, sans-serif;
			font-size: 16px;
            line-height: 1.5;
    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;}


p.footer
        { color:white;
            font-family:  'Verdana', Geneva, sans-serif;
            line-height: 1.5;
            text-align: center;
            font-size: 80%;
            letter-spacing: 1px;
        }


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:#f577b6;
            align-self:stretch;
        }

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


        footer{
            grid-area: footer;
            background: #bd7bff !important;
            text-align: center;
            align-self: flex-start;
        }
       
 table  {
	border-collapse:collapse
}
td, th {
	border:2px solid #ddd;
	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) {
    /* ... */
}