:root {
  --bg-color: #ffffff;
  --font-color: #282828; /* 424242, 3B3B3B*/
}

[data-theme="dark"] {
    --bg-color: #282828;
    --font-color: #fff;
}

body {
    /* font: font-style font-variant font-weight font-size/line-height font-family */
    font: 400 17px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0px;
    margin: 0px;
    background-color: var(--bg-color);
    color: var(--font-color);
}

header, section, article, footer, aside, nav, hgroup, h1, h2, h3, h4, h5, h6 {
    display: block;
}

h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }

.container {
    width: 70%;
    margin: auto; /* moves everything to middle */
    overflow: hidden; /* doesn't let the children to get out */
}

#top_header {
    background-color: #35424a;
    color: #ffffff;   
    padding-top: 20px;
    min-height: 70px;
    /* border-bottom: #e8491d 3px solid; */
}

#top_header_algo {
    background-color: #1E423B;
}

#header_algo {
    text-align: center;
    padding: 20px 0;
    background-color: #065150;
    color: #ffffff;
}

p, li {
    font-family: sans-serif;
    font-variant: normal;
    text-decoration: none;
    word-spacing: normal;

}

#branding h1{
	margin-bottom: 30px;
}

#branding a{
	text-decoration: none;
	color: #ffffff;
	display: inline-block;
	outline: none;
}

#branding a:hover{
	color: #cccccc;
}

nav {
    float: right;
    margin-top: -70px;
}

nav a {
    color: #ffffff;
    text-decoration: none;  /* removes underline from links */
    text-transform: uppercase;
    display: inline-block;
    list-style: none;
	/* outline: none;  outline provides accessiblity feature */
}

nav ul {
    margin: 0px;
    padding: 0px;  /* also removes bullets from list items */
}

nav #post_algo{
    margin-top: 30px;
}

nav li {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    display: inline;
    padding: 20px; /* top right bottom left */
}

nav a:hover {
    color: #cccccc;
    font-weight: 500;
}

nav .current a{
	color: #e8491d;
	font-weight: bold;
}

#btmnav {
    list-style: none;
}

#btmnav li {
    display: inline;
}

#showcase{
	text-align: center;
    margin-top: 70px;
}

#showcase h1 {
    font-size: 45px;
    margin-bottom: 10px;
}

aside {
    float: right;
    width: 30%;
    margin-top: 20px;
}

#main{
	margin-bottom: 40px;
}

#sidebar a, #main-art a, #univ a, #post a, #projects-page a{
	text-decoration: none;
	color: lightseagreen;
	outline: none;
}

#tags a{
    text-decoration: none;
    background-color: lightseagreen;
    color: white;
    padding: 3px 6px;
    margin-top: 3px;
    display: inline-block;
    text-align: center;
}

#tags a:hover, #projects-page a:hover{
    opacity: 0.75;
}

#main-art a:hover, #sidebar a:hover{
    /* color: darkgray; */
    opacity: 0.75;
}

#univ a:hover, #post a:hover{
	color: orange;
}

article#main-art{
    float: left;
    width: 65%;
}

.timeline {
    position: relative;
    padding-left: 20px; /* Adjust as necessary for the width of your line */
    border-left: 2px solid #ddd;
    margin-left: 10px; /* Creates space for the circles */
}

.timeline-item {
    position: relative;
    padding-top: 5px; /* Space for the circle */
    margin-bottom: 5px;
}

.timeline-icon {
    position: absolute;
    top: 0; /* Adjust if necessary */
    left: 0;
    transform: translateX(-150%) translateY(-20%);
    width: 15px; /* Diameter of the circle */
    height: 15px; /* Diameter of the circle */
    border: 3px solid darkgray;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
}

