@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  /* Layout Parameters */
  --profile-card-aspect-ratio: 439/720;
  --sidebar-width: 224px;

  /* Used for setting the profile card height in the thin & narrow layouts. */
  /* Its not exactly a great approach, but I didn't feel like JS, and its   */
  /* not like these values will change often, so doing it manually is fine. */
  --nav-height: calc((3.5rem * 5) + (8px * 4)); /* 4 * 3.5rem buttons + 3 * 8px gaps */
  --widget-height: 6rem;
}


/* Site Layout */
html {
  /* Hides the sometimes visible seam between the water and sky */
  background-color: rgb(var(--bg-bottom-rgb));
}

/* Body Styling */
body {
  /* Layout */
  width: min(85%, 1024px);
  margin: 32px auto;

  /* Background */
  background: var(--bg-bottom-rgb);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* The following CSS lays out the site into a two column layout. */
.container {
  /* Layout */
  display: flex;
  flex-direction: row;
  height: 100%;
  min-width: 0px;
}

/* Sidebar: The narrow left-side column which mainly serves as the navigation bar */
.sidebar {
  /* Appearence */
  position: fixed;
  overflow: visible;
  width: var(--sidebar-width);
  height: calc(100vh - 64px);

  /* Layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0px;
}


/* Content: The wider right-side column which contains the actual content of the page */
.content {
  /* Appearence */
  width: 100%;
  margin-left: calc(var(--sidebar-width) + 8px); /* sidebar + padding */

  /* Layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0px;
}


/* Post */
/* Styling for posts themselves (posts/post-list is a separate from this) */
.post .title {
  margin-top: 0em;
  margin-bottom: 0em;
}

.post .date {
  margin-top: 0em;
  margin-bottom: 0em;
}

.post *:last-child {
  margin-bottom: 0em;
}

.post.banner {
  width: 100%;
  min-height: 160px;
  aspect-ratio: 4;
  object-fit: cover;
}


/* Post List */
/* The post list is the page that lists out all of the posts. */
.posts {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: stretch;
  gap:8px;
}

.posts-entry {
  padding: 0px 0px;
  height: auto;
  width: 100%;
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0px;

  overflow: hidden;
}

/* .posts-entry * {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} */

.posts-entry-title {
  margin-top: 0em;
  margin-bottom: 0em;
}

.posts-entry-date {
  margin-top: 0em;
  margin-bottom: 0em;
}

.posts-entry-description {
  margin-top: 0em;
  margin-bottom: 0em;
}

.posts-entry-banner {
  width: 100%;
  /* aspect-ratio: 10; */
  height: 128px;
  box-shadow: none;
  border-radius: 0;
  object-fit: cover;
}

.posts-entry-details {
  display: initial;
  align-items: initial;
  font-size: initial;
  box-sizing: border-box;

  width: 100%;
  padding: 24px 24px 24px 24px; /* Top Right Bottom Left */
}

@media only screen and (max-width: 1050px) and (min-width: 900px), (max-width: 650px) {
  .posts {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .posts-entry {
    width: 100%;
  }
}


/* Profile Card */
/* The profile card is that business card like thing in the sidebar */
.profile-card {
  border-radius: 16px;
  box-shadow: var(--drop-shadow);
  
  aspect-ratio: var(--profile-card-aspect-ratio);
  width: auto;
  height: auto;
  flex-shrink: 0;

  user-select: none;

  transform-style: preserve-3d;
  perspective: 1250px;

  background-color: var(--profile-card-placeholder-color);

  /* Animation */
  transition: translate 0.1s;
}

.profile-card:hover {
  /* transform: translateY(2px); */
  /* translate: 0px 2px; */
  box-shadow: var(--drop-shadow-hover);
}

.profile-card:active {
  /* transform: translateY(4px); */
  translate: 0px 4px;
  box-shadow: var(--drop-shadow-active);
}

.profile-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.profile-card-front, .profile-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  outline: 1px solid transparent; /* Fixes jagged edges on Firefox */
}

.profile-card-back {
  rotate: y 180deg;
}

/* Flipped & Flipping */
/* 
These are split into separate classes so that the slow transition can be removed
separately from one another. This way it can be flipped, without slow transitions
that would otherwise ruin the tilt effect. 
*/
.profile-card.flipping {
  transition: 0.75s;
}

.profile-card.flipped {
  rotate: y 180deg;
}


/* Navigation ~ Page Buttons */
.navigation {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .nav-button-top { border-radius: 16px 16px 8px 8px; }
.nav-button-mid { border-radius: 8px; }
.nav-button-bot { border-radius: 8px 8px 16px 16px; } */


/* Local Time Widget */
.widget {
  margin-top: auto;
  perspective: 1000px;
  height: 6rem;
  flex-shrink: 0;
}

.widget-inner {
  transition: transform 0.1s;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.widget-front, .widget-back {
  position: absolute;
  padding: 24px 16px;
  margin: auto;

  width: 100%;
  height: 100%;
  box-sizing: border-box;
  
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.widget-front {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;

  user-select: none;
}

.widget-timezone {
  font-size: 1rem; /* 0.875rem -> 14px*/
}

.widget-readout {
  font-size: 2rem;
  font-weight: bold;
}

.widget-ampm {
  font-size: 1.25rem;
  font-weight: bold;
}

.widget-icon {
  font-size: 2.75rem;
}

.widget-back {
  transform: rotateY(180deg);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.widget-settings-icon {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 1.25rem;

  opacity: 0.33;
  mix-blend-mode: overlay;
}


/* Theming Widget */
/* On the reverse side of the local time widget is the theming widget */
/* Here you can select a theme, as well as whether or not it should be tied to my local time. */
.widget-back {
  padding: 0px 12px;
  justify-content: center;
}

.theme-widget-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;

  width: 100%;
  height: 2rem;
  flex-grow: 0;
  flex-shrink: 0;
}

.theme-widget-slider {
  height: 2rem !important;
}

.theme-widget-readout {
  font-size: 1rem;
  width: 4rem;
  user-select: none;
  overflow: hidden;
}

.theme-widget-button {
  width: 50%;
  height: 100%;
  flex-grow: 1;
  
  padding: 0px 8px;
  border-radius: 8px;
  box-sizing: border-box;

  font-size: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-widget-lock {
  flex: 0 0;
  padding: 0px;
  aspect-ratio: 1;
}

.theme-widget-row span {
  font-size: 1.25rem;
}

.widget:hover .widget-inner {
  transform: translateY(2px);
}

.widget:active .widget-inner {
  transform: translateY(4px);
}

.widget-inner.flipping { 
  transition: rotate 0.75s;
}

.widget-inner.flipped { 
  rotate: y 180deg;
}

/* RESPONSIVE LAYOUT STUFF */
/* The code here changes the layout a little for  */

/* WIDE BUT SHORT LAYOUT : 864px WIDE : 53.5rem (~856px) TALL */
@media only screen and (min-width: 864px) and (max-height: 53.5rem) {
  .sidebar {
    width: var(--sidebar-width);
    height: calc(100vh - 64px); /* Full height, excluding margins */
    position: static;
    flex-shrink: 0;
  }

  .content {
    margin-left: 8px;
  }

  .widget {
    margin-top: 0px;
  }
}

/* THIN LAYOUT : 864px WIDE */
@media only screen and (max-width: 864px) {
  body {
    width: auto;
    padding: 0px 16px;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .content {
    margin-left: auto;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;

    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .profile-card {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;

    height: calc(var(--nav-height) + 8px + var(--widget-height));
  }

  .navigation {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .widget {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-top: 0px;
  }
}

/* TABLET LAYOUT : 528px WIDE */
@media only screen and (max-width: 528px) {
  .profile-card {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    height: var(--nav-height);
  }

  .navigation {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .widget {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin-top: 0px;
  }
}