/* Color Palette */
:root { --primary-color: #8a0909; /* Blue */ --secondary-color: #FFC107; /* Amber */ --background-color: #0c0c0c; /* Dark grey */ --surface-color: #232222; /* Slightly lighter grey */ --on-primary-color: #fff; /* White */ --on-secondary-color: #000; /* Black */ --on-background-color: #fff; /* White */ --on-surface-color: #fff; /* White */ }

/* General Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { font-family: "Cinzel", serif; height: 100%; margin: 0; color: var(--on-background-color); background-color: var(--background-color); }

a { color: var(--primary-color); text-decoration: none; /* Remove default underline */ }

a:hover { text-decoration: underline; /* Add underline on hover */ }

a:visited { color: var(--on-background-color); /* Visited link color */ }

img { width: 100%; height: auto; border-radius: 10px; }

/* Layout Styles */
.layout-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.layout-flow h2, .layout-flow p { margin: 10px 0; }

/* Navigation Styles */
.navbar { background-color: var(--surface-color); color: var(--on-surface-color); padding: 10px 20px; /* Increase padding to create some space */ width: 100%; /* Occupy full width */ box-sizing: border-box; /* Ensure padding is included in the width */ }

.navbar .container { margin: 0 auto; /* Center the container */ display: flex; justify-content: space-between; align-items: center; }

.navbar-brand { font-size: 24px; font-weight: bold; }

.navbar-links ul { list-style: none; margin: 0; padding: 0; }

.navbar-links ul li { display: inline-block; margin-right: 20px; }

.navbar-links ul li:last-child { margin-right: 0; }

.navbar-links ul li a { color: var(--on-surface-color); text-decoration: none; }

.navbar-links ul li a:hover { text-decoration: underline; }

/* Button Styles */
.button { background-color: var(--primary-color); color: var(--on-primary-color); border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }

.button:hover { background-color: var(--secondary-color); }

/* Card Styles */
.card { background-color: var(--surface-color); color: var(--on-surface-color); padding: 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; /* Added margin for spacing */ display: block; margin-left: auto; margin-right: auto; width: 100%; }

/* Cover Block Styles */
.cover-block { position: relative; display: block; width: 100%; margin-bottom: 10px; overflow: hidden; height: 250px; /* Set the height of the container to 50px */ }

.cover-image { position: absolute; top: 50%; /* Position the image center vertically */ left: 50%; /* Position the image center horizontally */ width: 100%; /* Ensure the image occupies full container width */ height: 100%; /* Ensure the image occupies full container height */ object-fit: cover; /* Scale image to cover the container */ transform: translate(-50%, -50%); /* Center the image */ /* Extreme black border effect with strong gradient */ box-shadow: inset 0 0 0 100px black; /* Much thicker black border */ background-image: radial-gradient(circle, black 30%, rgba(0, 0, 0, 0) 100%); /* Strong fading gradient */ }

.cover-block__inner-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1200px; /* Adjust as needed */ text-align: center; color: white; /* Text color */ background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ overflow: hidden; /* Ensure text doesn't overflow */ text-overflow: ellipsis; /* Add ellipsis for overflow */ white-space: normal; /* Allow text to wrap */ }

.cover-block__inner-container:hover { animation: pulse 1.5s ease-in 1 forwards; /* Pulse animation lasts for 0.5s and runs once */ }

@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); } }

/* Featured Post */
.featured-posts-container { display: flex; flex-wrap: wrap; /* Ensure items wrap to the next line */ justify-content: space-between; }

.featured-post { position: relative; flex-basis: calc(50% - 10px); /* Adjust width to fit two items per row with spacing */ margin-bottom: 10px; /* Increase spacing between rows */ margin-right: 10px; /* Add margin-right to create spacing between items */ height: 200px; /* Set the height of the container */ overflow: hidden; /* Ensure the image is cropped */ }

.featured-post img { position: absolute; top: 50%; /* Position the image center vertically */ left: 50%; /* Position the image center horizontally */ width: auto; /* Maintain the aspect ratio of the image */ height: auto; /* Set the image height to its original size */ transform: translate(-50%, -50%); /* Center the image */ }

.overlay-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 1; /* Ensure the overlay is above the image */ }

.featured-post:hover .overlay-container { opacity: 1; }

