body {
    background-color:   lightyellow;
    font-family:        system-ui, -apple-system, sans-serif;
    font-size:          1.4rem;
    line-height:        1.4;
	}

@supports (-moz-appearance: none) {
     body {
        font-size:      1.0rem;
    }
}
/*
@-moz-document url-prefix() {
     body {
        font-size:      1.0rem;
    }
}
*/
h1 {
/*	font-size:			36pt;   */
    font-family:        Helvetica, "Century Gothic", "MS Sans Serif", Arial, sans-serif;   ;
	text-align: 		center;
	color: 				Navy;
	font-weight:		700;
	padding:			3pt;
	}
h2 {
/*	font-size:		    14pt;   */
    font-family:        Helvetica, "Century Gothic", "MS Sans Serif", Arial, sans-serif;   ;
	text-align: 		center;
	color: 				Navy;
	font-weight:		700;
	padding:		    3pt;
	}
h3 {
	font-size:		    12pt;
	text-align: 		center;
	color: 				Black;
	font-weight:		700;
	}
p {
	font-size:		12pt;
	text-align: 		left;
	color: 				Black;
	font-weight:		300;
	}
table {
	border-color:					 white;
	}
td	{
	border-color:					 white;
	}

ul {
	line-height: 20px;
	}

td	{
	vertical-align: text-top;
	}

.right {
	text-align:		right;
	}
.centeredImage {
	 display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:100%;
	max-height:100%;
	}

.headline   {
    display:            flex;
    flex-direction:     row;
    flex-wrap:          wrap;
    justify-content:    space-between;
    padding:            6px;
    }
.piano-pic, .logo-pic   {}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	}
.auth-container, .noauth-container {
	display: flex;
	flex-direction: row;
	}
.left-column {
	padding: 6px;
	margin: 3pt;
	width: 80em;
	background-color:   gainsboro;
    border-radius:      12px;
	}
.right-column {
	width: 160em;
	}
.grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}
.grid-item {
	flex: 1;
	flex-grow: 0.8;
	margin: 2px;
	}
.hit-item {
	flex: 1;
	flex-grow: 0.8;
	margin: 2px;
	text-align:right;
	}
.email {
	flex: 1;
	flex-grow: 1.5;
	}
.break {
	flex-basis: 100%;
	height: 6px;
	}

@media screen and (orientation:portrait)
/*  @media screen and (max-width:700px) */
	{
    h1, h2, h3 {
    margin:    0pt;
    }
	.auth-container {
		flex-direction: column-reverse;
		}
	.noauth-container {
		flex-direction: column;
		}
	.left-column, .right-column{
		width:          auto;
		}
	.grid {
		flex-direction: column;
		}
	.grid-item {
        margin:         0px;
	    margin-bottom:  0px;
	    }
	.break {
		line-height:    6px;
		}
	.hit-item {
		text-align:     center;
		}
    .piano-pic {
        display:        none;
        }
    .logo-pic {
        order:          1;
        margin:         0 auto;
        display:        block;
        }
	}
@media print {
	.noPrint {display: none }
	body {
		font-family:	"Times New Roman",serif;
		font-size:		12pt;
		margin-right: 0px;
		}
	h1 {
			font-family:	"Times New Roman",serif;
			font-size:		14pt;
		}
	}