/* fonts */
@import url("/media/stylesheet_bravura.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap")

/* body */
body {
	font-family: "Poppins", san serif;
}

/* div */
div {
   font-family: "Poppins", san serif;
   margin:auto;
   width:85% 
}

/* header */
h1 {
	font-family: "Josefin Slab", san serif;
	font-variant: small-caps;
}
h2,h3 {
	font-family: "Josefin Slab", san serif;
}
h4 {
	font-family: "Josefin Slab", san serif;
	font-style: italic;
}
h1,h2,h3,h4 {
  	text-align:center;	
}

/* links for the body of lessons */
a:link {
	margin:5px;
   background-color: DarkSlateBlue;
   color: White;
  	padding: 5px 10px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-radius:20px;
  	box-shadow: 3px 3px 3px gray;
}
a:visited {
	color: White;
}
a:hover, a:active {
	margin:5px;
	background-color: DarkBlue;
	color: White;
	box-shadow: 3px 3px 3px lightblue;
}

/* links for the footer of lessons */
a.footer:link {
	margin:5px;
   background-color: DarkSlateBlue;
   color: White;
  	padding: 14px 25px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	box-shadow: 3px 3px 3px gray;
}

a.footer:visited {
	color: White;
}
a.footer:hover, a.footer:active {
	margin:5px;
	background-color: DarkBlue;
	color: White;
	box-shadow: 3px 3px 3px lightblue;
}

/* styles */
strong {
    color:blue;
    font-size:110%;
}
i {
	color:green;
}

/* table */
table {
	cursor: pointer;
}

/* classes */
.xpl { /* examples */
	font-size:25px;
   white-space: nowrap;
}

.material-symbols-outlined { /* google icons */
	font-variation-settings:
  	'FILL' 0,
  	'wght' 400,
  	'GRAD' 0,
  	'opsz' 24
}

.symbol { /* symbols */
	font-size:25px;
   border:solid;
   border-width:thin;
   border-color:blue;
   border-radius: 5px;
   padding-left:5px;
   padding-right:5px;
}

.notes {
	font-family:bravura;
	cursor: pointer;
	font-size:25px;
	white-space: nowrap;
}

.left { /* move something left a little */
	margin-left:-0.125em;
}
.leftdot{ /* place a dot */
	margin-left:-8px;
}