/*
2022-12-01	0.0	a)	Ground-up build for Grasshopper Salon

font testing, name them all salonhead and salontext
*/

@font-face { font-family: 'salonhead'; font-weight: normal; font-style: normal; font-display:block;
			    src: url('fonts/MonicasSalonNF.ttf') format('truetype'); }

@font-face { font-family: 'salontext'; font-weight: normal; font-style: normal; font-display:swap;
				 src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family: 'salontext'; font-weight: normal; font-style: italic; font-display:swap;
				 src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); }

.content{ font-family: salontext; font-weight:normal; font-size: 17px; padding: 0 30px 10px 30px; font-style: normal; }
details { font-size: 15px; }
details summary { font-size: 17px; }
* { box-sizing: border-box; }

#header h1 { font-family: salonhead; font-weight: bold; color:#909000; text-align: center; margin: 12px auto; letter-spacing: 1px;}
h2,h3,h4 { font-family: salonhead; letter-spacing: 1px; font-weight: bold; color:#909000; text-align: center; margin: 12px auto; }
h1 { font-size: 56px; line-height: 56px; } /* 7*8 */
h1 smaller { font-size: 48px; }
h2 { font-size: 48px; } /* 6*8 */
h3 { font-size: 40px; } /* 5*8 */
h4 { font-size: 32px; } /* 4*8 */
/* h5 isn't header font */
h5 { font-family: salontext;  font-size: 20px; opacity: 0.8; margin: 3px auto; color:#909000;  text-align: center; margin: 12px auto 6px auto;  } /* 3*8 */
light { opacity: 0.7; }
DIV#layout { max-width: 100%; width: 800px; margin: 0 auto; background: #000; color: #eee; }
.content p { margin-bottom: 12px; }
.c { text-align: center; }
.o { color: #909000; margin: 0 10px;}  /* NB #909000 = #808000 */

.serviceImage {
	border: 5px solid #909000;
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(210, 181, 91, 0.3) inset;
	width: 170px;
	height: 170px;
	transition: all 0.5s ease-in-out 0s;
	margin: 20px auto 30px auto;
	background-size: contain;
	background-repeat:no-repeat;
}
.serviceImage b{
	display: block;
	text-align: center;
	opacity: 0;
	transform: scale(0);
	transition: all 0.8s ease-in-out 0s;
	padding-top: 58px;
	font-size: 20px;
}
.serviceImage:hover {
    box-shadow: 0 0 0 110px rgba(255,255,255, 0.9) inset;
}
.serviceImage:hover b{
    opacity: 1; color: #000;
	transform: scale(1);
}
.circle {
	border-radius: 50%;
}

details { margin: 0 6px; }
summary { display: list-item; margin-bottom: 8px; }
summary.service { width=100%; padding: 4px 4px 4px 12px; background: #c3c285; border-radius: 5px;
 color: #222; }
summary.service:hover { background: #909000; color: #ffffff; }
details ul { padding-bottom: 8px; }

.content { padding: 0 30px; }
body { background-image: url( "graphics/back.jpg" ); background-size: cover;
background-attachment: fixed; }
html, body { padding: 0; margin: 0; }
.envelope { overflow: auto; }

.sitetrailer { background: olive; color: #000; padding: 12px; font-size: 90%; margin-top: 12px;
text-align: right; }
.sitetrailer a { color: #000;  text-decoration: none; }
.sitetrailer a:hover,
.content a.dots:hover { border-bottom: 2px dotted; );