/* General styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #212121;
 
}



@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 20s linear infinite;
}

.image-size {
  width: 200px;  /* adjust as needed */
  height: auto;  /* maintains the aspect ratio */
}



/* Hero Section */
.chero {
  padding: 2rem;
  background-image: linear-gradient(to right, #6EE7B7, #FFB692, #FFA6C1, #B28DFF, #8096FF);
  background-size: 400% 400%;
  animation: gradientTransition 50s ease infinite;
 
}

@keyframes gradientTransition {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero Section */
.hero {
  padding: 2rem;
  background-color: #EEEEEE;
  border-radius: 10px;
}

/* Projects Section */
.projects {
  padding: 2rem;
}

.project-box {
  padding: 1rem;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 10px;
}

.project-box:hover {
  background-color: #e4e4e4;
}

/* Blog Section */
.blog {
  padding: 2rem;
}

.blog-post-preview {
  display: flex;
  padding: 1rem;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  cursor: pointer;
}

.blog-post-preview:hover {
  background-color: #e4e4e4;
}

.blog-post-preview img {
  width: 100px;
  height: auto;
  margin-right: 1rem;
}

.blog-post-date {
  font-size: 0.8rem;
  color: #999;
  margin-top: 0.5rem;
}

.blog a {
  display: block;
  text-align: center;
  margin-top: 1rem;
  text-decoration: none;
  color: #333;
}

.navbar {
  box-shadow: none; /* Remove the shadow */
  border-bottom: none; /* Remove the border */
  
  /* Other existing styles... */
}


.navbar-brand {
  font-weight: bold;
}

.nav-link {
  font-weight: 500;
}

.card {
  border-radius: 12px;
  background-color: #fff;
}


.card-title {
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 1em;
}

.card-text {
  font-size: 1.2em;
  line-height: 1.5;
  margin-bottom: 1em;
}

ul {
  padding-left: 1.5em;
}

.list-group {
  width: 100%;
  max-width: 660px;
  margin-inline: 1.5rem;
}

.form-check-input:checked + .form-checked-content {
  opacity: .5;
}

.form-check-input-placeholder {
  border-style: dashed;
}
[contenteditable]:focus {
  outline: 0;
}

.list-group-checkable .list-group-item {
  cursor: pointer;
}
.list-group-item-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
  background-color: var(--bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
  color: #fff;
  background-color: #18453B;
  border-color: #18453B;
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
  pointer-events: none;
  filter: none;
  opacity: .5;
}

.list-group-radio .list-group-item {
  cursor: pointer;
  border-radius: .5rem;
}
.list-group-radio .form-check-input {
  z-index: 2;
  margin-top: -.5em;
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
  background-color: var(--bs-secondary-bg);
}

.list-group-radio .form-check-input:checked + .list-group-item {
  background-color: var(--bs-body);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px var(--bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {
  pointer-events: none;
  filter: none;
  opacity: .5;
}
ul li {
  font-size: 1.1em;
  line-height: 1.4;
  margin-bottom: 0.5em;
}

.overlay-icons-wrapper {
 

  
  display: flex;
  justify-content: center;
  gap: 10px; /* Adjust this value to add space between the icons */
}

.card-text {
  color: #ab3636;
}
/* Footer */


  /* Projects Section */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

.project-box {
  padding: 1rem;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 10px;
}

.project-box:hover {
  background-color: #e4e4e4;
  
}

.project-box img {
  width: 100%;
  height: 40%;
  margin-bottom: 1rem;
  border-radius: 10px;
  object-fit: cover; 
}

/* Blog Section */
.blog {
  padding: 2rem;
}

.blog h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.blog-post-preview {
  display: flex;
  padding: 1rem;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  cursor: pointer;
}

.blog-post-preview:hover {
  background-color: #e4e4e4;
}

.blog-post-preview img {
  width: 100px;
  height: auto;
  margin-right: 1rem;
}

.blog-post-date {
  font-size: 0.8rem;
  color: #999;
  margin-top: 0.5rem;
}

.blog a {
  display: block;
  text-align: center;
  margin-top: 1rem;
  text-decoration: none;
  color: #333;
}
/* Header */
.header {
  /* Other header styles */
  background-size: 400% 400%;
  animation: rainbowGradient 5s ease infinite;
}

.header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.9;
  background-image: linear-gradient(45deg,  #9BF6FF, #A0C4FF, #BDB2FF);
  background-position: 0% 50%;
}

@keyframes rainbowGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bg-gradient {
  background-image: linear-gradient(45deg,  #9BF6FF, #A0C4FF, #BDB2FF);
  background-size: 400% 400%;
  animation: rainbowGradient 5s ease infinite;
}

/* Header */
.pheader {
  /* Other header styles */
  background-size: 400% 400%;
  animation: rainbowGradient 5s ease infinite;
}

.pheader:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.9;
  background-image: linear-gradient(45deg,  #D8B5FF , #1EAE98);
  background-position: 0% 50%;
}

#word-cloud {
  position: relative;
  width: 300px;
  height: 60px;
  perspective: 800px;
  transform-style: preserve-3d;
}

.word {
  position: absolute;
  font-size: 1.5em;
  opacity: 0.7;
  animation: spin 20s linear infinite;
  transition: transform 1s;
}

@keyframes spin {
  100% {
    transform: rotateY(1turn) rotateX(1turn);
  }
}

/* General styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-size: 400% 400%;
  animation: rainbowGradient 5s ease infinite;
}

body:before {
  content: '';
  position: fixed; /* Changed from absolute to fixed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.9;
 
  background-position: 0% 50%;
}

@keyframes rainbowGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Remove the background related CSS from .header and .pheader */
.header, .pheader {
  /* Remove the background related properties */
}

.header:before, .pheader:before {
  /* Remove the content, position, width, height, and z-index properties */
  background-image: none; /* Remove the background-image */
  background-position: 0% 50%;
}