div {
	box-sizing: border-box;
}

body {
	padding: 20px;
	margin: auto;
	width: 800px;
	-webkit-text-size-adjust: 100%; 
	line-height: 1.2;
}

img {
	filter: sepia(0.494446) saturate(0.563724) brightness(0.927287) contrast(1.02181);
}

img:hover {
	filter: none;
	transition: filter 0.5s ease;
}

img:not(:hover) {
	transition: filter 0.5s ease;
}

.strong {
	color: var(--accent);
}

.header {
	background-color: var(--white);
	display: flex;
	position: sticky;
	top: 0px;
}

.header-left {
	width: 181px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px dotted var(--brown);
	border-right: 1px dotted var(--brown);
}

.header-left a:hover {
	-webkit-transition: 0.25s;
}

.header-left a:hover {
	opacity: 70%;
	-webkit-transition: 0.25s;
}

.header-nav {
	width: 444px;
	display: flex;
	position: sticky;
}

.header-nav .nav-link {
  border-right: 1px dotted var(--brown);
  border-bottom: 1px dotted var(--brown);
  color: var(--brown);
  text-decoration: none;
  display: flex;              
  justify-content: center;    
  align-items: center;         
  width: 100%;
  -webkit-transition: 0.25s;
}

.header-nav .nav-link:hover {
	cursor: pointer;
	color: var(--white);
	background-color: var(--brown);
	border: 1px dotted var(--white);
	border-top: none;
	border-left: none;
}

.nav-link:hover {
	color: var(--white);
	letter-spacing: 1px;
	-webkit-transition: 0.25s;
}

.header-right {
	width: 177px;
	display: flex;
	position: sticky;
	top: 0px;
	justify-content: center;
	border-bottom: 1px dotted var(--brown);
}

.content {
	display: flex;
}

.sidebar-left {
	border-right: 1px dotted var(--brown);
	width: 180px;
}

.content-main {
	display: flex;
}

.content-main-text {
	text-align: justify;
	padding: 15px;
	width: 441px;
}

.sidebar-right {
	width: 177px;
	border-left: 1px dotted var(--brown);
}

.sidebar-text {
	padding: 10px;
}

.name-header {
	font-weight: bold;
	text-align: center;
	padding: 3px;
}

.sidebar-title {
	border-bottom: 1px dotted var(--brown);
	padding: 3px;
	text-align: center;
}

.footer {
	border-top: 1px dotted var(--brown);
	display: flex;
	width: 800px;
}

.footer-left,
.footer-middle,
.footer-right {
	padding: 3px;
}

.footer-left {
	padding-left: 0px;
	width: 180px;
}

.footer-middle {
	text-align: center;
	width: 443px;
	border-left: 1px dotted var(--brown);
}

.footer-right {
	padding: 3px;
	width: 177px;
	border-left: 1px dotted var(--brown);
	padding-right: 0px;
}

.footer a {
	color: var(--brown);
	text-decoration: 1px dotted underline;
	-webkit-transition: 0.25s;
}

.footer a:hover {
	letter-spacing: 1px;
	-webkit-transition: 0.25s;
}