/* --- Global Styles & Body (Matching the Code Editor page) --- */
:root {
    /* Define a color palette for consistency */
    --color-dark-bg: #1e1e2e;       /* Dark background */
    --color-content-bg: #282a36;    /* Slightly lighter container background (Dracula theme-inspired) */
    --color-light-text: #f8f8f2;    /* Light text */
    --color-accent-blue: #50fa7b;   /* Green accent */
    --color-accent-red: #ff5555;    /* Red accent */
    --color-hyperlink: #bd93f9;     /* Purple for regular links */
    --color-headsup: #ffb86c;       /* Orange for warnings/headsup */
    --color-opening-tag: #50fa7b;   /* Green for opening tags */
    --color-closing-tag: #ff79c6;   /* Pink for closing tags */
    --color-content-text: #ffb86c;  /* Orange for content text */
}

body {
    font-family: 'Consolas', 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-dark-bg);
    color: var(--color-light-text);
    line-height: 1.6;
    padding: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 1.1rem; /* Base font size */
}

/* --- Header Styles (Logo Integration) --- */
.header-with-logo {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #1a1a2e;
    border-radius: 8px;
    margin: 0 0 15px 0;
    padding: 15px 0;
}

.header-logo {
    height: 60px; /* Logo size - Matches Code Editor page */
    width: auto; 
    margin-right: 15px; 
    vertical-align: middle;
    box-shadow: 0 0 10px rgba(189, 147, 249, 0.7); 
    border-radius: 5px; 
}

h1 {
    margin: 0; 
    font-family: 'Impact', 'Arial Narrow Bold', sans-serif;
    color: var(--color-light-text);
    text-shadow: 0 0 10px var(--color-accent-blue), 0 0 20px var(--color-accent-red);
    letter-spacing: 3px;
    font-size: 2.5rem;
}

h3 {
    text-align: center;
    text-decoration: none;
    color: var(--color-hyperlink);
    padding: 10px 0 20px 0;
    font-size: 1.6rem;
}

/* --- Content & Layout --- */
.div1 {
    width: 70%;
    float: left;
    padding: 25px;
    background-color: var(--color-content-bg);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.div2 {
    width: 25%; /* Adjusted width for better layout */
    float: right;
    margin-top: 0; /* Resetting original margin */
    display: flex;
    justify-content: center;
}
.tags {
    max-width: 100%;
    height: auto;
    border: 3px solid var(--color-hyperlink);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(189, 147, 249, 0.5);
    margin-left: 0; /* Removing original margin */
}

/* --- Typography and Syntax Highlighting --- */
.span1 {
    color: var(--color-accent-blue);
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.opening {
    color: var(--color-opening-tag); /* Green */
    font-weight: bold;
}

.closing {
    color: var(--color-closing-tag); /* Pink */
    font-weight: bold;
}

.content {
    color: var(--color-content-text); /* Orange */
    font-weight: bold;
}

/* --- Image Styles --- */
.helloworld, .voidtag {
    max-width: 90%;
    height: auto;
    border: 2px solid var(--color-accent-red);
    border-radius: 5px;
    margin-left: 0;
    display: block;
    margin: 20px 0;
}

/* --- Table Styles --- */
table {
    border: 1px solid var(--color-hyperlink);
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
th, td {
    padding: 12px;
    border: 1px solid var(--color-hyperlink);
    text-align: left;
    font-size: 1rem;
}
th {
    background-color: var(--color-hyperlink);
    color: var(--color-dark-bg);
    font-weight: bold;
}
tr {
    background-color: var(--color-content-bg);
    color: var(--color-light-text);
    transition: background-color 0.3s;
}
tr:hover {
    background-color: #383a48;
}

/* --- Button and Pagination Styles (Matching the Code Editor page) --- */
.btn-default {
    background-color: var(--color-hyperlink);
    border: none;
    padding: 10px 20px;
    margin: 15px 5px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-default:hover {
    background-color: #e6e6fa; 
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.next-page, .previous {
    text-decoration: none;
    font-size: 1.1rem;
    color: var(--color-dark-bg);
    font-weight: bold;
    display: block;
    padding: 0;
}

.goto {
    font-size: 1.3rem;
    margin-top: 40px;
    display: block;
    font-weight: bold;
    border-bottom: 2px solid var(--color-accent-blue);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.pagination-lg {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-link, .pageactive-link {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    border: 1px solid transparent;
}

.page-link {
    background-color: var(--color-dark-bg);
    color: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
}

.page-link:hover {
   background-color: var(--color-accent-blue);
   color: var(--color-dark-bg);
}

.pageactive-link {
    color: var(--color-dark-bg);
    background-color: var(--color-hyperlink);
    border: 1px solid var(--color-hyperlink);
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 768px) {
    .div1, .div2 {
        width: 100%;
        float: none;
    }
    .header-logo {
        height: 45px;
        margin-right: 10px;
    }
    h1 {
        font-size: 1.8rem;
    }
    .tags {
        margin-top: 20px;
    }
}