.timeline-content {
    /* top, right, bottom, and left padding */
    padding: 2px 15px 2px 15px;
    /* background-color: #fff; */
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

.timeline-content h3, .timeline-content p {
    margin-top: 8px;
    margin-bottom: 10px;
}

/* Adjust this for mobile view */
@media screen and (max-width: 768px) {
    .timeline {
        padding-left: 20px; /* Smaller padding for mobile */
    }
    .timeline-icon {
        width: 15px; /* Smaller icon for mobile */
        height: 15px; /* Smaller icon for mobile */
    }
}

.floating-sidebar {
    position: fixed; /* Fixed position to stay visible on scroll */
    left: 20px; /* Distance from the left edge of the viewport */
    top: 50%; /* Position in the middle vertically */
    transform: translateY(-50%); /* Center it vertically */
    background-color: #fff; /* Background color */
    padding: 10px; /* Padding around the links */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    border-radius: 8px; /* Rounded corners for modern look */
    z-index: 1000; /* High z-index to stay above other content */
}

.sidebar-link {
    display: block; /* Each link on a new line */
    padding: 10px; /* Padding for easier clicking */
    color: lightslategrey; /* Bootstrap's default link color for familiarity */
    text-decoration: none; /* No underline */
    font-size: 16px; /* Readable font size */
    transition: color 0.3s ease; /* Smooth color transition for hover effect */
}

.sidebar-link:hover, .sidebar-link:focus {
    color: #0056b3; /* Darker shade of blue on hover/focus for better interaction feedback */
    text-decoration: none; /* Continue to not show underline */
}


#projects, #skills{
	margin-top: 30px;
	font-family: sans-serif;
}

/* My projects */
#myprojects {
    display: flex;
    flex-wrap: wrap;
}
#myprojects li {
    flex: 1 0 40%; /* This means that each item will take up 50% of the container's width */
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;
    list-style-type: none;
    background: #f5f5f5; /* Change this to your desired background color */
    cursor: pointer; /* Changes the cursor to a hand icon when hovering over the item */
}

.project-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.project-card {
    background-color: #f4f4f4;
    border-radius: 5px;
    width: 300px;
    margin: 20px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    color: inherit;
}

.project-card:hover {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

.project-card h4 {
    /* font-size: 24px; */
    margin: 16px;
}

.project-card p {
    font-size: 16px;
    margin: 16px;
}

.btn {
    display: block;
    width: 80%;
    padding: 10px;
    background-color: #3498db;
    color: white;
    text-align: center;
    margin: 0 auto 20px auto;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.btn:hover {
    background-color: #2980b9;
}

.project-filters {
    text-align: center;
    margin-bottom: 20px;
}

.filter-btn {
    padding: 10px 20px;
    margin: 0 5px;
    border: none;
    cursor: pointer;
    outline: none;
    background-color: #e7e7e7;
}

.filter-btn:hover {
    background-color: #ddd;
}

.filter-btn.active {
    background-color: #e8491d; /* Selected button color */
    color: #ffffff; /* Text color for selected button */
}


#mypic img{
	display: block;
	margin: auto;
	width: 240px;
	max-width: 100%;
}

.dark {
    padding: 15px;
    background: #35424a;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.fa {
    padding: 5px;
}
  
.fa:hover {
    opacity: 0.7;
}

.fa-kagg:before {
    font-family: roboto;
    color: #429bf4;
    font-size: 1.2em;
    content: "k";
}

#social-icons {
    list-style: none;
    padding: 0;
}

#social-icons li {
    display: block;
    margin-bottom: 10px;
}

.social-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white; /* Or any color you prefer */
}

.social-icon .fa .fa-linkedin{
    font-size: 32px; /* Size of the icon */
    margin-right: 8px; /* Space between icon and text */
}

.icon-text {
    font-size: 24px;
    font-weight: bold; /* If you want the text to be bold */
}

.stack-overflow img {
    height: 32px; /* Match the height with FontAwesome icons */
    width: auto; /* Maintain the aspect ratio */
    margin-right: 8px; /* Space between icon and text */
}

.stack-overflow .icon-text {
    display: inline-block;
    vertical-align: middle;
}

#social-icons li a:hover {
    color: #cccccc; /* Change the color on hover */
}


#last_footer {
    clear: both; /* clears floating property */
    text-align: center;
    padding: 20px;
    margin-top: 20px;
	color: slategray;
	border-top: 1px solid #d5d5d5;
	font-size: 15px;

}

#last_footer a{
	text-decoration: none;
	color: lightslategray;
	
}

#last_footer a:hover{
	text-decoration: underline;
}

#e404 a{
    color: lightseagreen;
    text-decoration: none;
}

#e404 a:hover{
    color: orangered;
}

iframe, object, embed, video{
    max-width: 100%;
}
  
/* Switch theme */

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /* position: absolute; Adjust position as necessary */
    position: absolute; /* Fixed position */
    top: 20px; /* Adjust the top position as necessary */
    right: 20px; /* Positions the switch to the right side */
    z-index: 1000; /* Ensures the switch is above other content */
}

.toggle-track {
    background: #e0e0e0; /* Light gray track background */
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: relative; /* Container for sun/moon icons and thumb */
    height: 20px; /* Height of the track */
    width: 45px; /* Width of the track */
}

