/*{} []*/
 * {
 	margin: 0;
 	padding: 0;
 }

 .container {
 	max-width: 100vw;
 	background-color: #eaeaea;
 	overflow: hidden;
 	transition: .3s;
 	font-family: Arial,sans-serif;
 }

 .container nav {
 	width: 100%;
 	height: 50px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	position: fixed;
 	border-bottom: 3px solid purple;
 	box-sizing: border-box;
 	padding: 0 30px;
 }

.container nav .logo {
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 20px;
}

 .container nav ul {
 	list-style-type: none;
 	display: flex;
 	position: absolute;
 	flex-direction: column;
 	height: 100vh;
 	width: 230px;
 	background-color: #eaeaea;
 	right: -100%;
 	top: 0;
 	border-left: 5px solid purple;
 	box-sizing: border-box;
 	align-items: flex-end;
 	padding: 60px 20px;
 	gap: 15px;
 	transition: .3s;
 	z-index: 1;
 }
 .container a {
 	text-decoration: none;
 	color: black;
 }

 .container nav .hamburger {
 	width: 30px;
 	height: 26px;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	z-index: 1;
 	cursor: pointer;
 }
 .container nav .hamburger span {
 	height: 3px;
 	background-color: black;
 }
 .container nav .hamburger span:first-child {
 	width: 85%;
 }
 .container nav .hamburger span:nth-child(2) {
 	width: 55%;
 }.container nav .hamburger span:nth-child(3) {
 	width: 100%;
 }

 .container .darkmode {
 	display: flex;
 	gap: 5px;
 	align-items: center;
 }
 .container .darkmode .button {
 	width: 45px;
 	height: 23px;
 	border-radius: 20px;
 	border: 2px solid purple;
 	display: flex;
 	align-items: center;
 	padding: 2px 3px;
 	box-sizing: border-box;
 	cursor: pointer;
 }
 .container .darkmode .button .switch {
 	width: 12px;
 	height: 12px;
 	background-color: #eaeaea;
 	box-shadow: 0 0 1px 1px #282828;
 	border-radius: 50%;
 }

 .darkMode {
 	background-color: #282828;
 	color: #eaeaea;
 }
 .container .hamburger span.darkMode {
 	background-color: #eaeaea;
 }
 .container nav ul.darkModeNav {
 	background-color: #282828;
 }
 .container nav ul li a.darkModeLink {
 	color: #eaeaea;
 }
 .darkModeButton {
 	background-color: purple;
 	justify-content: flex-end;
 }

 .container nav ul.on{
 	right: 0;
 }

 /*{} []*/

header {
	padding: 50px;
} 

.container main {
	padding: 50px;
	text-align: justify;
}
.container main h1 {
	font-weight: 100;
	font-style: italic;
	position: relative;
}
.container main h1::before{
	content: '';
	position: absolute;
	width: 300px;
	height: 3px;
	background-color: purple;
	bottom: 0;
}
.container main p {
	text-indent: 50px;
	margin: 16px 0;
	line-height: 20px;
}