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

body {
    font-family: 'Hack', monospace; /* Use Hack font */
    background-color: #f4f4f4; /* Light background for contrast */
}

header {
    background: #333;
    color: #fff;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    width: 100%;
}

.logo {
    font-size: 1.5rem; /* Adjust logo size */
}

.nav-links {
    list-style: none;
    display: flex;
    flex-grow: 1; /* Allow links to grow */
    justify-content: flex-end; /* Align links to the right */
}

.nav-links li {
    margin: 0 1rem;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 25px;
    background: #fff;
    margin: 3px 0;
}

main {
    max-width: 800px; /* Set a maximum width for the content */
    margin: 2rem auto; /* Center the main content */
    padding: 1rem; /* Add padding for spacing */
    background: #fff; /* White background for the content area */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

h1 {
    text-align: center; /* Center the main heading */
    margin-bottom: 1rem; /* Space below the heading */
}

ul, ol {
    list-style-position: inside; /* Position bullets/numbers inside */
    padding-left: 0; /* Remove default padding */
    margin: 1rem 0; /* Space above and below lists */
}

li {
    margin-bottom: 0.5rem; /* Space between list items */
    color: #666; /* Set list item color to match paragraph text */
}

h2 {
    margin: 0; /* Remove default margin */
}

h2 a {
    color: #333; /* Dark color for the blog title */
    text-decoration: none; /* Remove underline */
}

h2 a:hover {
    text-decoration: underline; /* Underline on hover */
}

p {
    color: #666; /* Gray color for the description */
    margin-bottom: 1rem; /* Space below paragraphs */
}

/* Styles for images */
img {
    max-width: 100%; /* Responsive images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Slightly rounded corners */
    margin: 1rem 0; /* Space above and below images */
}

/* Additional styles for ordered lists */
ol {
    margin-left: 1.5rem; /* Indent ordered lists */
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/Hack-Regular.ttf') format('truetype'); /* Regular font */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/Hack-Bold.ttf') format('truetype'); /* Bold font */
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/Hack-Italic.ttf') format('truetype'); /* Italic font */
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Hack';
  src: url('fonts/Hack-BoldItalic.ttf') format('truetype'); /* Bold Italic font */
  font-weight: 700;
  font-style: italic;
}