:root {
      --main-bg-color: #fbf1c7;
      --main-text-color: #282828;
      --header-bg-color: #bdae93;         /* Light header background */
      --headline-text-color: #1a536e;     /* Darker blue for headlines */
      --block-bg-color: #d3869b;
      --border-block-color: #;      /* Soft gray for block borders */
      --header-footer-text: #1d2021;
      --blog-title-shadow: #ebdbb2;
      --blog-subtitle-shadow: #ebdbb2;
      --padding: 16px;
      --max-width: 600px;
}

body.dark-mode {
     --main-bg-color: #282828;
      --main-text-color: #ebdbb2;
      --header-bg-color: #bdae93;
      --headline-text-color: #83a598;
      --block-bg-color: #d3869b;
      --border-block-color: #;
      --header-footer-text: #1d2021;
      --blog-title-shadow: #ebdbb2;
      --blog-subtitle-shadow: #ebdbb2;
}

    a {
      color: var(--headline-text-color);
      text-decoration: none;
    }

    a:hover {
      color: var(--main-text-color);
      text-decoration: underline;
    }

    a:visited {
      color: var(--headline-text-color);
    }

    a:active {
      color: var(--header-bg-color);
    }

    body {
      display: flex;
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      line-height: 1.6;
      justify-content: center;
    }

    nav {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      font-size: .8em;
      padding: 0px 0px 0px 20px;
      gap: 20px;
    }

    nav a:visited {
      color: var(--headline-text-color);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: 1.5em;
        border: 2px solid var(--headline-text-color);
        border-radius: 5px;
        padding: var(--padding);
        width: 100%;
        max-width: calc(var(--max-width) - 32px);
        box-sizing: border-box;
        transition: border-color 0.3s, background-color 0.3s;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    textarea:focus {
        outline: none;
        border-color: var(--block-bg-color);
        box-shadow: 0 0 5px var(--headline-text-color);
    }

    input[type="text"]::placeholder,
    input[type="email"]::placeholder,
    input[type="password"]::placeholder,
    textarea::placeholder {
        color: var(--headline-text-color); /* Placeholder text color */
        opacity: 0.7;
    }

    input::placeholder,
    textarea::placeholder {
    color: var(--headline-text-color); /* Placeholder color */
    opacity: 0.7; /* Slight transparency for better visibility */
    font-size: 16px; /* Match the input text size */
}

    .container {
      flex: 1;
      max-width: var(--max-width);
      width: 100%;
      padding: var(--padding);
      display: flex;
      flex-direction: column;
    }
    .headline {
      color: var(--main-text-color) !important;
      padding: 16px 10px 5px;
      border-left: 4px solid var(--header-bg-color);
      text-shadow: -.5px .5px 0 var(--block-bg-color);
}
     .timestamp {
      color: var(--headline-text-color);
      text-align: right;
      margin: 0px;
      font-size: .9em;
    }

    #post-edit-delete {
      display: flex;
      flex-direction: row;
      justify-content: right;
      font-size: .8em;

    }

    #post_foot {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin
    }

    header {
      background-color: var(--block-bg-color);
      color: var(--header-footer-text);
      padding: 0px;
      text-align: center;
      text-shadow: -1px 1px 0 var(--blog-subtitle-shadow);
      border-top: 4px solid var(--border-block-color);
      border-left: 4px solid var(--border-block-color);
      border-radius: 15px;
    }

    #blogtitle {
      color: var(--header-footer-text);
      text-shadow: -4px 4px 0 var(--blog-title-shadow);
}

    #blogtitle a {
      color: var(--header-footer-text);
}

    #dark-mode-button-div {
      display: flex;
      justify-content: flex-end;
    }
    #toggle-dark-mode {
      width: 20px;
      height: 20px;
      background-color: var(--main-text-color);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      outline: none;
      transition: background-color 0.3s;
      float: right;
      box-shadow: none;
}

    main {
      padding: var(--padding) 0;
    }

    main p {
      margin: 0 0 var(--padding) 0;
    }

    footer {
      background-color: var(--block-bg-color);
      color: var(--header-footer-text);
      text-align: center;
      padding: var(--padding);
      border-top: 4px solid var(--border-block-color);
      border-left: 4px solid var(--border-block-color);
      border-radius: 15px;
      margin-top: auto;
    }

   button {
      padding: 3px;
      background-color: transparent;
      color: var(--main-text-color);
      border: 2px solid var(--headline-text-color);
      margin: 5px 0px 7px 0px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Smooth transitions */
}

    button:focus {
      outline: none;
      box-shadow: 0 0 5px var(--headline-text-color);
}

button:active {
    transform: scale(0.95);
}
    .logout-btn {
      background-color: transparent;
      color: var(--headline-text-color);
      margin: 0px 0px 3px 0px;
      padding: 0!important;
      border: 0px solid var(--headline-text-color);
      border-radius: 5px;
      cursor: pointer;
    }

    .logout-btn:hover {
      text-decoration: underline;
    }

    .like-btn-all {
      background-color: transparent; /* Makes the background transparent */
      color: var(--main-text-color); /* Keep the text color for visibility */
      border: 2px solid var(--headline-text-color); /* Add a border to define the button */
      margin-bottom: 10px;
      border-radius: 5px; /* Rounded corners for a softer look */
      cursor: pointer; /* Pointer cursor on hover */
      transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Smooth transitions */
}

    .like-btn-all:hover {
      background-color: var(--headline-text-color); /* Change background on hover */
      color: var(--header-bg-color); /* Change text color on hover */
      transform: scale(1.05); /* Slightly scale up for effect */
}

    .like-btn-all:focus {
      outline: none; /* Remove default outline */
      box-shadow: 0 0 5px var(--headline-text-color); /* Shadow effect for focus */
}

.like-btn-all:active {
    transform: scale(0.95); /* Scale down slightly when clicked */
}

.clicked {
  outline: none;
  box-shadow: 0 0 5px var(--headline-text-color);
}
.clicked:hover {
  background-color: transparent;
  color: var(----main-text-color);
  transform: scale(1);
}

.comments-section {
    margin-top: 2rem;
    padding-top: var(--padding);
    border-top: 2px solid var(--headline-text-color);
    border-radius: 5px;
}

.comment {
    margin: 1rem 0;
    padding: var(--padding);
    background-color: var(--block-bg-color);
    border-left: 4px solid var(--border-block-color);
    border-radius: 15px;
    color: var(--header-footer-text);
}

.comment-content {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.comment-meta {
    font-size: 0.9em;
    color: var(--header-footer-text);
    text-align: right;
}

.comments-section h3 {
    color: var(--main-text-color);
    padding: 16px 10px 5px;
    border-left: 4px solid var(--header-bg-color);
    text-shadow: -.5px .5px 0 var(--block-bg-color);
}

.comments-section form {
    margin: var(--padding) 0;
}

.comments-section button[type="submit"] {
    padding: 3px;
    background-color: transparent;
    color: var(--main-text-color);
    border: 2px solid var(--headline-text-color);
    margin: 5px 0px 7px 0px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.comments-section button[type="submit"]:hover {
    background-color: var(--headline-text-color);
    color: var(--header-bg-color);
    transform: scale(1.05);
}

.comments-section button[type="submit"]:active {
    transform: scale(0.95);
}

    /* Responsive Styles */
    @media (max-width: 600px) {
      .container {
        padding: var(--padding);
      }

      main {
        padding-top: 0;
      }
    }