.overlay-content { text-align: center; color: white; /* Text color */ padding: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Media Queries */
@media (max-width: 600px) { .featured-post { flex-basis: 100%; /* Change to full width on mobile */ margin-right: 0; /* Remove right margin for full-width items */ } }

@media only screen and (max-width: 768px) { /* For mobile phones */ [class*="col-"] { width: 100%; } }

@media only screen and (max-width: 768px) { .container .content .post-content { width: 100%; /* Expand the container to fill the screen */ } }

@media (min-width: 768px) { .content, .container { width: 95%; margin: 0 auto; } }

/* Footer Styles */
.footer { background-color: var(--surface-color); color: var(--on-surface-color); padding: 20px 0; text-align: center; }

.footer p { margin: 0; }

/* Tag List Styles */
.tag-list { list-style: none; padding: 0; }

.tag-list li { margin-bottom: 10px; }

.tag-list li a { color: var(--on-background-color); text-decoration: none; }

.tag-list li a:hover { text-decoration: underline; }

/* Content Styles */
.content { padding: 25px; max-width: 100%; }

.post-content { max-width: fit-content; }

.post-content p { margin-top: 10px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.content h1 { font-size: 24px; margin-bottom: 20px; }

.content p { font-size: 16px; line-height: 1.6; }

.img-center { display: block; margin-left: auto; margin-right: auto; width: 50%; }

/* Blank Block */
.blank-block { height: 150px; position: relative; }

.footer-block { height: 100px; position: relative; }

/* Parallax Styles */
.parallax { position: relative; width: 100%; /* Ensure full-width */ min-height: 100vh; /* Adjust based on the effect you're going for */ background-image: url("/assets/img/background.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; /* This ensures the parallax effect */ z-index: -1; /* Push the parallax image behind content */ }

.parallax img { width: 100%; height: 100%; display: none; /* Hide the <img> since it's now a background */ }

/* Typewriter Effect */
.typewriter p { opacity: 0; animation: fadeIn 1s forwards; }

.typewriter p:nth-child(2) { animation-delay: 1.5s; /* Adjust delay as needed */ }

.typewriter p:nth-child(3) { animation-delay: 3s; /* Adjust delay as needed */ }

.typewriter p:nth-child(4) { animation-delay: 4.5s; /* Adjust delay as needed */ }

.typewriter p:nth-child(5) { animation-delay: 6s; /* Adjust delay as needed */ }

.typewriter p:nth-child(6) { animation-delay: 7.5s; /* Adjust delay as needed */ }

.typewriter p:nth-child(7) { animation-delay: 10s; /* Adjust delay as needed */ }

.typewriter p:nth-child(8) { animation-delay: 12s; /* Adjust delay as needed */ }

.typewriter p:nth-child(9) { animation-delay: 13.0s; /* Adjust delay as needed */ }

/* Typewriter2 Effect */
.typewriter2 p { opacity: 0; animation: fadeIn 1s forwards; }

.typewriter2 p:nth-child(1) { animation-delay: 13s; /* Adjust delay as needed */ }

.typewriter2 p:nth-child(2) { animation-delay: 14s; /* Adjust delay as needed */ }

.typewriter2 p:nth-child(3) { animation-delay: 15.5s; /* Adjust delay as needed */ }

.typewriter2 p:nth-child(4) { animation-delay: 17s; /* Adjust delay as needed */ }

.typewriter2 p:nth-child(5) { animation-delay: 18.5s; /* Adjust delay as needed */ }

.typewriter2 p:nth-child(6) { animation-delay: 20s; /* Adjust delay as needed */ }

.typewriter2 p:nth-child(7) { animation-delay: 21.5s; /* Adjust delay as needed */ }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

.search-article { position: relative; margin-bottom: 50px; }

.search-article label[for="search-input"] { position: relative; top: 10px; left: 11px; }

.search-article input[type="search"] { top: 0; left: 0; border: 0; width: 100%; height: 40px; outline: none; color: #fff; position: absolute; border-radius: 5px; padding: 10px 10px 10px 35px; -webkit-appearance: none; background-color: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.1); }

.search-article input[type="search"]::-webkit-input-placeholder { color: #808080; }

.search-article input[type="search"]::-webkit-search-decoration, .search-article input[type="search"]::-webkit-search-results-decoration { display: none; }

#search-results { text-align: center; }

.archive-tags { height: auto; }

.archive-tags .tag-item { padding: 1px 3px; border-radius: 2px; border: 1px solid rgba(128, 128, 128, 0.1); background-color: rgba(128, 128, 128, 0.1); }

.promoted { color: #fff; text-align: center; margin-bottom: 2rem; position: relative; }

.promoted-image-wrapper { position: relative; width: 100vw; height: 100vh; /* Adjust height as needed */ overflow: hidden; }

.promoted-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; height: auto; width: auto; }

.promoted-content { max-width: 100%; position: relative; }

.promoted-title { font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem; }

.promoted-description { font-size: 1.25rem; margin-bottom: 2rem; line-height: 1.6; }

.promoted-cta { display: inline-block; font-size: 1rem; font-weight: bold; text-transform: uppercase; border-radius: 4px; text-decoration: none; transition: background-color 0.3s, color 0.3s; }

/*# sourceMappingURL=styles.css.map */