/* div */
div {
	margin:auto;
	margin-top:10px;
	text-align:center;
   width:75%;
}

/* headings */
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;
}
body {
	font-family: "Poppins", san serif;
}

h1,h2,h3,h4 {
text-align:center;
}

/* links - make them look more like buttons */
a:link {
	border-radius: 15px;
   margin:5px;
   background-color: DarkSlateBlue;
   color: White;
  	padding: 14px 25px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
}
a:visited {
	color: White;
}
a:hover, a:active {
	margin:5px;
	background-color: DarkBlue;
	color: White;
	box-shadow: 3px 3px 3px lightblue;
}
.disable_link { /* fake disabled link */
	border-radius: 15px;
	margin:5px;
	background-color: DarkSlateBlue;
	color: White;
	padding: 14px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	opacity: 0.6;
	pointer-events: none;
}

/* levels */
.disable_level {
	font-family: "Josefin Slab", san serif;
	background-color: DarkBlue;
  	color: White;
  	opacity: 0.6;
   padding: 18px;
  	border: none;
  	text-align: center;
  	outline: none;
  	font-size: 20px;
  	font-weight: bold;
}
.level_title {
	font-family: "Josefin Slab", san serif;
	background-color: DarkBlue;
  	color: White;
  	padding: 18px;
  	border: none;
  	text-align: center;
  	outline: none;
  	font-size: 20px;
  	font-weight: bold;
}
.level_title:hover {
	background-color: Blue;
}
.level_open {
	font-size: 13px;
   color: white;
   float: right;
   margin-left: 5px;
}
.level_content {
	padding: 10px;
 	background-color: #f1f1f1;
 	display:none;
}

/* lessons */
.lesson_content {
	padding: 10px;
   width: 75%;
   background-color: AntiqueWhite;
   border-radius: 25px;
   box-shadow: 3px 3px 3px Gray;
}
.disabled_lesson {
	opacity: 0.6;
   pointer-events: none;
   padding: 10px;
   width: 75%;
   background-color: AntiqueWhite;
   border-radius: 25px;
   box-shadow: 3px 3px 3px Gray;
}

/* badges for grade */
.grade_gold {
	margin:5px;
   background-color: Gold;
   color: Black;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-style: outset;
	border-color: gold;
	padding: 11px 22px;
	box-shadow: 3px 3px 3px Gray;
}
.grade_silver {
	margin:5px;
   background-color: Silver;
   color: Black;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-style: outset;
	border-color: silver;
	padding: 11px 22px;
	box-shadow: 3px 3px 3px Gray;
}
.grade_bronze {
	margin:5px;
   background-color: #cd7f32;
   color: White;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-style: outset;
	border-color: #cd7f32;
	padding: 11px 22px;
	box-shadow: 3px 3px 3px Gray;
}
.grade_black {
	margin:5px;
   background-color: Black;
   color: White;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-style: outset;
	border-color: black;
	padding: 11px 22px;
	box-shadow: 3px 3px 3px Gray;
}

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

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