body {
            font-family: 'Aptos', sans-serif;
			color: #637379; /* Add this line to set the text color */
			text-align: center; /* Center text horizontally */
		}
	h1, h2, h3, h4, h5, h6 {
            font-weight: bold; /* Bold all headers */
			color: #353254; /* Header text color */
		    margin-bottom: 2px; /* Adjust bottom margin to 5px */
            padding: 0; /* Remove any padding if present */
        }
    /*
    canvas {
            position: relative;
            width: 100%;
            height: 100%;
            border: none#ccc;
        }
    */
        
	.timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding-left: 17px; /* Space for the timeline line */
        }
    .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 25px;
            width: 4px;
            height: 100%;
            background-color: #637379; /* Timeline color */
        }
    .timeline-item {
            display: flex;
			align-items: center; /* Vertically aligns the year and dots */
            margin-bottom: 20px;
            position: relative;
        }
    .timeline-item::before {
            content: '';
            position: absolute;
            left: 5px;
            top: 50%;
			transform: translateY(-50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #0fb4bb; /* Dot color */
        }
    .timeline-item p {
            margin: 0;
			line-height: 1; /* Consistent line height */
        }
    .year {
			font-weight: bold;
			margin-right: 10px; /* Space between year and content */
			min-width: 60px; /* Ensures a consistent width for all years */
			text-align: right; /* Aligns the year text to the right */
			align-self: center; /* Vertically centers the year relative to the content */
        }
	.content {
			text-align: left; /* Ensures all text in the content block is aligned left */
			flex: 1; /* Allows the content block to expand and fill the remaining space next to the year */
			display: flex;
			flex-direction: column; /* Stacks text vertically */
			align-items: flex-start;
			justify-content: center; /* Centers content vertically relative to the year */
			line-height: 1; /* Ensures consistent line height */
        }

    .skills-list-left, .skills-list-right {
        width: 40%; /* Set width for both left and right sections */
        }

    .skills-list {
            font-family: 'Aptos', sans-serif;
            text-align: left;
        }

    .skills-list ul {
            list-style-type: none;
            padding-left: 20px; /*horizontal line connects to vertical line perfectly*/
            margin-top: 5px;
            position: relative;
        }

    .skills-list li {
            position: relative;
            padding-left: 10px;
            margin-bottom: 5px;
        }

    .skills-list li::before {
            content: "";
            position: absolute;
            left: -10px;
            top: 50%;
            width: 15px;
            height: 1px;
            background-color: #cccccc; /* Horizontal line */
        }

    .skills-list ul::before { /* Vertical line */
            content: "";
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 8.5px; /* this is the fine adjustment to align the vertical line with the last list item */
            width: 1px;
            background-color: #cccccc; /* Vertical line */
        }

    .skills-list ul li:last-child::before {
            top: 50%;
            width: 15px;
            height: 1px; /* Horizontal line for the last item */
            background-color: #cccccc;
        }
	.container0 {
            display: flex;
			justify-content: center; /* Centers the content horizontally */
			vertical-align: center;
            flex-wrap: wrap;
            gap: 5px; /* Adjust spacing between rectangles */
			padding-top: 20px; /* Optional: Adds some padding around the container */
			padding-bottom: 10px;
			width: 100%; /* Ensure the container takes up full width */
            height:max-content;
            align-items: flex-start; /* Ensures child elements can grow in height */
        }

    .rounded-rectangle0 {
			margin: 5px auto; /* first 5px is the gap between the rectangles, auto centers the rectangle horizontally */
            background-color: #F9F9F9; /* Fill color */
			padding: 8px 10px; /* Padding around the text */
			border-radius: 2px; /* Rounded corners */
			text-align: center; /* Center the text */
			max-width: 500px;
			width: 100%; /* Adjust width to content */
			white-space: normal; /* Prevent text from wrapping inside the rectangle */
			border: 2px solid #637379; /* Border line with specified color and width */
			box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Shadow under the rectangle */
        }
	.hidden {
    		max-height: 0;
    		overflow: hidden;
    		transition: max-height 0.5s ease-out;
		}
	.expanded {
    		max-height: 1000px; /* Adjust this value based on the amount of content */
    		overflow: visible;
		}
	.toggle-link {
			color: #007bff; /* Blue color */
			text-decoration: none; /* Underlined text */
			cursor: pointer; /* Pointer cursor on hover */
			font-size: 70%; /* Reduced font size to 70% */
		}
	.toggle-link:hover {
			color: #007bff; /* Keep the same blue color on hover */
			text-decoration: none; /* Keep the text underlined */
		}
	.toggle-link:visited {
    		color: #007bff; /* Keep the same blue color for visited links */
		}
	.rounded-rectangle0 a {
			text-decoration: none; /* Removes the underline */
			display: block; /* Ensures the link takes up the full space of its content */
		}
	.rounded-rectangle0 a:hover {
			color: inherit; /* Keeps the same color on hover */
		}
	.rounded-rectangle1 {
			background-color: #F9F9F9; /* Fill color */
			padding: 8px 10px; /* Padding around text */
			border-radius: 2px; /* Rounded corners */
			text-align: center; /* Center the text */
            vertical-align: center; /* Center the text vertically */
			width: 300px; /* Adjust width to content */
            height: 115px; /* Adjust height to content */
			white-space: normal; /* Prevent text from wrapping inside the rectangle */
			border: 2px solid #637379; /* Border line with specified color and width */
			box-sizing: border-box; /* Ensure padding and border are included in width */
			box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Shadow under the rectangle */
		}
	.rounded-rectangle2 {
			background-color: #0fb4bb; /* Fill color */
			color: white; /* Text color */
			padding: 8px 10px; /* Padding around text */
			border-radius: 2px; /* Rounded corners */
			text-align: center; /* Center the text */
			white-space: nowrap; /* Prevent text from wrapping inside the rectangle */
		}
	.rounded-rectangle3 {
			background-color: #0fb4bb; /* Fill color */
			color: white; /* Text color */
			padding: 8px 10px; /* Padding around text */
			border-radius: 2px; /* Rounded corners */
			text-align: center; /* Center the text */
			max-width: 500px;
			width: 100%; /* Adjust width to content */
			white-space: normal; /* Prevent text from wrapping inside the rectangle */
		}
    .rounded-rectangle4 {
			margin: 10px auto; /* This centers the rectangle horizontally */
            background-color: #F9F9F9;
            padding: 20px 70px; /* top padding followed by left padding */
            border-radius: 2px;
            text-align: center;
            max-width: 500px; /* Adjusted width to hold both columns */
            width: 100%;
            white-space: normal;
            border: 2px solid #637379;
            box-sizing: border-box;
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
            display: flex; /* Use flexbox to create left and right columns */
            justify-content: space-between; /* Space columns evenly */
        }