/*-------------------------------------*
 * General HTML Styling
 *-------------------------------------*/
:root {
  --section-width: 90%;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #ff0000 #0b0e14;
}
/* For non Firefox browsers*/
html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: #0b0e14;
}

html::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 6px;
  border: 3px solid #0b0e14;
}
body {
  background-color: #0b0e14;
  color: #ff0000;
  font-family: "Share Tech Mono", monospace, "Courier New", monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  scrollbar-width: thin;
  scrollbar-color: #ff0000 #0b0e14;
}
/* For non Firefox browsers*/
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: #0b0e14;
}
body::-webkit-scrollbar-thumb {
  background: #ff0000;
  border-radius: 5px;
}
body::-webkit-scrollbar-thumb:hover {
  background: #ff5a5a;
}
/*-------------------------------------*
 * Row and Column Styling
 *-------------------------------------*/
/* Used for columns */
.row {
  display: flex;
  flex-direction: row;
}

.column-left {
  flex: 1 200px;
  box-sizing: border-box;
  padding: 10px;
  align-items: center;
}

.column-middle {
  flex: 2 200px;
  box-sizing: border-box;
  padding: 10px;
  align-items: center;
}

.column-right {
  flex: 1 200px;
  box-sizing: border-box;
  padding: 10px;
  align-items: center;
}

/*-------------------------------------*
 * Horizontal Line Styling
 *-------------------------------------*/

/*Adjusting horizontal line looks*/
.hor-line {
  border: none;
  height: 3px;
  background-color: #fb0000;
  width: var(--section-width);
}

/*-------------------------------------*
 * Main Title Styling
 *-------------------------------------*/

