/* General Styles for Dark Mode */
body {
    font-family: 'Courier New', Courier, monospace; /* Typewriter font */
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark background color */
    color: #E0E0E0; /* Light text color */
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Stack elements vertically */
    justify-content: flex-start; /* Keep the header and content at the top */
    align-items: center; /* Center content horizontally */
    min-height: 100vh; /* Ensure the full height is covered */
    text-align: left; /* Keep text aligned to the left */
}

/* Header Styling */
header {
    background-color: #333; /* Dark header */
    color: white;
    padding: 1rem 0;
    text-align: center;
    width: 100%;
}

/* Navigation styling */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: #E0E0E0; /* Light text for links */
    text-decoration: none;
}

nav ul li a:hover {
    color: #6684dd; /* Change color on hover */
}

/* Section Styling */
section {
    padding: 2rem;
    margin: 2rem 0;
    background-color: #1E1E1E; /* Slightly lighter background for sections */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Light shadow to make sections stand out */
    width: 90%; /* Allow sections to take up most of the screen */
    max-width: 1200px; /* Optional, limits maximum width */
}

/* Text color for headings and footer */
section h2, footer p {
    color: #6684dd; /* Blue text color for headings and footer */
}

/* Links styling */
ul {
    padding-left: 1rem; /* Indent list items */
}

ul li {
    margin-bottom: 1rem; /* Space between links */
}


/* Footer Styling */
footer {
    text-align: center;
    background-color: #333;
    color: #1E1E1E;
    padding: 0.5rem 0; /* Halved the padding */
    position: fixed; /* Fix footer at the bottom */
    width: 100%; /* Fill the entire width of the screen */
    bottom: 0; /* Align footer to the bottom */
    left: 0; /* Align to the left */

/* General Styling for Blog Page */
body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #121212;
    color: #E0E0E0;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
}

#blog-posts {
    width: 80%;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between posts */
}

/* Blog Post Styling */
.blog-post {
    background-color: #1E1E1E;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer; /* Indicate interactivity */
    overflow: hidden;
    transition: all 0.3s ease; /* Smooth expansion */
    max-height: 8rem; /* Default height for the snippet */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-post:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* Highlight on hover */
}

.blog-post .full-content {
    display: none; /* Hidden by default */
    margin-top: 1rem;
    color: #E0E0E0;
}

/* Expanded post styling */
.blog-post.expanded .full-content {
    display: block; /* Show content when expanded */
}

.blog-post.expanded {
    max-height: none; /* Allow full height when expanded */
}



/* Responsive Styles */
@media (max-width: 768px) {
    /* Adjust for mobile view */
    body {
        padding: 0 1rem;
    }

    section {
        width: 100%; /* Ensure sections take up full width on smaller screens */
        margin: 1rem 0; /* Reduce margins for smaller screens */
    }
}

<style>
.video-container {
  width: 50%; /* Halve the container width */
  margin: 0 auto; /* Center the container */
}

.video-container video {
  width: 100%; /* Make the video fill the halved container */
  height: auto; /* Maintain the aspect ratio */
}
</style>
<style>
.emoji {
    width: 10px !important; /* Set a fixed width */
    height: 10px !important; /* Set a fixed height */
    vertical-align: middle; /* Align with text */
    object-fit: contain;
    display: inline-block;
}
</style>

<style
.hidden {
display: none;
}
</style>

<style>
.emoji-wrapper {
    width: 5px;
    height: 5px;
    display: inline-block;
    overflow: hidden;
}
.emoji-wrapper img {
    width: 50%;
    height: 50%;
    object-fit: contain; /* Ensures scaling within the wrapper */
}
</style>