* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: #fff;
	font: 1.2rem Arial, Helvetica, sans-serif;
	color: #333;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

.hl {
	color:#FFFACD;
	background-color: #1E90FF; 
	padding: 4px 8px;
}

/*nav styles*/


#navbar, #navbar2 {
	width: 20%;
	overflow-y: auto;
	height: 100vh;
	background-color: #f7f7f7;
	position: fixed;
}


nav header {
	padding: 10px;
	background-color: #1E90FF;
	color: #FFFACD;
}

/*nav header h1 {
	font-size: 1.5rem;
	text-align: center;
}
*/
nav a{
	display: block;
	padding: 22px 10px;
	border-bottom: 1px solid #ccc;
	font-size: 1rem;
	color: #333;
	width: auto;
	transition: 0.3s;
}


nav a:hover {
	background-color: #ccc;
}


/*main styles*/
main#main-doc {
	width: 80%;
	margin-left: auto;
}

main > div.title {	
	padding: 10px 30px;
	font-size: 1.3rem;
}

.subtitle {
	padding: 15px 30px;
	margin: 10px 0;
	color: #1E90FF;
	border-top: 1px solid #ccc;
}

/*note styles*/

.note {
	padding: 30px;
	background-color: #FFFACD;
	margin: 20px -30px;
	color: #555;
	font-size: 1rem;
}

/* collapsible nav */

.title > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#nav-icon, #close-icon {
	display: none;
	cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
}

#nav-icon > div {
	width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
}

#nav-icon:hover, #close-icon:hover{
	opacity: 1;
}

/*main > sections styles*/

section {
	padding: 10px 30px;
	border-top: 1px solid #ccc;
}

section header {
	padding: 10px 0;
	font-size: 1.5rem;
}

section p {
	padding: 10px 0;
	font-size: 1.2rem;
}

section code {

}

section table {
	width: 100%;
	border: 1px solid #f2f2f2;
	margin: 20px 0;
	border-collapse: collapse;
}

th, td{
	text-align: left;
	padding: 10px;
}

section table tr:nth-child(even) {
	background-color: #f2f2f2;
}

footer {
	background-color: #4169E1;
	margin-top: 80px;
	text-align: center;
	padding: 50px 20px;
}

footer img {
	max-width: 90%;
	height: auto;
}

footer h3 {
	color: #f7f7f7;
	font-size: 1rem;
	letter-spacing: 2px;
}



/*media queries*/

@media (max-width: 1000px){
	.container {
		position: relative;
	}

	main#main-doc {
		width: 100%;	
		padding: 0;
	}

	section {
		padding: 10px;
	}

	.subtitle {
		margin: 65px 0 0 0 ;
		text-align: center;
	}
	
	main > div.title {	
		padding: 10px;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		background-color: #222;
		color: #f7f7f7;
		z-index: 10;
	}

	.title h1 {
		font-size: 2rem;
		opacity: 0.8;
		transition: 0.3s;
	}

	.title h1:hover {
		opacity: 1;
	}

	#nav-icon, #close-icon {
		display: block;
	}

	#close-icon {
		font-size: 3rem;
	}

	#navbar {
		display: none;
	}

	#navbar2 {
		width: 0;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		z-index: 15;
		overflow-x: hidden;
		transition: width 0.5s;	
		white-space: nowrap;
	}

	#navbar2 header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 5px;
	}
}