@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Noto+Sans:wght@400;600&family=Signika:wght@800&display=swap");
:root {
  /* --font-family: "Noto Sans", sans-serif; */
  /* --font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; */
  --border-radius: 0;
  --form-element-spacing-vertical: 1rem;
  --form-element-spacing-horizontal: 1.25rem;
}

/* html:[data-theme=dark]{
  background-color:black;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
  --font-family: "Signika", sans-serif;
  --font-weight: 800;
  margin-bottom: .5rem;
  margin-top: 2rem;
}

html,
body {
  height: 100vh;
  margin: 0;
}

pre>code {
  font-size: 12px;
}

body>footer {
  position: sticky;
  top: 100vh;
  text-align: center;
}

img.blog-image{
    width: 100%;
    max-width: 760px;
    height: auto;

}

#post-content {
  padding: 0.5em 1em;
}

p {
  /* padding-left: 1em; */
  --font-size: 15px;
  margin-bottom: 1rem;
  /* line-height: 1.6; */
}

ol, ul {
  --font-size: 14px;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1.1rem;
}

.center {
    text-align: center;
    padding: 1em;
  }

  .sub {
    font-size: 0.8em;
    font-style: italic;
  }

.gist {
  width:100%;
  max-width: 500px;
  margin:auto;
  overflow:auto;
}

.gist-container {
  width:95%;
  margin:auto;
}

@media (min-width: 1200px) {
  .container {
      max-width: 1100px;
  }
}

.hero-visual {
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
}

/* Responsive layout: place hero visuals beside text on larger screens */
@media (min-width: 992px) {
  .hero-visual {
    float: right;
    /* leave space between the visual and the body text */
    margin: 0 0 1rem 1.5rem; /* top right bottom left */
    width: 35%;
    max-width: 400px; /* keep the same visual max-size */
  }
}

/* iPhone Mockup Styles */
.iphone-mockup {
  position: relative; /* This is crucial for positioning children */
  width: 100%; /* Use full width of the container */
  height: auto;
}

/* The iPhone frame image */
.iphone-frame {
  position: relative; /* Sits on top */
  z-index: 2;         /* Ensures it's above the video */
  width: 100%;
  height: auto;
}

/* The video that plays on the screen */
.screen-video {
  position: absolute; /* Takes it out of the normal flow */
  z-index: 1;         /* Sits behind the frame */

  /*
    * THE MOST IMPORTANT PART:
    * These values position and size the video to fit perfectly
    * inside the transparent area of your specific frame image.
    * You WILL need to adjust these percentages by trial and error.
  */
  width: 75.5%;         /* Tweak this percentage */
  /* height: 85%;      Tweak this percentage */
  top: 6.8%;          /* Tweak this percentage */
  left: 12%;           /* Tweak this percentage */

  /* This ensures the corners of the video are rounded with the frame */
  border-radius: 30px; /* Adjust to match the phone's corner radius */
  object-fit: cover;   /* Ensures the video fills the space without distortion */
}