/*For the top title */
.main-title {
  text-align: center;
  color: #ff0000;
  font-size: 7vw;
  padding: 0px;
  margin: 5px;
  filter: drop-shadow(0 0 10px #fb0000);
}

/*-------------------------------------*
 * Navigation Bar Styling
 *-------------------------------------*/

/*For the navigation bar's alignment*/
.nav-bar {
  list-style: none; /* Remove bullet points */
  display: flex;
  justify-content: center;
  padding-bottom: 2dvh;
}

/*Spacing for nav bar*/
.nav-bar li {
  margin-right: 30px; /*Add spacing*/
}

/*Adjusting the nav bar's looks*/
.nav-bar a {
  text-decoration: none; /* Remove underline */
  color: #ff5a5a; /* Bright red text */
  background-color: rgba(
    51,
    0,
    0,
    0.65
  ); /* Format: r,g,b,alpha. Color is dark red. */
  border: 2px solid #fb0000; /* Format: border size, border style, color (bright red) */
  border-radius: 2px;
  display: inline-block; /*helps set height and width*/
  font-size: 2rem;
  padding: 10px 20px;
  box-shadow: 0 0 25px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
}

.nav-bar a:hover {
  background-color: rgba(140, 26, 26, 0.4);
  color: #ff5a5a;
}

.nav-bar a.active {
  background-color: rgba(140, 26, 26, 0.4);
  color: #ff5a5a;
}

/*-------------------------------------*
 *  Section Header Styling
 *-------------------------------------*/

.section-header-profile {
  background-color: rgba(210, 0, 0, 0.7);
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin: 0 auto 0px auto; /* Format: Top, right, bottom, left */
  width: var(--section-width); /*fixed box dimension*/
  height: auto;
  max-width: 200px;
}

.section-header-flexible {
  width: var(--section-width);
  height: auto;
}

.section-header-profile-text {
  color: #000000;
  text-align: center;
  padding: 0px; /* Format: Top, right, bottom, left */
  margin: 0px auto; /*unit makes it flexible*/
}

/*DECORATIVE TEXT FOR POST HEADER*/
.section-header-post {
  background-color: rgba(210, 0, 0, 0.7);
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin: 0 auto; /* Format: Top, right, bottom, left */
  width: var(--section-width); /*fixed box dimension*/
  height: auto;
  max-width: 100%;
}

/*DECORATIVE TEXT FOR VERT NAVS*/
.section-header-nav {
  background-color: rgba(210, 0, 0, 0.7);
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin: 0 auto; /* Format: Top, right, bottom, left */
  height: 60px;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-header-misc {
  background-color: rgba(210, 0, 0, 0.7);
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin: 0 auto; /* Format: Top, right, bottom, left */
  width: var(--section-width); /*fixed box dimension*/
  height: 60px;
}

.section-header-general {
  color: #000000;
  text-align: center;
  align-self: center;
  padding: 0px; /* Format: Top, right, bottom, left */
  margin: 0px auto; /*unit makes it flexible*/
  width: 90%;
}

/*SPECIFICALLY FOR POST HEADERS*/
.section-header-post-text {
  color: #000000;
  text-align: left;
  padding: 0px 0px 0px 10px; /* Format: Top, right, bottom, left */
  margin: 0px 0px 0px 0px;
}

.sub-section-header {
  background-color: rgba(210, 0, 0, 0.7);
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin: 0px; /* Format: Top, right, bottom, left */
  width: 150px;
  height: 40px;
  max-width: 100%;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center; /* vertical center */
}

/*sub section's box*/
.sub-section-header-general {
  color: #000000;
  text-align: center;
  padding: 0px; /* Format: Top, right, bottom, left */
  margin: 0px auto; /*unit makes it flexible and align to center*/
}

/*-------------------------------------*
 *  Profile Box Styling
 *-------------------------------------*/

.section-body {
  display: flex;
  flex-direction: column;
  align-self: center;
  background-color: #1d0000;
  border: 2px solid #ef0000;
  border-radius: 2px;
  padding-top: 20px;
  margin: 40px auto; /* Format: Top, right, bottom, left */
  width: 90%;
  height: auto; /*height is adjusted based on content*/
  max-width: 200px; /* Ensure that it is contained within the column */
  box-shadow: 0 0 15px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
}

.paragraph {
  color: #f0f0f0;
  text-align: left;
  margin: 5px 0px;
  padding: 0px 0px 5px 0px; /* Format: Top, right, bottom, left */
  font-size: large;
}

/*Spacing for the regular text that isn't part of the sub-header*/
.profile-txt-section {
  display: flex;
  width: 80%;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  margin: 0px;
  padding: 0px 0px 0px 20px;
}

.profile-pic {
  width: 120px;
  height: 120px;
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin-bottom: 0px; /* center the image but keep some space from the bottom */
  object-fit: cover; /*ensures photo is adjusted inside the square */
  align-self: center;
}

/*-------------------------------------*
 *  Posts Section Styling
 *-------------------------------------*/

.section-post-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.section-body-posts {
  display: flex;
  flex-direction: column;
  align-self: center;
  background-color: #1d0000;
  border: 2px solid #ef0000;
  border-radius: 2px;
  padding: 0px 0px 0px 10px;
  margin: 20px 0px 50px 0px; /* Format: Top, right, bottom, left */
  width: 90%;
  height: auto; /*height is adjusted based on content*/
  max-width: 100%;
  box-shadow: 0 0 15px rgba(251, 0, 0, 0.502); /*Format: X, Y, glow amount, color */
}

.posts-images {
  width: var(--section-width);
  height: auto;
  border: 2px solid #ef0000;
  border-radius: 2px;
  margin-bottom: 5px; /* center the image but keep some space from the bottom */
  object-fit: cover; /*ensures photo is adjusted inside the square */
  align-self: center;
  margin: 10px;
}

/*-------------------------------------*
 *  About Me Styling
 *-------------------------------------*/

/*decorative box*/
.about-section-body {
  display: flex;
  flex-direction: column;
  align-self: center;
  background-color: #1d0000;
  border: 2px solid #ef0000;
  border-radius: 2px;
  padding: 0px 0px 0px 10px;
  margin: 20px auto 0px auto; /* Format: Top, right, bottom, left */
  width: 90%;
  height: auto; /*height is adjusted based on content*/
  max-width: 100%;
  box-shadow: 0 0 15px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
}

.about-nav {
  list-style: none; /* Remove bullet points */
  display: flex;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin-bottom: 5px;
}

.about-nav li {
  display: block;
  width: 100%;
  padding: 10px 0px 10px;
  text-align: left;
}

.about-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #f0f0f0;
}

.about-nav li:hover {
  cursor: pointer;
  border-bottom: 2px solid #ef0000;
  color: #ef0000;
}
.about-nav li.active {
  color: #ef0000;
  border-bottom: 2px solid #ef0000;
}

/*-------------------------------------*
 *  Construction Page Styling
 *-------------------------------------*/

/*decorative box*/
.const-bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #1d0000;
  border: 2px solid #ef0000;
  border-radius: 2px;
  padding: 0px 0px 0px 0px;
  margin: 20px auto 0px auto; /* Format: Top, right, bottom, left */
  width: 100%;
  height: 100%; /*height is adjusted based on content*/
  min-height: 100vh;
  box-shadow: 0 0 15px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
}

.const-header {
  text-align: center;
}

/*-------------------------------------*
 *  Archives Section Styling
 *-------------------------------------*/

/*Adjusting clickable buttons based on nav-bar*/
/*For the button's alignment*/
.post-buttons {
  list-style: none; /* Remove bullet points */
  display: flex;
  justify-content: center;
}

/*Spacing between buttons*/
.post-buttons li {
  margin-right: 30px; /*Add spacing*/
}

