/* Ensures navbar scrolls smoothly and is visible*/
.navbar {
    opacity: 100;
    transition: opacity 0.3s;
}

/* Add some padding between items on the navbar*/
.nav-link {
    padding-right: 30px !important;
}

/* Ensures navbar stays or sticks to the top when you are scrolling the page */
.is-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Ensures navbar is visible at the top of the screen when you are scrolling */
.is-visible {
    opacity: 1;
    transition: opacity 0.3s;
}

/* Sets the color of the body of each page and ensures they have no margin and padding as well as a flexible height */
body {
    background-color: #f5f6f7;
    margin: 0;
    padding: 0;
    height: auto;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #212121;
    color: #e0e0e0;
}

body.dark-mode .navbar {
    background-color: #212121 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .dropdown-menu {
    background-color: #212121 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .navbar .nav-link:hover {
    color:  #0D6EFD !important; /* Link hover color in dark mode */
}

body.dark-mode .post-title:hover {
    color:  #0D6EFD;
}

/* ensures the drop down menu text is black */
.dropdown-item {
    color: black;
}

/* make navbar toggle icon black */
.navbar-toggler {
    border-color: black; /* Border color for better visibility */
}

body.dark-mode .navbar-toggler {
    border-color: white
}

/* Default hamburger icon */
.toggler-icon {
  display: inline-block;
  cursor: pointer;
}

.toggler-icon span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px auto;
  background-color: black; /* Default color */
  transition: background-color 0.3s ease;
}

/* Dark mode */
body.dark-mode .toggler-icon span {
  background-color: white; /* White in dark mode */
}

/* Toggle Button Styles */
.form-check-input:checked {
    background-color: #007bff;
}

/* Ensures navbar links are black by default */
.navbar .nav-link {
    color: black !important; /* Override Bootstrap's default styles */
}

/* Ensures navbar links turn red on hover */
.navbar .nav-link:hover {
    color:  #0D6EFD !important; /* Override Bootstrap's default styles */
}

.socials {
  margin: 0 10px;
}

.d-flex {
  display: flex;
}

.gap-3 {
  gap: 20px;
}

/* For my name and tiny logo on the navbar */
.navbar-brand {
    padding: 5px 15px; /* Optional: add padding for better appearance */
}

/* Ensure that padding is removed from columns within a .row */
.row > .col-10,
.row > .col-sm-8,
.row > .col-lg-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure margin is removed from rows */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    justify-content: center; /* Center horizontally */
    text-align: center;
}

#post-text {
    text-align: left !important;
}

/* Ensures the image doesn't overflow its container */
.responsive-image {
    width: 100%; /* Fill the width of the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px
}

/* Ensures the image doesn't overflow its container */
.responsive-image-index {
    width: 100%; /* Fill the width of the container */
    border-radius: 15px
}

/* Makes the border of the logo image not rounder*/
.logo {
    border-radius: 15px
}

@font-face {
  font-family: 'Amsterdam Four_ttf';
  src: url('/static/fonts/amsterdam-four.ttf') format('truetype');
}

.lead-text {
  font-family: 'Amsterdam Four_ttf', sans-serif;
}

#me {
    padding-bottom: 30px;
}

/* Adds padding to the content of each page to ensure nothing gets stuck under the navbar */
#content {
  padding-top: 10px;
}

/* control the styling for portfolio text */
#portfolio{
    font-size: 50px;
}

/* Adds padding to all sides of the all project grid */
#first-project {
    padding: 30px;
}

#second-project {
    padding: 30px;
}

#third-project {
    padding: 30px;
}

#fourth-project {
    padding: 30px;
}

/* Background image for footer */
.footer-section {
    background-image: url('/static/img/rsbglight.png'); /* Path to your background image */
    background-size: contain; /* Ensure the image covers the entire footer */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image repetition */
    color: white; /* Optional: Change text color for contrast */
}

body.dark-mode .footer-section {
    background-image: url('/static/img/footerdarkimg.png');
    background-size: contain; /* Ensure the image covers the entire footer */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image repetition */
    color: white; /* Optional: Change text color for contrast */
}

