html{
  background:#ffffff; 
  /* 370b47; */
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  tab-size:4;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-feature-settings:normal;
  font-variation-settings:normal;
  text-color:#000000;
}
:root {
  --background:0 0% 100%;
  --foreground:224 71.4% 4.1%;
  --muted:220 14.3% 95.9%;
  --muted-foreground:220 8.9% 46.1%;
  --card:0 0% 100%;
  --card-foreground:224 71.4% 4.1%;
  --radius:0.5rem;
}

/* Base font size */
body {
  font-family: '__Plus_Jakarta_Sans_e3c363', sans-serif;
  font-size: 12px;
}





h1 {
  font-size: 2em; /* Responsive based on the body font size */
}
p, a {
  font-size: 1em; /* Matches the body font size */
  font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}
.small-text {
  font-size: 0.8em; /* Smaller text */
}

img {
  max-height: 80%;
  max-width: 100%;
  height: auto;
}

body {
  width: 80%;
  max-width: 600px;     /* Sets the maximum width of the body content */
  margin: 0 auto;       /* Centers the body within the viewport */
  padding: 0 10px;      /* Optional: Adds some padding inside the body */
}

/* max-width for smaller screens */
@media (max-width: 450px) {
  body {
    font-size: 12px;
    max-width: 300px;
  }
}

/* Larger font size for larger screens */
@media (min-width: 768px) {
  body {
    font-size: 15px;
  }
}

/* Even larger font size for desktop screens */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

title, h1, h2, h3, li, ul, header, footer, a {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}

h1, h2, h3, h4, h5, h6, a {
    color: black; /* Keeps headings black*/
    transition: text-decoration-color 0.3s; /* Smooth transition for hover effect */
    text-decoration: none;
}

h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, a:hover {
    text-decoration: underline;
    text-decoration-color: #000000;
}

/* aligns the vertically flowing content on the center of the perpendicular axis */
.vertical-centered-container{
  display: flex; /* property which helps set how the element uses the width and length */
  flex-direction: column;
  justify-content: flex-start;
  width: 100%; /* Take full width to control layout properly */
  align-items: center; /* aligns perpendicular to flex-axis, complementary to justigy above */
  margin-top: 50px;
}

/* aligns the vertically flowing content on the left of the perpendicular axis */
.vertical-left-container{
  display: flex; /* property which helps set how the element uses the width and length */
  flex-direction: column;
  justify-content: center;
  width: 100%; /* Take full width to control layout properly */
  align-items: flex-start; /* aligns perpendicular to flex-axis, complementary to justigy above */
  margin-top: 15px;
}

/* justifies the horizontally flowing content on the same axis on the left side */
.horizontal-left-container{
  display: flex; /* property which helps set how the element uses the width and length */
  justify-content: flex-start;
  width: 100%; /* Take full width to control layout properly */
}

.horizontal-title-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Take full width to control layout properly */
}

.horizontal-left-container ul {
  padding-left: 0; /* Removes padding to align correctly to the left */
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* Style for individual navigation items */
.horizontal-left-container li {
  list-style-type: none; /* Removes bullet points */
  display: inline-block; /* Inline-block for horizontal layout */
  justify-content: space-around;
  padding-right: 6px; /* for the space between the li items */
}

.centered-container{
  display: flex; /* property which helps set how the element uses the width and length */
  justify-content: center;
  align-items: center; 
  margin-top: 10rem;
}
.font-bold {
  font-weight:700
}

.font-semibold {
  font-weight:600
}

.font-mono {
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:inherit;
  font-weight:inherit
}

.placeholder\:text-muted-foreground::placeholder {
  color:hsl(var(--muted-foreground))
}

.text-muted-foreground {
  color:hsl(var(--muted-foreground))
}

.text-sm {
  font-size:.875rem;
  line-height:1.25rem
}

.text-xl {
  font-size:1rem;
  line-height:1rem
}

.text-2xl {
  font-size:1.5rem;
  line-height:2rem
}

.border-neutral-200 {
  --tw-border-opacity:1;
  margin: 1.25rem auto;
  border-color:rgb(229 229 229/var(--tw-border-opacity))
}

.rounded-lg {
  border-radius:var(--radius)
}

.mx-auto {
  margin-left:auto;
  margin-right:auto
}

.mx-small {
  margin-left:0.25rem;
  margin-right:0.25rem;
}

.mx-med{
  margin-left:0.55rem;
  margin-right:0.55rem;
}

.max-w-3xl {
  max-width:48rem
}

.max-w-md {
  max-width:28rem
}

.mb-32 {
  margin-bottom:0.05rem
}

.tabular-nums {
  --tw-numeric-spacing:tabular-nums;
  font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.text-zinc-400 {
  --tw-text-opacity:1;
  color:rgb(161 161 170/var(--tw-text-opacity))
}

.mt-10 {
  margin-top:0.05rem
}

.bg-card {
  background-color:hsl(var(--card))
}

.flex-col {
  flex-direction:column
}

.text-card-foreground {
  color:hsl(var(--card-foreground))
}

.overflow-hidden {
  overflow:hidden
}

.hover\:bg-zinc-50:hover {
  --tw-bg-opacity:1;
  background-color:rgb(250 250 250/var(--tw-bg-opacity))
}
.posts-grid {
    display: grid;
    grid-template-columns: 1fr; /* Creates one column that takes full width */
    gap: 10px; /* Adds space between rows */
    width: 100%;
}

.leading-none {
  line-height:1
}