:root {
  --bg-color: #30404b;
  --section-bg: white;
  --foreground: #30404b;

  --button-foreground: #30404b;
  --button-bg-color: white;
  --button-hover-foreground: white;
  --button-bg-hover-color: #30404b;
  
  --heading-line-color: #0000002e;
  
  --highlighted-text-color: #30404b;
  --highlighted-text-bg: #30404b38;
}

body {
	margin: 0;
	padding: 0;
	font-size: 10pt;
	font-family: "Inter", sans-serif;
	background-color: var(--bg-color);
	color: var(--foreground);
}

.sews_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	margin-top: 25px;
	margin-bottom: 25px;
}

.sews_avatar {
	width: 10%;
	align-self: center;
  clip-path: circle(40%);
	scale: 160%;
}

.sews_heading {
	font-size: 22pt;
	border-bottom: 3pt solid var(--heading-line-color);
	margin: 0;
}

.sews_section {
	background-color: var(--section-bg);
	width: 75%;
	display: flex;
	flex-direction: column;
	padding: 25px;
	border-radius: 15px;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
	margin: 0;
	gap: 10pt;
}

.sews_paragraph {
	margin: 0;
	font-size: 14pt;
	line-height: 20pt;
	text-align: justify;
	hyphens: auto;
}

.sews_highlight {
	border-radius: 5px;
	padding: 0 5pt 0 5pt;
	background-color: var(--highlighted-text-bg);
	color: var(--highlighted-text-color);
}

.sews_navbar {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.sews_navbar a {
	color: var(--button-foreground);
	font-size: 15pt;
	text-decoration: none;
	background: var(--button-bg-color);
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
	transition: box-shadow 0.3s ease-in-out;
}

.sews_navbar a i {
	font-size: 150%;
}

.sews_navbar a:hover {
	background-color: var(--button-bg-hover-color);
	color: var(--button-hover-foreground);
	box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.5);
	transition: box-shadow 0.3s ease-in-out;
}

.sews_footer {
	font-size: 12pt;
	color: var(--section-bg);
}