/* control the styling for blog text */
#blog{
    font-size: 50px;
}

/* controls the padding for the blog columns */
#python-blog {
    padding: 30px;
}

#ugescapades{
    padding: 30px;
}

/* Aligns recent posts text to the left margin */
#blog-text {
    text-align: left !important;
    margin-left: 30px;
}

/* Adds padding to the various titles */
.title {
    padding-top: 10px;
    text-align: left;
}

/* paragraph alignment */
.align-left {
    text-align: left;
}

/* styling for blog posts*/
.post-preview {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    margin-bottom: 20px;
}

.post-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
}

body.dark-mode .post-title {
    color: white !important;
}

body.dark-mode .post-title-link {
    text-decoration-color: white !important; /* Corrected property */
}

.post-title-link{
    color: black !important;
}

.container.img-fluid {
  max-width: contain;
  height: auto;
}

/* Styles for the post header */
.masthead {
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 100px 0; /* Adjust as needed */
    text-align: center;
    margin-bottom: 10px;
}

/* musings header in light mode */
.musings {
    background-image: url('/static/img/musingsdark.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 175px 0; /* Adjust as needed */
    text-align: center;
    margin-bottom: 10px;
}

/* dark mode for musings header*/
body.dark-mode .musings {
    background-image: url('/static/img/musings.png');
}

/* light mode for portfolio header*/
.portfolio {
    background-image: url('/static/img/portfoliodark.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 175px 0; /* Adjust as needed */
    text-align: center;
    margin-bottom: 10px;
}

/* dark mode for portfolio header*/
body.dark-mode .portfolio {
    background-image: url('/static/img/portfolio-banner.png');
}

.post-heading h1 {
    font-size: 2.5rem; /* Adjust as needed */
    margin: 0;
    color: white; /* Set the text color to white */
    text-shadow:
        -1px -1px 0 black,  /* Top-left shadow */
         1px -1px 0 black,  /* Top-right shadow */
        -1px  1px 0 black,  /* Bottom-left shadow */
         1px  1px 0 black;  /* Bottom-right shadow */
}

/* Styles for the post content */
.post-content {
    line-height: 1.8;
    font-size: 1.1rem; /* Adjust as needed */
}

.post-content p {
    margin-bottom: 1.5rem;
}

.paragraph{
    text-align: left;
}

/* editing for heading and subheading on blog pages */
.site-heading {
    color: black;
        text-shadow:
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white;
}

/* styling at the bottom of the individual post pages */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-unstyled li {
    margin-bottom: 10px;
}

.list-unstyled a {
    text-decoration: none;
    color: #007bff; /* Change color as needed */
}

.list-unstyled a:hover {
    text-decoration: underline;
}

/* creates a margin so blog posts are not directly under header image */
.block-text {
    margin-top: 20px;
    text-align: center;
}

/* styling for category list just before footer */
.category-list {
    display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .category-item {
        margin: 5px;
    }
    .category-item a {
        text-decoration: none;
        font-weight: bold;
    }
    @media (min-width: 992px) {
        .category-list {
            flex-direction: row;
        }
    }
    @media (max-width: 991px) {
        .category-list {
            flex-direction: column;
            align-items: flex-start;
        }
    }

/* for the videos on the pages */
.responsive-video {
    width: 100%; /* Fill the width of the container */
    height: auto; /* Maintain aspect ratio */
}

/* makes the text in the footer black */
body.dark-mode #footer-text {
    color: white !important;
}

/* drop down menu link hover should not be highlighted white */
body.dark-mode .dropdown-menu {
    --bs-dropdown-link-hover-bg: none !important;
    color: white !important;
}

body.dark-mode .dropdown-item {
    color: white;
}

body.dark-mode .navbar .nav-link {
    color: white !important;
}

body.dark-mode .dropdown-item:hover {
    color:  #0D6EFD !important; /* Link hover color in dark mode */
}

body.dark-mode .form-control {
    background-color: #2f2f2f;
}

body.dark-mode .card {
    background-color: #2f2f2f;
    color: white;
}

.form-control {
    color: black !important; /* Change the text color to white */
    background-color: transparent; /* Optional: If you want a transparent background */
}

/* Dark mode */
body.dark-mode .form-control::placeholder {
  color: white; /* White placeholder color in dark mode */
}

body.dark-mode .form-control {
    color: white !important;
}

body.dark-mode .btn-outline-success {
    --bs-btn-color: white;
    --bs-btn-border-color: black;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: white;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #198754;
    --bs-btn-active-bg: #007bff;
    --bs-btn-active-border-color: white;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: white;
    --bs-gradient: none;
}

.btn-outline-success {
    --bs-btn-color: white;
    --bs-btn-border-color: black;
    --bs-btn-bg: #007bff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: black;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #198754;
    --bs-btn-active-bg: #007bff;
    --bs-btn-active-border-color: black;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: black;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: black;
    --bs-gradient: none;
}

.text-muted {
    color: black !important;
}

/* modal title color */
.modal-title {
    color: #000;
}

.modal-body {
    color: #000;
}

.form-group {
    text-align: left;
}

#call-to-action {
    text-align: center;
    font-size: 50px;
    padding-bottom: 10px;
    padding-top: 40px;
}

/* align the comments to the left*/
.media-body {
    text-align: left !important;
}

.text-muted {
    color: #6c757d !important; /* Bootstrap's muted color */
    font-size: 0.875em !important; /* Optional: Adjust size to be smaller */
}

#reply-link {
    text-align: left;
}



