@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

html { height: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #1c2e1c;
  background: url('/img/trees.jpg') no-repeat center center fixed;
  background-size: cover;
}
.wrapper { flex: 1; }

/* Frosted glass card used for main content areas */
.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 40px;
  margin: 20px auto;
  max-width: 780px;
}

/* Typography */
.blog-post-meta { margin: -10px 0 0 2px; color: #6b7c6b; }
.tags { margin: 0 0 0 2px; color: #6b7c6b; }
.version { color: #999; font-size: 10px; margin-bottom: 20px; }
.profile { max-width: 300px; margin-top: 30px; }
.footer { margin-top: 20px; }

/* Nav and links */
.menu a, .footer a { color: rgba(255, 255, 255, 0.85); }
.menu a:hover, .footer a:hover { color: #fff; text-decoration: none; }
.logo { background: #2d5a27; color: #fff; font-size: 28px; padding: 10px 15px; float: left; border-radius: 6px; }
.logo:hover { background: #1e3d1a; color: #fff; text-decoration: none; }
.cover { padding-top: 35%; }
.menu { padding-top: 20px; }
.menu a { padding: 0 10px; }
.full-height { height: 100%; }
.keywords {
  border-right: solid 3px #2d5a27;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.60);
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite;
}
.admin-posts { list-style: none; text-align: left; }
.admin-posts li { padding-bottom: 10px; }
.research { background: rgba(255,255,255,0.7); margin-bottom: 5px; padding: 8px; border-radius: 6px; }
.research:nth-child(even) { background: rgba(255,255,255,0.5); }
.bottom { min-height: 200px; width: 100%; background-color: rgba(30, 50, 30, 0.95); color: #d4e4d4; }
.bottom a { color: #8bc48b; }
.bottom a:hover { color: #fff; }

/* text animation */
@keyframes animated-text { from { width: 0; } to { width: 350px; } }
/* cursor animations */
@keyframes animated-cursor { from { border-right-color: rgba(0,0,0,.75); } to { border-right-color: transparent; } }

video {
  left: 50%; min-height: 100%; min-width: 100%;
  position: absolute; top: 50%; transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) { #video-bg > video { height: 300%; top: -100%; } }
@media (max-aspect-ratio: 16/9) { #video-bg > video { width: 300%; left: -100%; } }
@supports (object-fit: cover) { #video-bg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } }

/* Markdown tables */
#html table, #page-content table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
#html th, #html td, #page-content th, #page-content td { padding: 0.5rem; border: 1px solid #c8d6c8; text-align: left; }
#html thead th, #page-content thead th { border-bottom: 2px solid #c8d6c8; background-color: rgba(45, 90, 39, 0.08); }

/* Comments */
.comment { border-bottom: 1px solid #d4e4d4; padding: 15px 0; text-align: left; }
.comment-meta { color: #6b7c6b; font-size: 13px; margin-bottom: 5px; }
.comment-content { font-size: 14px; }

/* Search */
.nav-search { display: inline; margin-left: 10px; }
.nav-search-input { font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; width: 140px; vertical-align: baseline; background: rgba(255,255,255,0.2); color: #fff; }
.nav-search-input::placeholder { color: rgba(255,255,255,0.6); }
.nav-search-input:focus { outline: none; border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.3); }
.search-page-form { margin: 20px 0; }
.search-page-input { font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 8px 14px; border: 1px solid #c8d6c8; border-radius: 8px; width: 300px; }
.search-page-btn { font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 8px 20px; border: none; border-radius: 8px; background: #2d5a27; color: #fff; cursor: pointer; }
.search-page-btn:hover { background: #1e3d1a; }