* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: monospace;
    background-color: whitesmoke;
    transition: background-color 0.4s ease;
  }
  
  .container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  
  .sidebar {
    width: 20%;
    background-color: whitesmoke;
    position: relative;
  }
  
  .left {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5em;
  }
  
  .logo {
    position: absolute;
    top: 1em;
    left: 40%;
    transform: translateX(-50%);
    font-size: clamp(1em, 3.5vw, 4em);
    text-decoration: none;
    color: black;
    font-weight: lighter;
    transition: color 0.3s ease, font-weight 0.3s ease;
  }

  .logo:hover {
    color: rgb(62, 126, 245);
    font-weight: lighter;
  }
  
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
  }
  
  .social-links {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
    font-size: clamp(1.0em, 1.5vw, 2.0em);
    /*font-size: 2.0em;*/
    /*margin-right: 5.5em;*/
  }
  
  .social-links a {
    text-decoration: none;
    color: black;
    transition: color 0.3s ease, font-weight 0.3s ease;
  }
  
  .social-links a:hover {
    color: rgb(62, 126, 245);
    font-weight: bold;
  }
  
  .content {
    width: 60%;
    background-color: whitesmoke;
    overflow-y: auto;
    padding: 2em;
    transition: background-color 0.4s ease;
  }
  
  .posts {
    display: flex;
    flex-direction: column;
    gap: 2em;
    font-size: 1.5em;
  }
  
  .post {
    background-color: whitesmoke;
    padding: 1em;
    border-radius: 5px;
  }

  .post p {
    font-size: 1em;
    line-height: 1.3em;
    margin-bottom: 3em;
    font-family: 'Courier New', Courier, monospace;
  }

  .like-wrapper{
    display: flex;
    justify-content: flex-end;
    margin-top: 2em;
    padding-top: 1em;
  }

  .like-button{
    background: none;
    border: none;
    font-size: 0.8em;
    cursor: pointer;
    color: #444;
    display: flex;
    align-items: center;
    gap: 0.5em;
    transition: color 0.3s ease;
  }

  .like-button .heart{
    font-size: 2.2em;
    color: #ccc;
    transition: color 0.3s ease;
  }

  .like-button.liked .heart{
    color: #ccc;
    /*content: '♥';*/
  }

  .like-button.liked label{
    font-weight: bold;
    color: maroon;
  }

  .like-button:hover .heart{
    color: maroon;
  }

  .like-count{
    font-size: 1em;
    color: #999;
  }

  .like-button.liked .like-count{
    color: #999;
    font-weight: bold;
  }

  .post-image{
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: 8px;
    object-fit: cover;
  }

  .post2-image{
    width: 100%;
    max-width: 800px;
    margin: 2em auto;
    display: block;
  }

  /*.hamburger-menu {
    display: none;
    font-size: 2.5em;
    position: fixed;
    top: 1em;
    left: 1em;
    z-index: 2000;
    cursor: pointer;
    background-color: whitesmoke;
    padding: 0.3em 0.5em;
    border-radius: 5px;
  }*/

  .mobile-topbar {
    display: none;
  }

  body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
  }

  .container.dark-mode {
    background-color: #1e1e1e;
  }

  .sidebar.dark-mode {
    background-color: #1e1e1e;
  }

  body.dark-mode .mobile-topbar {
    background-color: #1e1e1e;
  }

  body.dark-mode .site-title {
    color: #e0e0e0;
  }

  .sidebar.dark-mode .social-links a {
    color: #e0e0e0;
  }

  .sidebar.dark-mode .social-links a:hover {
    color: #91b5ff;
  }

  .logo.dark-mode, .site-title.dark-mode {
    color: #e0e0e0;
  }

  body.dark-mode #scrollToTopBtn {
    background-color: #e0e0e0;
    color: #121212;
  }

  body.dark-mode .hamburger-menu {
    color: white;
  }

  .post.dark-mode {
    background-color: #1e1e1e;
  }

  #scrollToTopBtn.dark-mode {
    background-color: #e0e0e0;
    color: #121212;
  }

  body, .content, .sidebar, .post, #scrollToTopBtn .logo, .site-title {
    transition: background-color 0.4s ease, color 0.4s ease;
  }

  .darkmode-toggle {
    all: unset;
    display: inline-block;
    background: none;
    border: none;
    font-size: 1em;
    color: black;
    cursor: pointer;
    margin-left: 1em;
    margin-top: 0.2em;
    transition: color 0.4s ease, transform 0.4s ease;
    user-select: none;
  }

  body.dark-mode .darkmode-toggle {
    color: white;
  }

  .content.dark-mode {
    background-color: #1e1e1e;
  }

  .darkmode-toggle:active {
    transform: scale(0.8);
  }

  @media (max-width: 768px){
    .container{
      flex-direction: column;
      width: 100%;
      height: auto;
      overflow: visible;
      margin-top: 60px;
    }

    .mobile-topbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background-color: whitesmoke;
      padding: 0.7em 1em;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 3000;
      transition: top 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      overflow: hidden;
      height: 3.5em;
    }

    .hamburger-menu {
      display: block;
      font-size: 2em;
      cursor: pointer;
      background: none;
      border: none;
      margin-left: auto;
      line-height: 1;
      padding: 0;
      transition: color 0.4s ease;
      touch-action: manipulation;
    }

    .site-title {
      font-size: 1.5em;
      font-weight: bold;
      margin-right: auto;
      color: black;
      text-decoration: none;
    }

    .site-title:hover {
      color: rgb(62, 126, 245);
      transition: color 0.3s ease, font-weight 0.3s ease;
    }

    .sidebar{
      visibility: hidden;
      opacity: 0;
      height: 0;
      overflow: hidden;
      width: 100%;
      background-color: whitesmoke;
      padding: 2em;
      position: absolute;
      top: 4em;
      left: 0;
      text-align: center;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
      z-index: 1500;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .sidebar.show {
      visibility: visible;
      opacity: 1;
      height: auto;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20%);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }  
    }

    .right{
      justify-content: center;
      align-items: center;
      height: 100px;
    }

    .content{
      width: 100%;
      padding: 2em;
      height: auto;
      overflow-y: visible;
    }

    .social-links{
      position: relative;
      flex-direction: row;
      transform: none;
      bottom: 0;
      left: 0;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1em;
      font-size: clamp(0.5em, 3vw, 1em);
    }

    .social-links a{
      padding: 0.25em 0.5em;
    }

    .logo{
      left: 50%;
      transform: translateX(-50%);
      font-size: clamp(1.5em, 5, 2em);
      top: 1em;
    }

    .like-button{
      font-size: 1em;
    }

    .like-button .heart{
      font-size: 1.4em;
    }

    .post p{
      font-size: 0.7em;
    }

    .post h1{
      font-size: 1.4em;
    }

    .post h2{
      font-size: 1.2em;
    }

    .post h3{
      font-size: 1em;
    }

    #scrollToTopBtn {
      opacity: 0;
      visibility: hidden;
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 5000;
      font-size: 1.5em;
      padding: 0.4em 0.7em;
      background-color: white;
      color: black;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      transition: background-color 0.4s ease, color 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
    
    #scrollToTopBtn.show {
      opacity: 1;
      visibility: visible;
    }
    
    #scrollToTopBtn:hover {
      background-color: #f0f0f0;
    }

}

/* === DARK MODE STYLES FOR ABOUT PAGE (works on all screen sizes) === */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .mobile-topbar,
body.dark-mode .sidebar,
body.dark-mode .content,
body.dark-mode .post {
  background-color: #1e1e1e;
}

body.dark-mode .site-title,
body.dark-mode .logo,
body.dark-mode .social-links a,
body.dark-mode h1,
body.dark-mode p,
body.dark-mode .darkmode-toggle {
  color: #ffffff;
}

body.dark-mode .social-links a:hover {
  color: #91b5ff;
}

.season-link {
  font-size: 1.4em;
  font-weight: bold;
  text-decoration: none;
  color: black;
  transition: color 0.3s ease;
}

.season-link:hover {
  color: rgb(62, 126, 245);
}

body.dark-mode .season-link {
  color: white;
}

body.dark-mode .season-link:hover {
  color: #91b5ff;
}