/* svg control for dark and light mode */
body.dark-mode .ins {
    content: url('/static/img/instagram.svg');
}

body.dark-mode .lin {
    content: url('/static/img/linkedin.svg');
}

body.dark-mode .fac {
    content: url('/static/img/facebook.svg');
}

body.dark-mode .github {
    content: url('/static/img/github.svg');
}

body.dark-mode .eye {
    content: url('/static/img/eye.svg');
}

body.dark-mode .thumb {
    content: url('/static/img/thumbsup.svg')
}

.cke_editable p {
    text-align: left !important;
}

/* Comment Styling */
.commentBox {
  padding:10px;
  border-top:1px dotted #bbb;
}
.commentBox .form-group:first-child, .actionBox .form-group:first-child {
  width:80%;
}
.commentBox .form-group:nth-child(2), .actionBox .form-group:nth-child(2) {
  width:18%;
}


.comment {
  padding-top: 20px;
}
.commentList {
  padding:0;
  list-style:none;
  max-height:200px;
  overflow:auto;
}
.commentList li {
  margin:0;
  margin-top:30px;
}
.commentList li > div {
  display:table-cell;
}
.commenterImage {
  width:30px;
  margin-right:5px;
  height:100%;
  float:left;
}
.commenterImage img {
  width:100%;
  border-radius:50%;
}
.commentText p {
  margin:0;
}

.flash {
  color: #ff182d;
}

#aboutme{text-transform:uppercase;margin:0 0 20px;font-family:"Lato",sans-serif;font-weight:100;letter-spacing:1px;padding-top:50px;padding-bottom:20px;font-size:larger;}
#aboutpage{text-transform:uppercase;margin:0 0 20px;font-family:"Lato",sans-serif;font-weight:300;letter-spacing:1px;padding-top:50px;padding-bottom:20px;font-size: x-large}
#posts{text-transform:uppercase;font-family:"Lato",sans-serif;font-weight:300;letter-spacing:1px;padding-top:50px;}
#projects{text-transform:uppercase;font-family:"Lato",sans-serif;font-weight:300;letter-spacing:1px;padding-top:50px;}
#blogs{text-transform:uppercase;font-family:"Lato",sans-serif;font-weight:300;letter-spacing:1px;padding-top:30px}
#contact{text-transform:uppercase;font-family:"Lato",sans-serif;font-weight:300;letter-spacing:1px;text-align:center;padding-bottom:30px}