html {
	margin: 0;
	padding: 0;
	width: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: rgb(246,247,246);
	font-family: "Cormorant Unicase", serif;
	margin: 0;
	padding: 0;
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10%;
	text-align: center;
	padding-top: 30px;
	background-color: rgb(246,247,246);
	border-top: 1px solid grey;
}


h1 {
	text-align: center;
}

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

ul {
	list-style-type: none;
}

li {
	list-style-type: none;
}

.img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.nav-menu {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 10vh;
}

.nav-menu a {
	font-size: 16px;
	color:#000;
	text-decoration: none;
	position: relative;
	padding: 6px 12px;
}

.nav-menu a::after {
	content:"";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0%;
	height: 4px;
	background: rgb(11,158,169);
	transition: all .5s ease-out;
}

.nav-menu a:hover::after {
	width: 100%;
}

.nav-menu a.curret {
	background-color: rgb(11,158,169);
	color: rgb(246,247,246);
}

.ul {
	background-color: rgb(246,247,246);
	list-style-type: none;
	margin: 0; 
	padding: 0;
	text-align: center;
	font-size: 26px;
}

.li a {
	display: block;
	color: #000000;
	padding: 8px;
	text-decoration: none;
}

.li a:hover {
	color: rgb(11,158,169);
	font-weight: bold;
}

.about-p {
	text-align: center;
	font-size: 5vw;
	margin: 8%;
	padding: 10%;
	background:linear-gradient(to right, #f4f4be, #eab998, #cb6c3c);
 	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

table {
	width: 85%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 20px;
	font-size: 12px;
}

td {
	width: 200px;
	table-layout: fixed;
	word-break: break-all;
	padding: 14px;
	border: 2px solid rgb(11,158,169);
	border-radius: 10px;
	background-color: rgb(246,247,246);
}

td a:hover {
	color: rgb(11,158,169);
}

a:link {
	color:black;
	text-decoration: none;
}
a:visited {
	color:black;
	text-decoration: none;
}

.projects {
	font-family: 'Montserrat', sans-serif;
	padding-left:10%; 
	font-size: 15px; 
	line-height: 40px; 
	width: 90%; 
	text-align: left;
}

.competitiors {
	font-family: 'Montserrat', sans-serif;
	padding-left:10%; 
	font-size: 15px; 
	line-height: 40px; 
	width: 90%; 
	text-align: center;
}

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
  padding-left: 40%;
  padding-right: 40%;

}

#ex-page-header2 {
	text-align: center; 
	font-size: 100px; 
	margin-top: 3%; 
	color: rgb(11,158,169);
}

#ex-page-header {
	text-align: center; 
	font-size: 100px; 
	margin-top: 13%; 
	color: rgb(11,158,169);
}

#ex-2 {
	font-family: 'Montserrat', sans-serif;
	line-height: 30px;
	margin-top: 6%;
	margin-bottom: 10%;
	font-size: 14px; 
	text-align: center;
}

#ex-2-2 {
	font-family: 'Montserrat', sans-serif;
	line-height: 30px;
	padding-left: 20%;
	padding-right: 20%;
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 14px; 
	text-align: center;
}

textarea {
	font-family: 'Montserrat', sans-serif;
	line-height: 30px;
	margin-top: 4%;
	margin-bottom: 10%;
	font-size: 14px; 
	text-align: center;
	resize: vertical;
}

#ascii {
	margin-top: 12%;
}

#div-left {
	width: 50%;
	padding-left: 10%;
	float: left;
	box-sizing: border-box;
	border-style: none;
	background-color: rgb(246,247,246);
}

#div-right {
	width: 50%;
	padding-right: 15%;
	float: right;
	text-align: left;
	box-sizing: border-box;
	border-style: none;
	background-color: rgb(246,247,246);
	line-height: 30px;
}

.image2 {
	column-count: 2;
}

.image2-left {
	margin-left: 42%;
	column-count: 2;
	text-align: center;
}


.image2-right {
	margin-left: 20%;
	column-count: 2;
	text-align: center;
}

.image2-1 {
	margin-left: 34%;
	column-count: 2;
	text-align: center;
}

#project4-body {
	margin: 0;
	padding: 0;
}

#project4-ul {
	color: rgb(11,158,169);
}

.project4-nav {
	position: fixed;
	top: 15vh;
	right: 6vw;
}

.project4-a {
	display: inline-block;
	width: 1.8vw;
	height: 1.8vw;
	border: 0.1vw dashed rgb(11,158,169);
	border-radius: 50%;
	margin-bottom: 1vh;
	text-decoration-color: black;
}

	.project4-span {
		display: block;
		text-align: center;
		width: 13vw;
		font-size: 0.9vw;
		right: 0;
		opacity: 0;
		position: relative;
		top: 0.1vw;
		transition: right 0.4s, opacity 0.4s;
}

		.project4-a:hover .project4-span {
			font-size: 0.9vw;
			right: 11vw;
			opacity: 1;
			color: black;
}

.project4-h3 {
	padding-left: 2vw;
}

#project5-body {
	margin: 0;
	padding: 0;
}

#project5-ul {
	color: rgb(11,158,169);
}

.project5-nav {
	position: fixed;
	top: 21vh;
	right: 6vw;
}

.project5-a {
	display: inline-block;
	width: 1.8vw;
	height: 1.8vw;
	border: 0.1vw dashed #e09765;
	border-radius: 50%;
	margin-bottom: 6vh;
	text-decoration-color: black;
}

	.project5-span {
		display: block;
		text-align: center;
		width: 13vw;
		font-size: 0.9vw;
		right: 0;
		opacity: 0;
		position: relative;
		top: 0.1vw;
		transition: right 0.4s, opacity 0.4s;
}

		.project5-a:hover .project5-span {
			font-size: 0.9vw;
			right: 11vw;
			opacity: 1;
			color: black;
}

.project5-h3 {
	padding-left: 2vw;
}

#project6-body {
	margin: 0;
	padding: 0;
}

#projec6-ul {
	color: rgb(11,158,169);
}

.project6-nav {
	position: fixed;
	top: 21vh;
	right: 6vw;
}

.projec6-a {
	display: inline-block;
	width: 1.8vw;
	height: 1.8vw;
	border: 0.1vw dashed #e09765;
	border-radius: 50%;
	margin-bottom: 6vh;
	text-decoration-color: black;
}

	.projec6-span {
		display: block;
		text-align: center;
		width: 13vw;
		font-size: 0.9vw;
		right: 0;
		opacity: 0;
		position: relative;
		top: 0.1vw;
		transition: right 0.4s, opacity 0.4s;
}

		.projec6-a:hover .projec6-span {
			font-size: 0.9vw;
			right: 11vw;
			opacity: 1;
			color: black;
}

.projec6-h3 {
	padding-left: 2vw;
}

.projec6-p {
	color: #584a41;
	text-align: center;
	padding-left: 15%;
	padding-right: 15%;
	font-family: 'Nunito', sans-serif;
	line-height: 32px;
}

.project3-h2 {
	padding-left: 18%; 
	text-align: left;
}