.toggle-icon {
    color: #f9c22b; /* Sun color */
    z-index: 1;
}

.fa-moon-o {
    color: #f9d71c; /* Moon color */
}

.toggle-thumb {
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px; /* Spacing from top of track */
    bottom: 2px; /* Spacing from bottom of track */
    left: 4px; /* Spacing from left of track */
    width: 26px; /* Diameter of the thumb */
    height: 26px; /* Diameter of the thumb */
    transition: 0.3s; /* Smooth transition for sliding */
}

/* When the dark theme is active, change thumb background */
[data-theme="dark"] .toggle-thumb {
    background: #333; /* Dark mode circle color */
}

input#themeswitch {
    display: none; /* Hide the checkbox */
}

input#themeswitch:checked + #theme-switch .toggle-thumb {
    transform: translateX(24px); /* Slide thumb to the right */
}

/* When the dark theme is active, change track background */
[data-theme="dark"] .toggle-track {
    background: #4a4a4a; /* Dark gray track background for dark theme */
}

/* Adjusting sun and moon icon colors for the dark theme */
[data-theme="dark"] .fa-sun-o {
    color: #ffdd57; /* Adjust if you have a different color in mind */
}

[data-theme="dark"] .fa-moon-o {
    color: #fff; /* White moon icon */
}

#contact-form form input, #contact-form form textarea {
    margin-bottom: 0.5em;
}

#contact-form input, #contact-form textarea {
    border: 1px solid #ddd; 
    background: #fff;
    padding: 0.2em;
    width: 97%;
}

#contact-form button, #contact-form input, #contact-form select, #contact-form textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}

/* Categories */
.tag-cloud {
    list-style: none;
    padding: 0;
    text-align: justify; 
    font-size: 16px;
}

.tag-cloud li {
    display: inline-block;
    margin: 0 12px 12px 0; 
}

#taggs {
    padding: 5px;
}
.taggs-group {
    margin: 5px;
    border-top: 1px solid #ddd;
}
.taggs-item {
    margin-left: 5px;
}
.post-tags {
    text-align: right;
}

.relatedposts{
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    margin:0 auto;
    text-align: center;
}

.relative-relatedposts{
    width: 200px;
    display: inline-block;
    padding: 5px;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Pagination */
.pagination a, .pagination span {
    padding: 7px 18px;
    border: 1px solid #eee;
    margin-left: -2px;
    margin-right: -2px;
    background-color: #ffffff;
    display: inline-block;
  }

.pagination a:hover {
        background-color: #f1f1f1;
        color: #333;
    }

.pagination {
    margin-top: 15px;
    text-align: center;
 }

.card {
    display: inline-block;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    border-radius: 5px;
    padding: 5px;
    margin: 30px;
    overflow: hidden; /* To ensure the contents are contained within the card */
}

.card:hover {
    box-shadow: 0 0 8px 8px rgba(0,0,0,0.2);
}

.card-content {
    padding: 15px;
}

.card .btn.read-more {
    display: inline-block; /* To keep the button inline */
    margin-top: 10px;
}

/* Ensure the image fits nicely in the card */
.post-image img {
    display: block;
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains the aspect ratio */
    margin-bottom: 10px;
    border-top-left-radius: 5px; /* Match the card's border radius */
    border-top-right-radius: 5px; /* Match the card's border radius */
}

@media(max-width: 768px) {
	.container{
		width: 86%;
	}
	header #branding,
    nav,
	nav li,
    aside#sidebar{
		float: none;
        text-align: center;
        width: 100%;
		word-wrap: break-word;  /* to break the link into multiple lines */
	}
	article#main-art,
	article#blog{
		float: none;
		width: 100%;
	}
	nav{
		margin-top: 0px;
        overflow: hidden;
        padding-top: 0px;
    }
    nav #post_algo{
        margin-top: 0px;
    }
	header {
        padding-bottom: 20px;
    }
    iframe, video{
        max-width: 100%;
        height: 80%;
    }
    label#theme{
        margin: 0;
    }
    .card {
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
    }    
    
    .floating-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
    }

    .sidebar-link {
        display: inline-block;
    }

    .floating-sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
    }

    .floating-sidebar ul li {
        padding: 0 10px; /* Add this line */
    }


}


/* The box model: to see every box that makes up the page */
/* * {
   outline: 1px solid red !important;
   background-color:rgba(0,2,54,.1) !important
} */

/* * { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); } */