/* General Styles */
body {
    font-family: 'PT Sans Narrow', 'Lato', 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    color: #333;
    height: auto; /* Allow the body to auto-size */
    overflow-y: scroll; /* Enable vertical scrolling for the entire page */
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: #555;
    text-decoration: none;
}

/* Top Navigation Bar */
.navbar {
    background-color: white;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.navbar a {
    color: #555; /* Dark gray */
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
    transition: color 0.2s ease-in-out;
}

.navbar a:hover {
    color: black; /* Turns black when hovering */
}

/* Main Layout (Sidebar + Content) */
.main-container {
    display: flex;
    flex-direction: row;
    background-color: #f7f7f7; /* Explicitly set background color for main container */
}

/* Sidebar (Fixed to 30%) */
.sidebar {
    flex: 0 0 30%; /* This sets the sidebar to 30% width */
    background-color: white;
    color: #555; /* Dark gray text */
    padding: 20px 20px 20px 0; /* Ensures space from top, right, bottom, and removes padding from the left */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-end; /* Align items to the right */
}

/* Sidebar Links */
.sidebar ul {
    list-style-type: none;
    padding: 0;
    text-align: right; /* Align text to the right */
    width: 100%; /* Ensures the list takes full width */
    margin: 0;
}

.sidebar ul li {
    margin: 10px 0;
    display: block;
    justify-content: flex-end; /* Align items to the right */
}

.sidebar ul li a {
    color: #555; /* Dark gray */
    text-decoration: none;
    display: block;
    padding: 8px;
    border-radius: 5px;
    transition: color 0.2s ease-in-out;
}

.sidebar ul li a:hover {
    color: black; /* Turns black when hovering */
}

/* Submenu Styling for ML Notes */
.sidebar ul li .submenu {
    display: none; /* Hide the submenu by default */
    padding-left: 20px; /* Indent submenu items */
}

.sidebar ul li .submenu li {
    display: block; /* Ensure submenu items are on separate lines */
    margin: 5px 0; /* Add space between submenu items */
}

/* Show the submenu when 'ML Notes' is clicked */
.sidebar ul li .submenu.show {
    display: block;
}

/* Main Content (Flexible) */
.main-content {
    flex: 1; /* This makes the main content take up the remaining space */
    padding: 20px; /* Default padding */
    padding-left: 50px; /* Add extra padding on the left */
    box-sizing: border-box;
    text-align: left; /* Align content to the left */
    background-color: #f7f7f7 !important; /* Force background color to match the body */
}

/* About Content Container */
.about-container {
    width: 80ch; /* 80 characters wide */
    margin: 0; /* Remove centering */
    padding: 30px; /* Optional: padding for spacing inside the container */
    text-align: left; /* Align text to the left */
}

/* Experience Content Container */
.experience-container {
    width: 80ch; /* 80 characters wide */
    margin: 0; /* Remove centering */
    padding: 30px; /* Optional: padding for spacing inside the container */
    text-align: left; /* Align text to the left */
}
.experience-container h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #1201ad;
}
.experience-container ul {
    margin: 0;
    padding-left: 20px;
}

/* Major Project Content Container */
.projects-container {
    width: 80ch; /* 80 characters wide */
    margin: 0; /* Remove centering */
    padding: 30px; /* Optional: padding for spacing inside the container */
    text-align: left; /* Align text to the left */
}
.projects-container h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #1201ad;
}
.projects-container ul {
    margin: 0;
    padding-left: 20px;
}

/* Certificates Section Styles */
.certificates-container {
    width: 80ch; /* Same as experience section for consistency */
    margin: 0;
    padding: 30px;
    text-align: left;
}

.certificates-container h2 {
    font-size: 2em; /* Match the size of <h2> in the experience section */
    margin-bottom: 20px;
}

.certificate-category h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #1201ad; /* Retains the color you have */
}

.certificate-category {
    margin-bottom: 30px; /* Add space between categories */
}

/* For Project Management, align certificates to the left */
.certificates-container .certificate-category:nth-child(1) .certificate {
    text-align: left; /* Align text to the left for Project Management certificates */
}

/* Wrapping the certificates in a row */
.certificate-row {
    display: grid; /* Use grid layout for more flexibility */
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
    gap: 20px; /* Adds space between certificates */
    flex-wrap: wrap; /* Allows the certificates to wrap to the next line when necessary */
}

/* Each certificate styling */
.certificate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Ensures text is under the image */
    width: 100%; /* Ensures certificates take full width within the grid cell */
    max-width: 200px; /* Prevents certificates from growing too large */
    margin-bottom: 20px; /* Keeps space between certificates when stacked */
}

/* Styling for certificate images */
.certificate img {
    width: 80px; /* Set width for the certificate images */
    height: auto;
    margin-bottom: 10px; /* Adds space between the image and text */
}

