@import url('https://fonts.googleapis.com/css2?family=DM+Mono&display=swap');

* {
	box-sizing: border-box;
}

body {
	background: #fcfaf1;
	color: #343749;
	margin: 0;
	font-family: 'DM Mono', monospace;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.heading {
	width: 90%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px 50px;
	font-size: 18px;
	display: flex;
	justify-content: space-between;
}

.heading i {
	cursor: pointer;
	position: absolute;
	right: 0;
	display: none;
}

.heading h3 a {
	text-decoration: none;
	color: #343749;
}

.heading span {
	color: #fe3686;
	font-size: 25px;
}

.heading .skills {
	border-bottom: 2px solid #fe3686;
}

.body-content {
	display: flex;
	position: absolute;
	width: 80%;
	justify-content: space-between;
	padding: 90px;
}

.body-content .info {
	font-size: 25px;
	max-width: 700px;
	text-align: left;

	animation: fadeIn ease 0.9s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.body-content .info.about,
.body-content .info.work,
.body-content .info.skills {
	font-size: 22px;
	font-weight: bold;
}

.skill-cards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 30%;
	height: 70px;
	background-color: #fcfaf1;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 3px -2px,
		rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
	margin: 8px;
	padding: 15px;
	border-radius: 4px;
}

.card h3 {
	color: #343749;
	font-size: 16px;
	text-align: left;
	margin-left: 10px;
}

.card img {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 15px;
}

.body-content .info.about h2,
.body-content .info.work h2,
.body-content .info.skills h2 {
	font-weight: bolder;
}

.body-content .info.about ul {
	display: flex;
	justify-content: space-evenly;
}

.body-content .info.about ul li {
	list-style-type: none;
}

.body-content .info.skills ul li {
	font-size: 18px;
}

.body-content .info.about ul li a,
.body-content .info.work ul li a {
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: #343749;
	transition: color 0.3s ease;
}

.body-content .info.work ul li a {
	text-decoration: underline;
}

.body-content .info.about ul li a:hover,
.body-content .info.work ul li a:hover {
	color: #fe3686;
}

.body-content .info.about span,
.body-content .info.work span,
.body-content .info.skills span {
	color: #fe3686;
	font-size: 60px;
}

.body-content .illustration img {
	width: 400px;
	height: 400px;
}

.body-content .info h2 {
	font-weight: 550;
}

.body-content .info h2 .name {
	font-weight: 700;
}

.body-content .side-links {
	text-align: right;
}

.body-content .side-links ul {
	list-style: none;
	margin-right: -10px;
}

.body-content .side-links ul li a {
	text-decoration: none;
	color: #7c819c;
	font-weight: bold;
	line-height: 40px;
	transition: color 0.3s ease;
}

.body-content .side-links ul li a.active {
	color: #343749;
}

.body-content .side-links ul li a:hover {
	color: #fe3686;
}

.footer {
	display: flex;
	position: absolute;
	justify-content: space-between;
	width: 100%;
	bottom: 0;
	padding: 10px 20px;
}

.footer .social-links a {
	text-decoration: none;
	color: #343749;
}

.footer .social-links a i {
	height: 30px;
	width: 30px;
	background-color: #ffcfd8;
	border-radius: 50%;
	text-align: center;
	padding: 7px;
	transition: all 0.3s ease;
}

.footer .social-links a img {
	position: absolute;
	width: 30px;
	height: 30px;
	margin-left: 5px;
}

.footer .social-links a i:hover {
	color: #ffcfd8;
	background-color: #343749;
}

.footer .copy span {
	font-weight: bold;
}

.modal-container {
	display: none;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}