/*

Author:  TONY H

Date:  2026-03-04

Filename:  stylessac5.css

*/



/* CSS Reset */



body, header, nav, main, footer, img, h1, ul {

	margin: 0;

	padding: 0;

	border: 0;

	}



/* Style rule for images */



img {

	max-width: 100%;

	display: block;

	}

	

/* Style rules for mobile viewport */



/* Hide tab-desk (tablet-desktop) class */



.tab-desk {

	display: none;

}



/* Style rules for header content */



header {

	text-align: center;

	font-size: 1.5em;

	color: #373684;

	}



header h1 {

	font-family: "DM Serif Display", serif;

	}



/* Style rules for navigation area */



nav {

	background-color: #373684;

	}



nav ul {

	list-style-type: none;

	text-align: center;

	}



nav li {

	display: block;

	font-size: 2em;

	border-top: 1px solid #e5a9fc;

	}



nav li a {

	display: block;

	color: #fff;

	text-align: center;

	padding: 0.5em 1em;

	text-decoration: none;

	}



/* Style rules for main content */



main {

	padding: 2%;

	background-color: #e5e9fc;

	overflow: auto;

	font-family: "Roboto", sans-serif;

	}

	

main p {

	font-size: 1.25em;

	}

	

.action {

	font-size: 1.25em;

	color: #373684;

	font-weight: bold;

	}

	

#piano, #guitar, #violin {

	margin: 0 2%;

	}

	

#info {

	clear: left;

	background-color: #c0caf7;

	padding: 1% 2%;

	}

	

#info ul {

	margin-left: 10%;

	}

	

.round {

	border-radius: 8px;

	}

	

#contact {

	text-align: center;

	}

	

#contact .email-link {

	color: #4645a8;

	text-decoration: none;

	font-weight: bold;

	}

	

.tel-link {

	background-color: #373684;

	padding: 2%;

	margin: 0 auto;

	width: 80%;

	text-align: center;

	border-radius: 5px;

	}

	

.tel-link a {

	color: #fff;

	text-decoration: none;

	font-size: 1.5em;

	display: block;

	}

	

.map {

	border: 5px solid #373684;

	width: 95%;

	height: 50%;

	}

	

/* Style rules for footer content */



footer {

	text-align: center;

	font-size: 0.65em;

	clear: left;

	}

	

footer a {

	color: #4645a8;

	text-decoration: none;

	}