/* Text under the image */
.certificate p {
    font-size: 14px; /* Adjust font size as needed */
    margin: 0; /* Removes extra space around the text */
    text-align: center; /* Centers the text under the image */
}

/* Ensure content inside each certificate is properly aligned */
.certificate-content {
    display: flex;
    flex-direction: column; /* Stacks image and text */
    align-items: center; /* Centers the content */
}

/* Ensures left alignment for Project Management certificates */
.certificates-container .certificate-category:nth-child(1) .certificate .certificate-content p {
    text-align: left; /* Ensures left alignment for Project Management certificates */
}

/* For the Cloud certificates, make sure they have the correct alignment */
.certificate-row .certificate .certificate-content p {
    text-align: center; /* Ensures text is centered under the image for Cloud certificates */
}

/* Styling for the certificate badge images */
.certificate-badge {
    width: 100px; /* Adjust the size of the badge image */
    height: auto;
    margin-bottom: 10px; /* Adds space between the image and the text */
}

/* Centering the text in the certificates container */
.certificates-container p {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 0;
}

/* Sub-menu Styles */
.submenu {
    list-style-type: none;
    padding-left: 20px;
    display: none; /* Hidden by default */
}

.submenu-item {
    padding: 8px;
    text-decoration: none;
    color: #555;
    display: block;
    transition: color 0.2s ease-in-out;
}

.submenu-item:hover {
    color: black;
}

/* Sidebar Submenu (hidden by default) */
#ml-notes-submenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none; /* Hidden by default */
    text-align: right; /* Align submenu items to the right */
}

#ml-notes-submenu li {
    margin: 5px 0;
    text-align: right;
}

#ml-notes-submenu li a {
    padding-left: 20px; /* Indentation for submenu items */
    text-align: right; /* Align submenu link text to the right */
}

#ml-notes-submenu:not(.hidden) {
    display: block; /* Show submenu when it's not hidden */
}

.code-box {
    position: relative;
    border: 1px solid #ccc; /* Very thin border */
    padding: 2px 12px; /* Reduce top/bottom padding further */
    background-color: #dff1ea; /* Light gray background */
    margin: 2px auto 2px 10px; /* Align to right with 20px padding */
    border-radius: 8px; /* Round corners */
    box-shadow: none; /* Ensure no shadow */
    max-width: 100%;
    overflow-x: auto;
    font-size: 0.85em;
    font-family: monospace;
    width: 80ch; /* Approximate width for 80 characters */
    white-space: pre-wrap; /* Preserve formatting and allow wrapping */
    word-wrap: break-word; /* Break long words if necessary */
    line-height: 1.1; /* Reduce line spacing */
    text-align: left; /* Ensure text stays aligned correctly inside the box */
}

.code-box-small {
    position: relative;
    border: 1px solid #ccc; /* Very thin border */
    padding: 2px 12px; /* Reduce top/bottom padding further */
    background-color: #dff1ea; /* Light gray background */
    margin: 2px auto 2px 10px; /* Align to right with 20px padding */
    border-radius: 8px; /* Round corners */
    box-shadow: none; /* Ensure no shadow */
    max-width: 100%;
    overflow-x: auto;
    font-size: 0.25em;
    font-family: monospace;
    width: 120ch; /* Approximate width for 80 characters */
    white-space: pre-wrap; /* Preserve formatting and allow wrapping */
    word-wrap: break-word; /* Break long words if necessary */
    line-height: 1.1; /* Reduce line spacing */
    text-align: left; /* Ensure text stays aligned correctly inside the box */
}

.copy-btn {
    position: absolute;
    top: 5px;
    right: 10px; /* Moves the copy button to the top-right */
    font-size: 18px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: 5px;
    color: #555;
    transition: color 0.2s ease;
}

.copy-btn:hover {
    color: #000;
}

pre {
    margin: 0;
    padding: 10px;
    background-color: transparent; /* Make sure background is not overwriting */
    color: #000; /* Black text inside the box */
    border-radius: 5px;
    font-family: "Courier New", Courier, monospace;
    overflow: auto;
    white-space: pre-wrap; /* Wraps text to avoid horizontal scroll */
}

.plot {
    padding-top: 10px;
    width: 400px;
    margin-bottom: 10px;
    margin-left: 20px;
    display: block;
}

.profile-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between image and LinkedIn icon */
    margin-bottom: 0px; /* Adds space before experience section */
    margin-left: 100px;
}

.profile-img {
    width: 150px; /* Adjust the size of the mugshot */
    height: auto;
    border-radius: 50%; /* Makes the image round */
    object-fit: cover; /* Ensures the image maintains aspect ratio */
}

.linkedin-icon {
    width: 50px; /* Adjust the LinkedIn icon size */
    height: 50px;
    background: transparent;
    transition: transform 0.2s;
}

.linkedin-icon:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Hidden Sections */
.hidden {
    display: none;
}

/* Additional Specific Rules */
div {
    background-color: #f7f7f7 !important; /* Force background color for all div elements */
}