body {
  margin: 0;
  padding: 0;
  background-color: #121212;
  color: antiquewhite;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
}

.top {
  flex: 0.2;
  border: 2px solid antiquewhite;
  padding: 10px;
}

.bottom {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.column {
  border-left: 2px solid antiquewhite;
  padding-left: 20px;
  word-wrap: break-word;
  word-break: break-word;
}



.column:first-child {
  border-left: none;
  padding-left: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.socials-top,
.socials-bottom {
  flex: 1; /* each takes half the height of the column */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* aligns links to top */
  gap: 8px; /* spacing between links */
  padding-top: 10px;
}

/* Keep your existing social link styling */
.socials-top a,
.socials-bottom a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: antiquewhite;
}

.socials-top a span,
.socials-bottom a span {
  font-size: 1.1rem;
}

.socials-top {
  border-bottom: 2px solid antiquewhite;
}

.blog-entry a {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* prevent overlap */
}

.blog-entry a span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.blog-entry:hover {
  background: rgba(255, 255, 255, 0.15);
}

#typed-text::after {
  content: "|";
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@media (max-width: 900px) {
  .bottom {
    grid-template-columns: 1fr; /* stack columns vertically */
    gap: 15px;
  }

  .column {
    padding-left: 10px;
    border-left: none;
    border-top: 2px solid antiquewhite; /* optional separator */
  }
}

#post-content h1, #post-content h2, #post-content h3 {
  color: antiquewhite;
  margin-top: 20px;
}

#post-content p {
  line-height: 1.6;
  margin-bottom: 15px;
}

#post-content ul {
  list-style: disc;
  margin-left: 20px;
}

#post-content code {
  background: rgba(255,255,255,0.1);
  padding: 4px;
  border-radius: 4px;
}

#post-content pre {
  background: rgba(255,255,255,0.1);
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}