.page-header {
    /*background-color: #a1e3f0;*/
    background-color: #f8f9fa;
    margin-top: 0;
    margin-bottom: 0px;
    padding: 10px 20px 10px 40px;
    padding-bottom: 0px;
}

.page-header h1,
.page-header h1 a,
.page-header h1 a:visited,
.page-header h1 a:active {
    color: #1a1a1a;
    font-size: 36pt;
    text-decoration: none;
    /*text-shadow: -1px -1px 0 #53a7b8, 1px -1px 0 #53a7b8, -1px 1px 0 #53a7b8, 1px 1px 0 #53a7b8;*/
}

h1,
h2,
h3,
h4 {
    /*font-family: 'Lobster', cursive;*/
}

h3 {
    font-size: 20px;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea,
.post-form input {
    width: 100%;
}

.top-menu,
.top-menu:hover,
.top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a,
.post h2 a:visited {
    color: #000000;
}

.post > .date,
.post > .actions {
    float: right;
}

.btn-secondary,
.btn-secondary:visited {
    color: #C25100;
    background: none;
    border-color: #C25100;
    margin-left: 15px;
}

.btn-secondary:hover {
    color: #FFFFFF;
    background-color: #C25100;
}

.center{
    display: flex;
    flex-flow:column wrap;
    justify-content: center;
    align-items: center;
}

.center h1 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    /*border-bottom: 1px solid #ccc;*/
    /*add font---------*/
}

#background h1 {
    margin-top: 10px;
}

#background {
    border-radius: 25px;
    background-color: #ebebeb;
    padding: 20px;
}

.nav-item:hover {
    border-radius: 20px;
    background-color: #c7c7c7;
}

div.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 2%;
}

div.flex-container > div {
  margin: 10px;
}

/* Use media query and show the flex items vertically if screen width is less than 600px for the navbar*/
@media screen and (max-width:600px) {
  div.flex-container {
    flex-direction: column;
  }
}

hr {
  border: none; /* Remove default border */
  border-top: 1px solid #ccc; /* Add a top border for the line */
  width: 85%; /* Adjust width as needed */
  margin: 20px auto; /* Center the line and add vertical spacing */
  border-color: black;
}

hr.header {
  border: none; /* Remove default border */
  border-top: 1px solid #ccc; /* Add a top border for the line */
  width: 100%; /* Adjust width as needed */
  margin: 0px; /* Center the line and add vertical spacing */
  margin-top: 10px;
  border-color: black;
}



.navbar-border { /*Border at the bottom of the header*/
    border-bottom: 1px solid #ccc;
}

.active { /*Shows the current page on the navbar*/
    border-bottom: 2px solid #000000;
}

.container-fluid {
    background-color: #f8f9fa;
}

.bg-body-tertiary {
    background-color: #f8f9fa !important;
}

/*Styles for the main body of each page*/
.flex-info-container {
    padding-left: 5%;
    /*padding-right: 2.5%;*/
    /*padding-right: 55%;*/
    max-width: 47.5%; /*sets column to be half of the cards width*/
    flex: 1;
}

.flex-info-container p {
    text-indent: 2em;
    font-size: 16px;
}

/*Styles for repository links*/
.repository-link {
    color: #4153f2;
    text-decoration: underline;
}

.repository-link:hover {
    color: blue;
    text-decoration: underline;
    /*text-decoration-thickness: 3px;*/
}

.column-break {
    flex-basis: 100%;
    width: 50%; /* Ensures it takes up no visual width, only forces the wrap */
}

.indexhr {
    padding-bottom: 125px;
    visibility: none;
    border: none;
}

/*Card background sizing*/
.columns-index{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 1050px; /*the height of the columns, anything that doesnt fit gets moved to a new column*/
}

.columns-portfolio{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 1400px; /*the height of the columns, anything that doesnt fit gets moved to a new column*/
}

.columns-snhu{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 1600px; /*the height of the columns, anything that doesnt fit gets moved to a new column*/
}

.columns-mtg{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 1000px; /*the height of the columns, anything that doesnt fit gets moved to a new column*/
}
/*#f8f9fa*/
/*#e3e3e3*/