#header {
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1000;
}

#headerTitle {
    display: flex;
    align-items: center;
    font-family: 'Merienda One', cursive;
}

#headerTitle img {
    margin-right: 10px;
}

.titleText {
    display: block; /* Makes the text block-level so it respects the <br/> like break */
    text-align: right; /* Aligns the text to the right */
}

#headerSubtitle {
    display: block; /* This will make the subtitle appear on the next line */
    font-size: 20px;
}

#menu {
    max-width: 70%;
    text-align: right;
}

#menu a {
    font-family: 'Lato', sans-serif;
    color: goldenrod;
    font-size: 24px;
    margin-left: 20px; /* Space between menu items */
    text-decoration: none; /* Optional: removes underline from links */
}




@media screen and (max-width: 768px) {
    #header {
        padding: 10px;
        flex-direction: column;
        align-items: start;
    }

    #headerTitle img {
        width: 50px; /* Adjust image size */
    }

    #headerTitle, #menu a {
        font-size: 18px; /* Reduce font size */
    }

    #menu {
        text-align: left;
        margin-top: 10px;
    }
}
@media screen and (max-width: 768px) {
    #headerSubtitle {
        font-size: 16px; /* Adjust subtitle size */
    }
}






body {
    background-color: black;
    margin: 0;
    padding-top: 80px; /* Adjust this value based on the height of your header */
}

#homeFront {
    color: white;
    font-family: 'Merienda One', cursive;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px); /* Adjust this value based on the height of your header */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url('../images/background1.png') no-repeat center center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#homeFront::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

#homeFront img, #homeFront p {
    z-index: 1;
}

#homeMainText {
    font-size: 40px;
    margin-top: -40px;
    margin-bottom: -20px;
}

#homeTagline {
    font-size: 20px;   
    margin-top: 10px;
    margin-bottom: -150px;
}

#footer {
    background-color: black;
    color: white;
    width: 90%;
    padding: 20px;
    font-size: 20px;
    text-align: right;
    font-family: Verdana;
}








#content {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/background1.png') no-repeat center center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#mainLogo {
    display: block;
    margin: 100px auto 20px; /* Top margin of 100px, centered horizontally */
}

.pageHeading {
    text-align: center;
    color: white;
    font-size: 50px;
    margin-bottom: 50px; /* Space below heading */
    font-family: 'Merienda One', cursive;
}

/* Content Box Styles */
.contentBox {
    background-color: rgba(255, 255, 255, 0.8); /* White with opacity */
    border-radius: 15px; /* Rounded edges */
    padding: 20px;
    margin: 20px auto; /* Centered with some margin */
    width: 80%; /* Adjust as needed */
    max-width: 1000px; /* Maximum width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    clear: both;
}

.contentHeading {
    font-family: sans-serif;
    font-size: 30px;
    color: #282c34; /* Dark color for contrast */
    margin-top: 0;
}

.contentBox a {
    color: navy;
    text-decoration: none;
}

.contentBox a:hover {
    color: darkred;
    text-decoration: underline;
}

.contentBox p {
    font-size: 18px;
    font-family: sans-serif;
}

.contentBox img {
    max-width: 100%;
    height: auto;
    float: right;
    margin: 0 0 20px 20px;
}

.inlineImage {
    float: none;
    margin: 10px;
}




/* Additional Styling for Aesthetics */
a {
    color: #61dafb; /* Light blue links for a magical feel */
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    .contentBox img {
        width: 100%;
        float: none;
        display: block;
        margin: 20px auto;
    }
}





.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.video-card {
    flex: 1 1 45%; /* Each video card takes up roughly 45% of the container width */
    margin: 10px;
    background-color: #f9f9f9; /* You can change the background color as needed */
    border-radius: 8px; /* Rounded corners for the card */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    padding: 15px; /* Padding around the content */
}

.video-title {
    font-size: 20px;
    margin-top: 0;
    color: white;
    text-align: center;
    padding: 5px;
    background-color: navy;
    font-family: 'Merienda One', cursive;
}

.video {
    position: relative;
    padding-top: 56.25%; /* Aspect ratio: 16:9 */
    height: 0;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-description {
    font-size: 15px;
    margin-top: 0;
    color: white;
    text-align: left;
    padding: 5px;
    background-color: darkred;
    font-family: Arial;
}

/* Responsive Design: One video per row on smaller screens */
@media (max-width: 768px) {
    .video-card {
        flex-basis: 100%; /* Full width for smaller screens */
    }
}








.socialMediaIcon {
    width: 50px;
    height: 50px;
    margin: 5px;
}

/*
.socialMediaIcons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.socialMediaIcons a {
    margin: 5px;
}
*/

@media screen and (max-width: 600px) {
    .socialMediaIcon {
        width: 30px;
        height: 30px;
        margin: 2px;
    }
}












.enchanted-login {
    max-width: 400px;
    padding: 20px;
    background: #f2f2f8;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    font-family: 'Arial', sans-serif;
}

.enchanted-login .form-group {
    margin-bottom: 15px;
}

.enchanted-login label {
    display: block;
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
}

.enchanted-login input[type="text"],
.enchanted-login input[type="password"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
}

.enchanted-login button {
    width: 100%;
    padding: 10px;
    font-size: 18px;
    background-color: #5a62d6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.enchanted-login button:hover {
    background-color: #484f9a;
}















.article-post-form {
    max-width: 80%; /* Increased width */
    margin: 0 auto;
    padding: 30px; /* More padding for larger form */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    font-family: 'Merienda One', cursive;
}

.article-post-form .form-group {
    margin-bottom: 25px;
}

.article-post-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 20px; /* Larger and bolder font */
    font-weight: bold;
    color: #444;
}

