styles.css

/* Define styles for unvisited links */
a:link {
    color: blue;
    text-decoration: none; /* Remove underline if desired */
}

/* Define styles for visited links */
a:visited {
    color: blue; /* Set the color to blue for visited links */
}

/* Define styles for hovered links */
a:hover {
    color: purple; /* Change color on hover if desired */
}

#home-box {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #007bff; /* Blue background color, you can change this */
    color: #fff; /* Text color */
    padding: 10px; /* Adjust padding as needed */
}

#home-box a {
    text-decoration: none;
    color: #fff; /* Link color */
    font-weight: bold;
    font-size: 18px;
}

#education-box {
    position: absolute;
    top: 0;
    left: 67px; /* Adjust the left value to move the Education block to the right */
    background-color: #007bff; /* Blue background color, you can change this */
    color: #fff; /* Text color */
    padding: 10px; /* Adjust padding as needed */
}

#education-box a {
    text-decoration: none;
    color: #fff; /* Link color */
    font-weight: bold;
    font-size: 18px;
}
#experience-box {
    position: absolute;
    top: 0;
    left: 168px; /* Adjust the left value to move the Education block to the right */
    background-color: #007bff; /* Blue background color, you can change this */
    color: #fff; /* Text color */
    padding: 10px; /* Adjust padding as needed */
}

#experience-box a {
    text-decoration: none;
    color: #fff; /* Link color */
    font-weight: bold;
    font-size: 18px;
}

/* Style for the project dropdown container */
#project-box {
    position: absolute;
    top: 0;
    left: 277px; /* Adjust the left value to position the dropdown */
    background-color: #007bff;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

/* Style for the block label */
.block-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Style for the block select element */
.block-select {
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #007bff; /* Background color for the dropdown */
    color: #fff; /* Text color for the dropdown */
    font-weight: bold;
    font-size: 18px;
}

/* Remove the default dropdown arrow */
.block-select::-ms-expand {
    display: none;
}

/* Style for the block select on hover/focus */
.block-select:hover, .block-select:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}


.separator {
    width: 100%;
    height: 1px;
    background-color: #ccc; /* You can change the color to your preference */
    margin: 20px 0; /* Adjust margin as needed to control the spacing */
}

.education-block {
    text-align: center;
    margin: 0 auto; /* Center the block horizontally */
}

header {
    margin-top: 50px;
    text-align: center; /* Center-align the text inside the header */
}

.center {
    text-align: center;
}

.center table {
    margin: 0 auto;
}

.image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-container img {
    max-width: 25%; /* You can adjust the width as needed */
    height: auto;
}

#scrollToTopButton {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}