style.css

body {
	font-family: 'Fira Code', monospace;
	background-color: #f9f9f9; /* light mode background */
}

body.dark-mode {
	background-color: #2b2b2b; /* dark mode background */
}

header {
	background-color: #333;
	color: #fff;
	padding: 1em;
	text-align: center;
}

header h1 {
	font-size: 2em;
	margin-bottom: 0.5em;
}

header p {
	font-size: 1.2em;
	margin-bottom: 1em;
}

main {
	max-width: 600px; /* Adjust this value to suit your needs */

	margin: 2em auto;
	padding: 2em;
	background-color: #fff; /* light mode background */
	border: 1px solid #ddd;
	border-radius: 0.5em;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

main.dark-mode {
	background-color: #333; /* dark mode background */
	border-color: #444;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

h2 {
	font-size: 1.5em;
	margin-top: 1em;
}

p {
	margin-bottom: 1.5em;
}

code {
	font-size: 1.2em;
	font-family: 'Fira Code', monospace;
	background-color: #f0f0f0;
	padding: 0.2em;
	border-radius: 0.2em;
}

code.dark-mode {
	background-color: #333;
	color: #ccc;
}

/* New sections */
section {
	max-width: 600px; /* Adjust this value to suit your needs */

	margin: 2em auto;
	padding: 2em;
	background-color: #fff; /* light mode background */
	border: 1px solid #ddd;
	border-radius: 0.5em;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.about-me.dark-mode, .projects.dark-mode {
	background-color: #333; /* dark mode background */
	border-color: #444;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.img-responsive {
    max-width: 100%; /* This will make sure the image does not exceed its container */
    height: auto; /* This will keep the aspect ratio of the image intact */
}

.logo {
	width: 128px;
	height: 128px;
}