body {    
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
}

#content {
  padding-top: 70px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

nav ul li a {
   text-align: center;
}

.card .card-footer {
  text-align: center;
}

.card .card-footer .btn{
  width: 12em;
}

.card {
  margin: 20px;
  height: 35em;
  width: 320px; 
}

.card .card-body{
  width: 320px;
}

/*Does this work?*/ 
.card .card-body .card-text{
  width: 100%;
  height: auto;
}

.flex-deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.active {
  font-weight: bold;
}

.navbar-nav .nav-item .nav-link {
  width: 100px;
}

footer {
  margin-top: 0px;
  bottom:0px;
  width:100%;
  height:60px;
  color: #fff; 
  padding-top: 20px;
  background:#303030;
  position: fixed;
}

#filter {
  text-align: right;
  margin-top: 56px;
}

#proj-head {
  text-align: center;
}

header{
  position: fixed;
  width: 100%;
  z-index: 1;
}

.button {
  background-color: #555555; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  display: block;
}

.button:hover {
  background-color: #454545; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  display: block;
}

.whitelink {
  color: white !important;
}

#content .container .row {
  display: flex;
  flex-wrap: wrap;
}

#content .container .row > div {
  flex: 0 0 auto;
}

#content .container .row > .col-md-1 {
  width: auto; /* Adjust the width as needed */
}

#content .container .row > .col-md-10 {
  width: auto; /* Adjust the width as needed */
}

#blog-container {
  margin-left: 2em;
  max-width:75%;
  min-width: 66%;
  border: 1px solid darkgrey;
  border-radius: 8px;
  padding: 1em;
  max-height: 42em;
  overflow-y: scroll
}

.blog-card {
  margin: 0px;
  margin-right: 2px;
  height: auto;
  max-height: 10em;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-color: darkgrey;
}

#searchInput {
  margin-right: 1em;
}

#blog-wrapper {
  max-width: 90%;
}

pre code {
  font-size: 80%;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4); 
}

#blog-container{
    max-height: 100%;
    border:none;
    overflow-y: hidden
}

#blog-wrapper {
    margin-top: 4em;
}

/* Sidebar Styles */
.sidebar {
  background-color: #282C34; /* Sidebar background color */
  color: #fff; /* Text color in the sidebar */
  height: 100%; /* Make the sidebar full height */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4); /* Box shadow with a slight blur */
  border-radius: 2em;
}

.form-control {
  border-radius: 5px; /* Rounded corners for the search input */
}

.btn-outline-success {
  background-color: #28a745; /* Button background color */
  color: #fff; /* Button text color */
  border-color: #28a745; /* Button border color */
}

/* List of Cards Styles */
#blog-wrapper .nav-item {
  padding: 15px 20px; /* Adjust the spacing between list items */
}

.overflow-auto {
  /* Add scrollbar to the container if content exceeds its height */
  overflow-y: auto;
  max-height: 400px; /* Maximum height of the scrollable container */
}

.card {
  background-color: #282C34; /* Card background color */
  color: white;
}

#blog-wrapper .card {
  background-color: #282C34; /* Card background color */
  border: 4px solid white; /* Card border */
  border-radius: 4em !important;
  margin-bottom: 2em !important; /* Spacing between cards */
  color: white;
}

.card-title {
  font-size: 18px; /* Card title font size */
  margin-bottom: 5px; /* Spacing below card title */
}

.card-text {
  font-size: 16px; /* Card text font size */
  margin-bottom: 10px; /* Spacing below card text */
}

/* Style the scrollbar for the overflow container */
.overflow-auto::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}

/* Style the scrollbar track (background) */
.overflow-auto::-webkit-scrollbar-track {
  background-color: #333; /* Background color of the scrollbar track */
}

/* Style the scrollbar thumb (handle) */
.overflow-auto::-webkit-scrollbar-thumb {
  background-color: #666; /* Color of the scrollbar thumb */
  border-radius: 5px; /* Rounded corners for the scrollbar thumb */
}

/* Style the scrollbar thumb on hover */
.overflow-auto::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* Color of the scrollbar thumb on hover */
}

.card-footer {
  border-top: 0px;
}

#blog-wrapper .card {
  transition: background-color 0.3s ease; /* Add a transition for background-color */
}

#blog-wrapper .card:hover {
  background-color: #333940; /* New background color on hover */
}

#blog-wrapper .card:hover .card-text {
  font-size: 1.4em; /* Increase the font size of .card-text on hover */
}

#blog-wrapper .card .card-text {
  transition: font-size .3s; /* Increase the font size of .card-text on hover */
}

#blog-wrapper .card:hover .card-title {
  font-size: 1.4em; /* Increase the font size of .card-text on hover */
}

#blog-wrapper .card .card-title {
  transition: font-size .3s; /* Increase the font size of .card-text on hover */
}