body {
	background-color: #151515;
	font-family: 'Inter', sans-serif;
	color: #ffff;
}

h1 {
	font-weight: 700;
	font-size: 3rem;
}

h2 {
	font-weight: 500;
	font-size: 1.3rem;
}

h3 {
	font-weight: 700;
}

h4 {
	font-weight: 700;
	font-size: 0.9rem;
	opacity: 0.9;
	color: #5865f2;
}

p {
	opacity: 0.5;
	font-size: 0.95rem;
}

.links {
	float: right;
	font-size: 21px;
}

.links:not(:last-child) {
	margin-left: 1.2rem;
	font-size: 20px;
}

a {
	text-decoration: none;
	color: #ffff;
}

.hero-section {
	background-color: #191919;
}

.role-section h4 {
	font-weight: 700;
	font-size: 0.9rem;
	color: white;
}

/* TOOLS SECTION */
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	display: inline-block;
}

.skills li {
	background-color: #4d4d4d;
	border-radius: 7px;
	padding: 0.5rem 1rem 0.5rem 1rem;
	opacity: 1;

	font-weight: 500;
	font-size: 0.8rem;
}

.skills li:not(:last-child) {
	margin-right: 0.3rem;
}

.problem-section {
	background-color: #191c24;
}

.problem-section p {
	opacity: 0.68;
}

.problem-text {
	font-weight: 700;
}

.image-section img {
	width: 80%;
}

.box {
	float: right !important;
	display: flexbox;
}

.reflection-section {
	background-color: #191919;
}

.bold-title {
	font-weight: 700;
	margin: 0;
	opacity: 0.9;
}

.stats-box {
	background-color: #191c24;
	border-radius: 10px;
	text-align: center;
	max-width: 10rem;
}

.stats-box h3 {
	margin-top: 1rem;
	font-size: 1rem;
}

.stats-box p {
	opacity: 0.68;
}

.custom-container {
	padding: 0 10% 0 10%;
}

iframe {
	display: flex;
	margin: 0 auto;
	width: 60%;
	height: 18rem;
	border-radius: 10px;
}