/*Adjusting the looks*/
.post-buttons a {
  text-decoration: none; /* Remove underline */
  color: #ff5a5a; /* Bright red text */
  background-color: rgba(
    51,
    0,
    0,
    0.65
  ); /* Format: r,g,b,alpha. Color is dark red. */
  border: 2px solid #fb0000; /* Format: border size, border style, color (bright red) */
  border-radius: 2px;
  font-size: 2rem;
  box-shadow: 0 0 25px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
  width: 200px;
  height: 60px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.post-buttons a:hover {
  background-color: rgba(140, 26, 26, 0.4);
  color: #ff5a5a;
}

.post-buttons a.active {
  background-color: rgba(140, 26, 26, 0.4);
  color: #ff5a5a;
}
.post-buttons a.disabled {
  background-color: rgba(140, 26, 26, 0.2);
  color: #000000;
  cursor: not-allowed;
  opacity: 0.5;
}

/*-------------------------------------*
 *  Blog Posts Styling
 *-------------------------------------*/
.emphasize-word {
  font-size: 1.2em;
  font-weight: bold;
}

.hyperlink {
  color: #ff5a5a;
  text-decoration: underline;
  padding: 0px 0px 5px 0px;
}
.hyperlink:hover {
  color: #5aefff;
  text-decoration: underline;
  padding: 0px 0px 5px 0px;
}

.input-box {
  text-decoration: none; /* Remove underline */
  color: #fb0000; /* Bright red text */
  background-color: rgba(
    51,
    0,
    0,
    0.65
  ); /* Format: r,g,b,alpha. Color is dark red. */
  border: 2px solid #fb0000; /* Format: border size, border style, color (bright red) */
  border-radius: 2px;
  font-size: 2rem;
  width: 90%;
  height: 50px;
  display: flex;
  padding: 10px;
  margin: 10px auto;
  justify-content: center;
  align-items: center;
  font-family: "Share Tech Mono", monospace, "Courier New", monospace;
  font-size: 22px;
}
/*-------------------------------------*
 *  Comments Section Styling
 *-------------------------------------*/
.guestbook {
  display: flex;
  width: 90%;
  min-height: 1200px;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  padding: auto;
  font-family: "Share Tech Mono", monospace, "Courier New", monospace;
  overflow: hidden;
}

/*-------------------------------------*
 * Adaptive HTML Styling
 *-------------------------------------*/
/*Mobile */
@media (max-width: 600px) {
  .nav-bar {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    scrollbar-color: #fb0000;
    scrollbar-width: thin;
    scrollbar-color: #ff0000 #0b0e14;
  }
  .nav-bar li {
    display: flex;
    justify-content: center;
    scroll-snap-align: center;
    flex: 0 0 100%;
  }
  .nav-bar::-webkit-scrollbar {
    width: 10px;
  }
  .nav-bar::-webkit-scrollbar-track {
    background: #0b0e14;
  }
  .nav-bar::-webkit-scrollbar-thumb {
    background: #ff0000;
    border-radius: 5px;
  }
  .nav-bar::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
  }

  .column-left {
    order: 1;
  }
  .column-right {
    order: 2;
  }
  .column-middle {
    order: 3;
  }

  .row {
    flex-direction: column;
    justify-content: center;
  }
  .column-left,
  .column-middle,
  .column-right {
    flex: 0 0 auto;
    max-width: 100%;
    align-items: center;
    align-content: center;
  }
  .section-body-posts,
  .about-section-body,
  .section-header-post,
  .section-header-nav,
  .section-header-misc {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 100%;
  }

      .post-buttons li {
    margin-right: 10px; /*Add spacing*/
  }

  .post-buttons a {
  font-size: 0.5rem;
  width: 80px;
  height: 60px;  
}
}
/*Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .column-left {
    order: 1;
  }
  .column-right {
    order: 2;
  }
  .column-middle {
    order: 3;
  }

  .nav-bar {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-self: center;
    padding: 10px;
  }
  .nav-bar li {
    width: auto;
    margin: 10px;
  }
  .nav-bar a {
    font-size: 1.5rem;
  }
  .nav-bar::-webkit-scrollbar {
    width: 10px;
  }
  .nav-bar::-webkit-scrollbar-track {
    background: #0b0e14;
  }
  .nav-bar::-webkit-scrollbar-thumb {
    background: #ff0000;
    border-radius: 5px;
  }
  .nav-bar::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
  }
  .row {
    flex-direction: column;
    justify-content: center;
  }
  .column-left,
  .column-middle,
  .column-right {
    flex: 0 0 auto;
    max-width: 100%;
    align-items: center;
    align-content: center;
  }
  .section-body-posts,
  .about-section-body,
  .section-header-post,
  .section-header-nav,
  .section-header-misc {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 100%;
  }

   .post-buttons li {
    margin-right: 30px; /*Add spacing*/
  }

  .post-buttons a {
  font-size: 0.5rem;
  width: 80px;
  height: 60px;  
}
}

/*-------------------------------------*
 *  Markdown Styling
 *-------------------------------------*/
 pre code {
display: block;
background-color: #0b0e14;
 padding: 1em;
 margin: 1em;
 border: #fb0000 solid 2px;
 border-radius: 6px;
  box-shadow: 0 0 15px rgba(251, 0, 0, 0.5); /*Format: X, Y, glow amount, color */
  overflow: auto;
 }