.nav-item a {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
}
.home-container {
    text-align: center;
}
.blog-container{
    padding: 5% 10%;
   }
.social-icons {
        text-align: center;
        margin: 0 auto; /* Center the div horizontally */
        width: 100%; 
        }
.social-container{
      padding-top: 1%;
      display: inline-block;
    }
body {
          
      background-color: white;
      color: black;
    }
body.dark-mode {
    background-color: rgb(40, 40, 40);
    color: white;
  }

  .navbar {
    background-color: #2087ee;
  }
  .navbar.dark-mode {
    background-color: #333;
    color: rgb(121, 117, 117);
  }


    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }

    .ss {
      background-color: red;
    }

.navbar-brand{
      font-family: 'League Spartan', sans-serif;
       /* Set line height to 1rem */
       
      white-space: nowrap;
      color: white;
      text-align: left;
      margin-left: 5%;
    }
    /* Custom CSS */
.heading-container {
    margin-top: 20px;
}

.heading{
  margin-bottom: 2%;
}

.display-inline {
    display: inline;
}

/* Bootstrap Classes for Responsive Sizing */
@media (max-width: 576px) {
    /* Reduce font size for small screens (e.g., mobile devices) */
    .heading-container h1 {
        font-size: 1.5rem; /* Adjust the size as needed */
    }
}

.inner-box {
  display: block;
  width: 90%;
  margin: 1% auto;
  background-color: #ffffff;
  color: #495057;
  border-width: 2px;
  border-radius: 5px;
  border-color: #2087ee;

}

.inner-box.dark-mode{
  background-color: rgb(40, 40, 40);
  color: #ffffff;

}

.box {
  color: rgb(4, 4, 4);
  padding: 1rem;
  height: 4rem;
  background-color: #ffffff;

}

.boxes {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .boxes { grid-template-columns: repeat(2, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .boxes { grid-template-columns: repeat(3, 1fr); }
}

.blogs {
  max-width: 1200px;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}