@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

/* src/styles.scss */
.h1 {
  font-weight: 700;
  line-height: 1.2;
  font-size: 1.75rem;
}
@media (max-width: 640px) {
  .h1 {
    font-size: 24px;
  }
}
.h2 {
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.5rem;
}
@media (max-width: 640px) {
  .h2 {
    font-size: 21px;
  }
}
.h3 {
  font-weight: 600;
  line-height: 1.3;
  font-size: 1.25rem;
}
@media (max-width: 640px) {
  .h3 {
    font-size: 19px;
  }
}
.h4 {
  font-weight: 600;
  line-height: 1.4;
  font-size: 1.1rem;
}
@media (max-width: 640px) {
  .h4 {
    font-size: 17px;
  }
}
.text-lg {
  line-height: 1.6;
  font-size: 1.125rem;
}
@media (max-width: 640px) {
  .text-lg {
    font-size: 17px;
  }
}
.text-base {
  line-height: 1.6;
  font-size: 1rem;
}
@media (max-width: 640px) {
  .text-base {
    font-size: 16px;
  }
}
.text-sm {
  line-height: 1.5;
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .text-sm {
    font-size: 15px;
  }
}
.text-xs {
  line-height: 1.5;
  font-size: 0.875rem;
}
@media (max-width: 640px) {
  .text-xs {
    font-size: 14px;
  }
}
.text-post-title {
  font-weight: 700;
  line-height: 1.35;
  font-size: 1.12rem;
}
@media (max-width: 640px) {
  .text-post-title {
    font-size: 1.1rem;
  }
}
.text-post-content {
  line-height: 1.65;
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .text-post-content {
    font-size: 1rem;
  }
}
.text-post-meta {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .text-post-meta {
    font-size: 0.95rem;
  }
}
.text-comment {
  line-height: 1.6;
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .text-comment {
    font-size: 0.98rem;
  }
}
.text-nav {
  font-weight: 500;
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .text-nav {
    font-size: 0.95rem;
  }
}
.text-button {
  font-weight: 500;
  font-size: 0.875rem;
}
@media (max-width: 640px) {
  .text-button {
    font-size: 0.98rem;
  }
}
.text-label {
  font-weight: 500;
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .text-label {
    font-size: 0.92rem;
  }
}
.text-small {
  font-size: 0.75rem;
}
@media (max-width: 640px) {
  .text-small {
    font-size: 0.88rem;
  }
}
.text-tiny {
  font-weight: 600;
  font-size: 0.7rem;
}
@media (max-width: 640px) {
  .text-tiny {
    font-size: 0.82rem;
  }
}
:root {
  --header-offset: 0;
  --header-height: 70px;
  --app-top-margin: 5rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeIn {
  animation: fadeIn 0.5s ease-in-out forwards;
}
.fadeOut {
  animation: fadeOut 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeIn {
  animation: fadeIn 0.5s ease-in-out both;
}
.fadeOut {
  animation: fadeOut 0.5s ease-in-out both;
}
.topMargin {
  margin-top: 3.5em !important;
}
* {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  background:
    linear-gradient(
      135deg,
      #f8fafc 0%,
      #e2e8f0 100%);
}
#app-root {
  margin-top: 0;
  padding-top: 0;
}
[class*=-page],
.page,
.main-content,
main {
  padding-top: 5px !important;
}
body {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 1rem;
  align-items: start;
  min-height: 100vh;
}
@media only screen and (max-width: 790px) {
  body {
    display: block;
    grid-template-columns: 1fr;
  }
  .left-sidebar,
  .right-sidebar {
    display: none !important;
  }
  .main-content,
  main,
  .content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
app-root {
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding-top: 72px !important;
  margin-top: 0 !important;
  grid-column: 1/-1;
}
@media only screen and (max-width: 789px) {
  app-root {
    padding-top: 72px !important;
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 698px) {
  app-root {
    padding-bottom: 72px !important;
  }
}
@media only screen and (max-width: 900px) {
  app-root {
    grid-column: 1/-1;
  }
}
header,
footer,
app-header,
app-footer,
.app-header,
.app-footer,
.topbar,
.bottombar,
.site-header,
.site-footer {
  grid-column: 1/-1 !important;
  width: 100%;
  left: 0;
}
header,
app-header,
.app-header,
.site-header {
  position: fixed;
  top: var(--header-offset);
  z-index: 1000;
}
footer,
app-footer,
.app-footer,
.site-footer,
.bottombar {
  position: fixed;
  bottom: 0;
  z-index: 900;
}
html,
body,
app-root,
.home-col,
.home-col.right,
.home-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html.home-main-no-scroll,
body.home-main-no-scroll {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: auto;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
app-root::-webkit-scrollbar,
.home-col::-webkit-scrollbar,
.home-col.right::-webkit-scrollbar,
.home-grid::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}
@media only screen and (max-width: 520px) {
  body,
  app-root,
  .home-page,
  .home-grid,
  .home-col,
  .main-content,
  main,
  .content {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #app-root {
    margin-top: calc(var(--header-height) + var(--header-offset) + var(--app-top-margin)) !important;
  }
  app-root,
  .home-page,
  .home-grid,
  .home-col,
  .main-content,
  main,
  .content {
    padding-top: 0 !important;
  }
  header,
  app-header,
  .app-header,
  .site-header,
  footer,
  app-footer,
  .app-footer,
  .site-footer {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.post-gallery.full .thumb video,
.post-gallery .thumb video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
@media only screen and (max-width: 640px) {
  .post-gallery.full .thumb video,
  .post-gallery .thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}
@media (max-width: 640px) {
  h1 {
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.75rem;
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  h1 {
    font-size: 24px;
  }
}
@media (max-width: 640px) {
  h2 {
    font-weight: 700;
    line-height: 1.3;
    font-size: 1.5rem;
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  h2 {
    font-size: 21px;
  }
}
@media (max-width: 640px) {
  h3 {
    font-weight: 600;
    line-height: 1.3;
    font-size: 1.25rem;
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  h3 {
    font-size: 19px;
  }
}
@media (max-width: 640px) {
  h4 {
    font-weight: 600;
    line-height: 1.4;
    font-size: 1.1rem;
  }
}
@media (max-width: 640px) and (max-width: 640px) {
  h4 {
    font-size: 17px;
  }
}
@media (max-width: 640px) {
  h5,
  h6 {
    font-size: 16px !important;
  }
  p,
  span,
  div,
  li,
  label,
  a {
    font-size: 16px !important;
  }
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  small,
  .small-text,
  .text-small {
    font-size: 0.88rem !important;
  }
  .comment,
  .meta,
  .timestamp,
  .text-muted {
    font-size: 0.9rem !important;
  }
  button,
  .btn {
    font-size: 0.98rem !important;
  }
}

/* angular:styles/global:styles */