html {
    scroll-behavior: smooth;
}

body {
  	background-color: #121212;
	font-family: monospace, Arial, sans-serif;
	color: white;

}

.topnav {
	display: flex;
	flex-direction: row;
	gap: 2%;
	max-width: 100%;
	justify-content: center;
  	overflow: hidden;
	height: 50%;
	/*border: 0.5px solid rgb(208, 160, 236);*/
}

.topnav a {
	display: flex;
	color:#82A5D3;
	text-align: center;
	padding: 1% 1%;
	text-decoration: none;
	font-size: 120%;
}

.topnav a:hover {
	display: flex;
	color:#DDE7F3;
}

.topnav a.active {
	display: flex;
	color: #C4D5EB;
	text-decoration-line: underline;

}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_container2 {
	display: flex;
	flex-direction: column;
    justify-content: center;
    justify-self: center;
	flex-wrap: wrap;
	margin-left: 3%;
	margin-right: 3%;
    margin-top: 3%;
	gap: 2%;
	max-width: 75%;
	padding: 2%;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
    border: 0.5px solid rgb(255, 255, 255);
}

.link {
	color:#82A5D3;
	text-decoration: none;
}

.link:hover {
	color:#DDE7F3;
}

footer {
	display: flex;
	justify-content: center;
}

@media (max-width: 800px) {
	.main_container2 {
		max-width: 90%;
		padding-top: 2%;
		padding-bottom: 2%;
		padding-left: 3%;
		line-height: 1.2;
	}
}

@media (hover: hover) {
	.main_container2:hover {
		transition-duration: 0.5s;
  	}
}

@media not all and (hover: hover) {
  .main_container2::after {
    content: "" attr(title) "";
  }
}