blog_style.css

/* Banner section */


.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  padding: 10px 30px;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  /* Adjust the height of the banner */
  position: relative;
  /* For positioning child elements */
}

.banner-left {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Add space between the trigram and the time difference */
}

.trigram {
  font-size: 2.5rem;
  font-weight: bold;
  color: green;
  text-shadow: 0 0 10px #00ff00;
  margin-right: 20px;
  text-transform: uppercase;
}

.gray-box {
  background-color: #333;
  padding: 5px 10px;
  /* Reduced padding to fit within the 60px height */
  border-radius: 8px;
  height: 40px;
  /* Fixed height */
  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Vertically center the content */
  gap: 5px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label {
  font-weight: bold;
  font-size: 0.9rem;
  /* Adjusted font size to fit */
}

.switch {
  display: flex;
  gap: 5px;
}

.red,
.green {
  width: 10px;
  /* Adjusted size for dots */
  height: 10px;
  /* Adjusted size for dots */
  border-radius: 50%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.value {
  color: #fffa;
  font-size: 0.9rem;
  /* Adjusted font size for better fit */
}

.banner-right {
  display: flex;
  gap: 20px;
}

.banner-link {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00ff00;
  text-decoration: none;
}

.banner-link:hover {
  text-decoration: underline;
}






/* Forum section */
.forum {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  position: relative;
}

.forum-container {
  width: 640px;
  height: 480px;
  background-image: url('assets/window.png');
  padding: 70px 0px 0px 0px;
  background-size: cover;
  background-position: center;
  position: relative;
  /* This keeps the forum within its container bounds */
  overflow: hidden;
  margin-bottom: 4rem;
  z-index: 1;
  /* Ensures it stays above the background but below other content */
}


/* Forum header (top unused space in the image) */
.forum-header {
  height: 55px;
  width: 100%;
  position: absolute;
  /* Keep it within the forum container */
  top: 0;
}

/* Forum content (scrollable message area) */
.forum-content {
  width: 100%;
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
  font-family: "Tahoma", sans-serif;
  font-size: 14px;
  color: black;
  background-color: white;
  /* Matches Windows 2000 forum look */
  z-index: 2;
  /* Ensures the content stays above the window background */
}

/* Style individual messages */
.message {
  margin-bottom: 1rem;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #f0f0f0;
  border-radius: 5px;
  font-family: "Tahoma", sans-serif;
  font-size: 14px;
}

/* Username and time styles */
.username {
  font-weight: bold;
  color: #000080;
  /* Dark blue for usernames */
  margin: 0;
}

.time {
  font-size: 12px;
  color: #808080;
  /* Gray for time */
  margin: 0;
}

.text {
  margin: 5px 0 0;
  color: #000;
  /* Black for text */
}

/* Custom scrollbar */
.forum-content::-webkit-scrollbar {
  width: 8px;
}

.forum-content::-webkit-scrollbar-thumb {
  background: #00ff00;
  /* Matches Matrix green */
  border-radius: 4px;
}

.forum-content::-webkit-scrollbar-track {
  background: #000;
  /* Matches Matrix black */
}



@keyframes rainbow {
  0% {
    color: red;
  }

  14% {
    color: orange;
  }

  28% {
    color: yellow;
  }

  42% {
    color: green;
  }

  57% {
    color: blue;
  }

  71% {
    color: indigo;
  }

  85% {
    color: violet;
  }

  100% {
    color: red;
  }
}

.rainbow-text {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  /* Classic 2000s font */
  font-size: 3rem;
  text-align: center;
  animation: rainbow 5s linear infinite;
  background-image: url('assets/retro_bg.png');
  /* Optional background image */
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}


/* Blog Page Styles */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-image: url('assets/blog_page_bg_400.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: url('assets/cursor.cur'), auto;
}

.text:hover {
  cursor: url('assets/cursor.cur'), text;
  /* Cursor changes over text */
}

a:hover {
  cursor: url('assets/cursor.cur'), pointer;
  /* Cursor changes over links */
}


.main-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
  /* Space between blog and forum */
}


.blog-container {
  flex: 2;
  /* 2/3 of the space */
  margin-right: 20px;
  /* Space between blog and forum */
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 66%;
  /* Max width to ensure it takes up 2/3 */
}

.blog-container h1 {
  font-size: 2rem;
  text-align: center;
  color: #333;
}

.search-sort-container {
  background-color: #f0f0f0;
  /* Gray background */
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  /* Align search bar and sortbox side by side */
  gap: 20px;
}

.search-bar input {
  width: 300px;
  /* Adjust width as needed */
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.blog-list {
  list-style-type: none;
  padding: 0;
}

.blog-post {
  background-color: #e1e1e1;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  text-align: center;
}

.blog-post a {
  text-decoration: none;
  font-size: 1.2rem;
  color: #0066cc;
}

.blog-post a:hover {
  text-decoration: underline;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.page-btn {
  padding: 5px 15px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.page-btn:hover {
  background-color: #555;
}


/* hidden text class */
.hidden {
  display: none;
}

.sortbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sortbox .label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.sortbox .dselect_container {
  position: relative;
  flex-shrink: 0;
  /* Prevent shrinking */
}

.sortbox .trigger {
  display: inline-block;
  padding: 8px 20px;
  background-color: #1c1c1c;
  color: #fff;
  border: 1px solid #333;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  width: 200px;
  text-align: center;
}

.sortbox .dropcontainer {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background-color: #333;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
}

.sortbox .dropdownhidden {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sortbox .dropdownhidden li {
  padding: 8px 12px;
}

.sortbox .dropdownhidden li a {
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

.sortbox .dropdownhidden li a:hover {
  background-color: #444;
}

.sortbox .dropdownhidden li a.active {
  background-color: #0073e6;
}

.sortbox .dropcontainer.show {
  display: block;
}

.sortbox .sort-direction {
  display: flex;
  align-items: center;
  margin-left: 10px;
  /* Space between the dropdown and button */
}

.sortbox .toggle-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #333;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  justify-content: center;
  margin-right: 10px;
}

.sortbox .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1c1c1c;
}

.sortbox .arrow-down::before {
  content: "↓";
  font-size: 12px;
  color: #333;
}

.sortbox .arrow-up::before {
  content: "↑";
  font-size: 12px;
  color: #333;
}

.sortbox .sort-direction span {
  font-size: 14px;
  color: #333;
}

.sortbox .sort-direction .active-arrow {
  color: #0073e6;
}


/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
    /* Stack blog and forum on top of each other */
  }

  .blog-container {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    /* Add space between blog and forum */
  }

  .forum-container {
    max-width: 100%;
    margin-top: 20px;
    /* Ensure the forum is below the blog */
  }
}