.article-post-form input[type="text"],
.article-post-form input[type="url"],
.article-post-form textarea {
    width: 100%;
    padding: 15px; /* Larger padding for larger text */
    border: 2px solid #ccc; /* Thicker border */
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 18px; /* Bigger text size */
    font-weight: bold;
}

.article-post-form textarea {
    height: 400px; /* More vertical space */
    resize: vertical;
}

.article-post-form input[type="file"] {
    border: none;
}

.article-post-form button {
    width: 100%;
    padding: 15px; /* More padding for a larger button */
    background-color: #6a75d6; /* Slightly lighter shade for better visibility */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px; /* Bigger button text */
    font-weight: bold;
}

.article-post-form button:hover {
    background-color: #5a65b6; /* A darker shade for hover effect */
}

.articleTitleInList {
    font-family: 'Merienda One', cursive;
    color: darkred; 
    font-size: 30px; 
    font-weight: bold;
}

.articleSnippet {
    color: #555555; 
    font-size: 14px;
    font-family: sans-serif;
}

.articleReadMoreLink {
    font-size: 20px;
    font-weight: bold;    
}



.articleBody {
    font-size: 18px;
    font-family: sans-serif;
}

























.magic-video-links-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    background: #f0f0f0; /* Light background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.magic-video-link {
    font-family: 'Merienda One', cursive;
    font-size: 20px;
    display: inline-block;
    margin: 5px 10px;
    padding: 10px 15px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.magic-video-link:hover {
    background: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}















/* Existing styles... */

/* Search Box Styles */
.searchContainer {
    float: left; /* Aligns the search box to the left */
    padding: 10px; /* Adds some space around the search box */
    margin-right: 20px; /* Space between search box and social media icons */
}

#searchInput {
    font-size: 15px;
    font-weight: bold;
    padding: 5px; /* Padding inside the text box */
    border: 2px solid #000; /* Black border for the text box */
    border-radius: 5px; /* Rounded corners for the text box */
}

#searchButton {
    font-size: 15px;
    font-weight: bold;
    padding: 5px 10px; /* Padding inside the button */
    background-color: goldenrod;
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners for the button */
    cursor: pointer; /* Pointer cursor on hover */
}

#searchButton:hover {
    background-color: #45a049; /* Darker green on hover */
}


.searchResultLink {
    display: block; /* Makes the link occupy its own line */
    color: #1a0dab; /* Standard link color */
    font-size: 25px; /* Larger font for visibility */
    font-weight: bold; /* Bold text for emphasis */
    text-decoration: none; /* No underline */
    margin-bottom: -25px; /* Space below the link */
}

.searchResultLink:hover {
    text-decoration: underline; /* Underline on hover for interaction feedback */
}

.searchResultText {
    font-size: 16px; /* Slightly smaller font than the link */
    color: #545454; /* Dark grey for readability */
    line-height: 1.6; /* Spacing between lines */
    margin-bottom: 15px; /* Space below the text */
    padding: 5px 0; /* Padding on top and bottom */
    background-color: #f8f8f8; /* Light background for contrast */
    border-left: 4px solid #1a0dab; /* Blue vertical line for visual distinction */
    padding-left: 10px; /* Space between border and text */
}

hr.searchResultSeparator {
    border: 0; /* Removes default border */
    height: 4px;
    background-image: linear-gradient(to right, #f8f8f8, #1a0dab, #f8f8f8); /* Gradient line for a modern look */
    margin-bottom: 20px; /* Space below the horizontal rule */
}


.highlight {
    background-color: yellow; /* Highlight color */
    font-weight: bold; /* Make the text bold */
}























/* Comment Section Styling */
#commentSection {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px 0;
    width: 60%;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
}

.commentSectionTitle {
    color: #333;
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
}

/* Form Table Styling */
#commentForm table {
    width: 100%;
    border-collapse: collapse;
}

#commentForm td {
    padding: 8px;
}

#commentForm label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 18px;
}

#commentForm input[type="text"],
#commentForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 18px;
}

#commentForm input[type="submit"] {
    background-color: #0056b3;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#commentForm input[type="submit"]:hover {
    background-color: #003d7a;
}

/* Error Messages Styling */
[id$="Error"] {
    font-size: 14px;
}

/* Images Styling */
.veriImg {
    cursor: pointer;
    transition: all 0.3s ease;
}

.veriImg:hover {
    transform: scale(1.1);
}

/* Comments Display Styling */
.w3-container {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.w3-black {
    background-color: #333;
    color: white;
}

.w3-light-grey {
    background-color: #f0f0f0;
    color: #555;
}

.w3-dark-grey {
    background-color: #555;
    color: white;
}

/* Optional: Responsive adjustments */
@media (max-width: 768px) {
    #commentForm input[type="text"],
    #commentForm textarea,
    #commentForm input[type="submit"] {
        width: 100%;
    }
}