@font-face {
     font-family: "FreePixel";
     src: url("https://sadhost.neocities.org/fonts/FreePixel.ttf") format("truetype");
 }

 :root {
     --background: rgba(10, 20, 15, 0.9);
     --main-color: #2E8B57;
     --main-color-dk: #1C3B2A;
     --accent-1: #A4D792;
     --accent-2: #66CDAA;
     --content-spacing: 5px;
     --background-img: url(../images/car-back.png);
     --text-color: #E0F2E9;
     --link-color: var(--accent-1);
     --border: 1px solid #1C3B2A;
 }
 body {
     margin: 0;
     background-color: #0d0d0d;
     color: #ffffff;
     font-family: "FreePixel", Arial, sans-serif;
     background-image: var(--background-img);
 }

 .container {
     max-width: auto;
     max-height:auto;
     margin: 2em auto;
     padding: 1em;
     background-color: rgba(26, 26, 26, 0.9); /* more transparent */
     box-shadow: 0 0 10px #FFFFFF;
     animation: flicker-border 0.06s infinite alternate ease-in-out;
 }

 .titlebar {
     font-size: 2.5em;
     text-align: center;
     color: #ffffff;
     text-shadow: 0 0 10px #ffffff;
     border-bottom: 2px solid #ffffff;
     margin-bottom: 1em;
     padding-bottom: 0.5em;
     animation: flicker 0.06s infinite alternate ease-in-out;
 }

 .fullscreen-post {
     display:flex;
     position: fixed;
     top: 0;
     left: 0;
     max-width: auto;
     max-height: auto;
     overflow-y: auto;
     background-color: rgba(13, 13, 13, 0.3); /* solid dark bg */
     padding: 2em;
     z-index: 999;
     display: flex;
     flex-direction: column;
     box-shadow: outset 0 0 30px #ffffff;
 }

.fullscreen-post .post-banner {
    display: block;
     width: 100%;
     max-height: 300px;
     object-fit: cover;
     border-bottom: 2px solid #ff7518;
     box-shadow: 0 0 10px #ff7518;
    z-index:10;
 }


 .fullscreen-post img:not(.post-banner) {
     width: 100%;
     height: auto;
     margin: 0 0 1em;
 }

 .back-btn {
     margin-top: 2em;
     background: transparent;
     border: 1px solid #ffffff;
     color:#ffffff;
     padding: 0.5em 1em;
     font-family: 'Orbitron', sans-serif;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .back-btn:hover {
     background: #ffffff;
     color:#0d0d0d;
 }

 .fullscreen-post ~ .pagination,
.fullscreen-post ~ .footer {
    display: none !important; /* Hide extra UI when fullscreen */
}

.post {
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    margin-bottom: 2.5rem; /* added spacing between posts */
    transition: transform 0.2s ease;
}

.post::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px dashed #ffffff;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    animation: flicker-border 0.06s infinite alternate ease-in-out;
}

.post:hover {
    transform: scale(1.02);
}

.post img {
    width: 160px;
    height: 110px;
    object-fit: contain;
    border: 3px ;
    border-radius: 12px; /* softer corners */
    margin-left: -2.5em; /* image pops out a bit more */
    margin-right: 1.5em;
    transform: translateX(-10px);
    filter: sepia(0.8) saturate(1.4) hue-rotate(-20deg) brightness(1.1) contrast(2);
    z-index: 2;
    position: relative;
    background: none;
}

.post-content {
    flex: 1;
}

.post h2 {
    font-size: 1.4em;
    color: #ffffff;
    margin: 0 0 0.3em;
}

.post p {
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0;
}

.pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

.pagination button {
    background: none;
    border:none;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pagination button:hover {
    color: #0d0d0d;
}

.pagination button.active {
    color: #0d0d0d;
    font-weight: bold;
}



.footer {
    text-align: center;
    margin-top: 3em;
    font-size: 0.85em;
    color: #888;
}

a {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
}
.fullscreen-post {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes flicker {
    0%, 100% {
        color: #ffffff;
        text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #ffffff;
    }
    50% {
        color: #cccccc;
        text-shadow:
        0 0 2px #cccccc,
        0 0 5px #cccccc;
    }
}

@keyframes flicker-border {
    0%, 100% {
        box-shadow:
        0 0 5px #ffffff,
        0 0 10px #ffffff,
        0 0 20px #ffffff;
    }
    50% {
        box-shadow:
        0 0 2px #cccccc,
        0 0 5px #cccccc;
    }
}