.PageRow{
  margin: 0;
  overflow-x: hidden;
}

.PageContainer{
  width: 100%;
  max-width: 85%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

@media (max-width: 768px) {
  .PageContainer {
    max-width: 100%;
    padding: 0 12px;
  }
}

body{
  padding: 0px;
  margin: 0;
  font-size: var(--textSize);
  overflow-x: hidden;
}

/* Blog page backdrop, matching Fabrik Null splash */
.blog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--backgroundColor);
  background-image: url(/assets/Images/Background_DarkTheme.png);
  background-size: 33px 33px;
  background-repeat: repeat;
}

.blog-backdrop-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 30%,
    var(--accentVeryTransparent) 0%,
    transparent 55%
  );
  opacity: 0.5;
}

@media (prefers-color-scheme: light) {
  .blog-backdrop {
    background-image: url(/assets/Images/Background_LightTheme.png);
  }
}

.D3{
  width: 100%;
  height: 250px;
  cursor: pointer;
  background: var(--dark-transparent);
  border: 1px solid color-mix(in srgb, var(--textColor) 8%, transparent);
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0;
}

@media (prefers-color-scheme: light) {
  .D3 {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.08);
  }
}

/* Img Block */
.imgContainer {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  column-gap:3%;
  row-gap: 10px;
}
.imgContainer > img {
  max-height: 300px;
  max-width: 45%;
  width: auto;
  cursor: pointer;
  display: flex;
}
.textImage{
  align-self: center;
}
.clear{
  clear: right;
}

/* Headings and hr now defined in Theme.css */

/* ── Blog back button ── */
.blog-back-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 6px 0;
  background: var(--dark);
  border-bottom: 1px solid var(--accentTransparent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.blog-back-btn {
  font-family: 'Orbital', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accentColor);
  text-decoration: none;
  padding: 4px 20px;
  border: 1px solid var(--accentVeryTransparent);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.blog-back-btn:hover {
  background: var(--accentVeryTransparent);
  border-color: var(--accentTransparent);
  color: var(--glow-opaque);
  text-decoration: none;
}

/* Blog nav tabs (e.g. Inktober year selector) */
.blog-nav-tabs {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}

.blog-nav-tab {
  font-family: 'Orbital', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--textColor) 50%, transparent);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.blog-nav-tab:hover {
  color: var(--textColor);
  border-color: color-mix(in srgb, var(--textColor) 15%, transparent);
  text-decoration: none;
}

.blog-nav-tab-active {
  color: var(--accentColor);
  border-color: var(--accentVeryTransparent);
  background: color-mix(in srgb, var(--accentColor) 8%, transparent);
}

.blog-nav-tab-active:hover {
  color: var(--accentColor);
}

@media (max-width: 600px) {
  .blog-nav-tabs {
    gap: 3px;
    margin-left: 8px;
  }
  .blog-nav-tab {
    font-size: 9px;
    padding: 4px 8px;
    letter-spacing: 1px;
  }
}

@media (prefers-color-scheme: light) {
  .blog-back-bar {
    background: var(--dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}


.sticky-top {
	position: fixed;
	width: 100%;
	top: 0px;
	box-sizing: border-box;
  min-height: 20px;
	padding-top: 0%;
	padding-bottom: 0%;
	margin-top: 0%;
	box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.4);

}

/* BI Ism Allah */

.biIsm{
  font-size: 32pt;
  text-align:center;
  margin-top:30px; 
  margin-bottom:30px;

}
.biIsm > img{
  width: 100%;
  margin-top:30px; 
  margin-bottom:30px;
}

@media (prefers-color-scheme: light) {
	.biIsm > img{
    content:url("/BlogPages/LearningToDrawFromScratch/assets/BiIsmAllah.svg")
  }

	.sticky-top {
		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	}
}


/* Nav-Bar */
@media only screen and (min-width: 990px) {
  
  nav > h2{
    font-size: x-large;
  }
  .biIsm > img{
    width: 80%;
  }

}


/* ── Content card backdrop ── */
.blog-content,
.toc-layout-content {
  background: var(--dark-transparent);
  border: 1px solid color-mix(in srgb, var(--textColor) 8%, transparent);
  border-radius: 8px;
  padding: 32px 32px 24px;
}

@media (prefers-color-scheme: light) {
  .blog-content,
  .toc-layout-content {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Badges defined in /css/Theme.css */

/* 3D Dat GUI styling css*/

.main{
  position: absolute;

}

/* Reading time estimate, inserted by /js/readingTime.js */
.reading-time {
  font-family: 'JetBrainsMono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--textColor) 55%, transparent);
  margin: -4px 0 20px;
}