/* Global Styles */
html {
    height: 100%;
}

body {
    min-height: 100vh; /* Minimum height of the body to cover the viewport */
    margin: 0; /* Remove default margins */
    font-family: Bookman; /* Set font for the entire site */
    background-image: linear-gradient(#020E20, #26595D); /* Background gradient */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: makes background fixed during scroll */
    background-size: cover; /* Ensure the gradient covers the entire area */
    color: white; 
    line-height: 1.6; /* Adjust the line spacing */
}

/* Top Navigation Bar */
.topnav {
    display: flex; /* Use Flexbox */
    flex-wrap: wrap; /* Allow wrapping */
    flex-direction: row;
    justify-content: center; /* Center items */
    width: 100%; /* Full width */
    padding: 10px 0; /* Vertical padding */
}

.topnav a {
    color: #f2f2f2; /* Link color */
    margin: 5px; /* Space between links */
    padding: 8px 16px; /* Padding for links */
    text-decoration: none; /* Remove underline */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Transition for hover effects */
}

.topnav a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Change background on hover */
    color: black; /* Change text color on hover */
}

/* Main Content Area */
.page-content{
    flex: 1; /* Allow this section to grow */
    display: flex; /* Use Flexbox for inner content */
    align-items: stretch; /* Make sure inner items stretch */
    justify-content: center; /* Center content */
    padding: 20px; /* Padding around the content */
    flex-direction: row;
}

/* Flex Container */
.flex-container {
    display: flex; /* Use Flexbox for layout */
    justify-content: space-between; /* Space out the columns */
    align-items: stretch; /* Stretch columns to equal height */
    padding: 20px; /* Padding around the container */
    /* Removed min-height: 100vh; to prevent conflicts */
}

/* Column Styles */
.left-column, .right-column {
    flex: 0 0; /* Allow the columns to grow */
    max-width: 200px; /* Set a maximum width for the columns */
    margin: 10px; /* Space between columns */
    padding: 10px; /* Inner padding for content */
}

/* Center Column */
.center-column {
    flex: 1; /* Allow the center column to take more space */
	max-width: 800px;
    margin: 0px; /* Space around the center column */
    padding: 0px; /* Padding for content */
}

/* Container for Main Content */
.page-content .article {
    display: flex; /* Use Flexbox for main content */
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align content */
}

/* Optional: Style the headings */
h1, h2, h3, h4, h5{
    text-align: center;
}

.post-meta {
	text-align: center;
}

a {
    display: inline-block; /* Allows for padding and margin adjustments */
    border: 2px solid white; /* Border color and width */
    padding: 2px 2px; /* Spacing inside the box */
    margin: 2px; /* Space outside the box */
    text-decoration: none; /* Remove underline */
    color: white; /* Text color */
    border-radius: 5px; /* Optional: rounded corners */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

a:hover {
    background-color: white; /* Change background color on hover */
    color: black; /* Change text color on hover */
}

/* Section Styles */
.section {
    margin: 10px; /* Space between sections */
    padding: 20px; /* Inner padding */
    background-color: rgba(255, 255, 255, 0.9); /* Light background for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Image Styles */
.image3 {
    position: fixed; /* Keep it fixed in the viewport */
    bottom: 0; /* Distance from the bottom */
    right: 0; /* Distance from the right */
    z-index: -1; /* Ensure it stays behind other content */
}

.image3 img {
    width: auto; /* Auto width for the image */
    max-width: 100px; /* Max width to prevent it from being too large */
}

/* Additional Styles */
hr {
    width: 100%; /* Full width for horizontal rule */
}

strong {
    color: powderblue; /* Color for strong text */
}

li {
    color: #FBFAF5; /* List item color */
    text-align: left; /* Align text to the left */
}

div.footnotes {
    text-align: left !important; /* Align text to the left */
}

div.image3 {
    position: fixed; /* Keep it fixed in the viewport */
    bottom: 0; /* Distance from the bottom */
    right: 0; /* Distance from the right */
    z-index: 1; /* Ensure it stays above other content */
}

div.image3 img {
    width: 150px; /* Set the width of the image */
    height: auto; /* Maintain aspect ratio */
    max-width: 1000px; /* Ensure it appears above other content */
}

.flex-footer {
    color: white; /* Text color */
    text-align: center; /* Center align text */
    padding: 10px 0; /* Padding for spacing */
}

img.work1, img.work2 {
	width: 10em; /* FIX LATER */
}
 img.typeset {
    width: 100%; /* Maintain aspect ratio */
    height: 100%; /* Maintain aspect ratio */
    margin: 0 auto; /* Center if necessary, though the container will handle it */
    display: flex; /* Use Flexbox for the container */
    justify-content: center; /* Center images horizontally */
    align-items: center; /* Center images vertically (if applicable) */
    flex-wrap: wrap; /* Allow wrapping if there are multiple images */
    gap: 20px; /* Optional: Add space between images */
}

pre {
    background-color: rgba(30, 30, 30, 0.8); /* Dark background for code block */
    color: #f8f8f2; /* Light text color for readability */
    padding: 10px; /* Padding around the code */
    border-radius: 5px; /* Rounded corners */
    overflow: auto; /* Allow scrolling for overflow */
    white-space: pre-wrap; /* Preserve whitespace and wrap text as needed */
    font-family: monospace; /* Use a monospace font */
    margin: 20px 0; /* Space above and below the pre block */
}

/* If you want to style the code tag specifically */
code {
    color: #ffcc00; /* Optional: Change code text color */
}