@font-face {
    font-family: 'Abaddon';
    src: local('Abaddon Light Regular'), local('AbaddonLight'),
        url('/res/AbaddonLight.woff2') format('woff2'),
        url('/res/AbaddonLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Abaddon';
    src: local('Abaddon Bold Regular'), local('AbaddonBold'),
        url('/res/AbaddonBold.woff2') format('woff2'),
        url('/res/AbaddonBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


* {

    box-sizing: border-box;

}



body {

    background-color: #000000;

    color: #b0b0b0;

    font-family: 'Abaddon', 'MS Gothic', 'Courier New', Courier, monospace;

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

-webkit-font-smoothing: none;       /* Disables AA in WebKit/Blink (Chrome, Safari, Edge) */
    -moz-osx-font-smoothing: unset;     /* Prevents macOS from forcing subpixel smoothing in Firefox */
    font-smooth: never;                 /* Standard-adjacent property for engine compliance */
    text-rendering: optimizeSpeed;      /* Tells the engine to skip geometric precision/smoothing */
}

}



/* Base Layout */

.viewport-container {

    width: 100%;

    max-width: 960px; 

    aspect-ratio: 4 / 3;

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden; /* Locks the outer container height */

}


/* Base Layout Constraints */
.viewport-container {
    width: 100%;
    max-width: 960px; 
    aspect-ratio: 4 / 3;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* CRITICAL: Prevents the container from scaling past 4:3 window boundaries */
}

@media (max-width: 960px) {
    .viewport-container {
        aspect-ratio: auto;
        min-height: 100vh;
        padding: 20px;
    }
}

/* Header & Footer Rules */
.entry-header {
    flex-shrink: 0; /* Prevents title text from being compressed */
    margin-bottom: 20px;
}

.bottom-fields {
    flex-shrink: 0; /* Prevents footer options from being squished or hidden */
    margin-top: 20px;
    font-size: 16px;
    color: rgb(80, 80, 80);
    white-space: pre-wrap;
    user-select: none;
    letter-spacing: 1px;
}

/* Scroll Box Rules */
.main-content {
    width: 100%;
    flex-grow: 1;    /* Forces this element to take up all remaining space */
    min-height: 0;   /* CRITICAL: Allows flexbox inner boxes to collapse and scroll properly */
    overflow-y: auto; /* Activates internal scrolling only when contents overflow */
    padding-right: 15px;
    
    /* Firefox Custom Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: rgb(80, 80, 80) #000000;
}

/* Webkit-specific Terminal Scrollbar UI (Chrome, Safari, Edge) */
.main-content::-webkit-scrollbar {
    width: 6px;
}
.main-content::-webkit-scrollbar-track {
    background: #000000;
}
.main-content::-webkit-scrollbar-thumb {
    background: rgb(80, 80, 80);
}
.main-content::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

@media (max-width: 960px) {

    .viewport-container {

        aspect-ratio: auto;

        min-height: 100vh;

        padding: 20px;

    }

}



/* Scrollable Inner Content */

.main-content {

    width: 100%;

    flex-grow: 1;

    min-height: 0; /* Prevents flexbox overflow bugs */

    overflow-y: auto;

    padding-right: 15px; /* Provides breathing room for the scrollbar */

    

    /* Firefox Scrollbar */

    scrollbar-width: thin;

    scrollbar-color: rgb(80, 80, 80) #000000;

}



/* Webkit (Chrome/Edge/Safari) Scrollbar */

.main-content::-webkit-scrollbar {

    width: 8px;

}

.main-content::-webkit-scrollbar-track {

    background: #000000;

    border-left: 1px solid #333333;

}

.main-content::-webkit-scrollbar-thumb {

    background: rgb(80, 80, 80);

}

.main-content::-webkit-scrollbar-thumb:hover {

    background: #b0b0b0;

}



/* Links */

a {
  color: currentColor;
  text-decoration: none;
}

a:hover {
  color: #fff;
  /* Changed to step-end and increased duration slightly for rendering stability */
  animation: hoverFlicker 60ms step-end infinite;
}

@keyframes hoverFlicker {
  0%, 100% { background-color: #111; }
  50%      { background-color: #222; }
}

/* Index Specific (Typewriter & PHP List) */

#terminal-text {

    font-size: 16px;

    line-height: 1.5;

    white-space: pre-wrap;

    margin: 0;

}



#wait-indicator {

    font-size: 16px;

    margin-top: 4px;

    color: rgb(80, 80, 80);

    visibility: hidden;

    user-select: none;

}



#wait-indicator.visible {

    visibility: visible;

    animation: terminal-blink 1.2s step-end infinite;

}



@keyframes terminal-blink {

    50% { opacity: 0; }

}



#php {

    margin-top: 40px;

    opacity: 0;

    transition: opacity 2.5s ease-in-out;

}



#php.fade-in {

    opacity: 1;

}



#php h1 {

    font-size: 18px;

    font-weight: normal;

    margin: 20px 0 5px 0;

    color: #ffffff;

}



#php hr {

    border: none;

    border-top: 1px solid #333333;

    margin-bottom: 15px;

}



#php ul {

    list-style-type: none;

    padding-left: 0;

    margin: 0;

}



#php li {

    margin-bottom: 10px;

}



#php li a {

    display: flex;

    align-items: flex-start;

    color: #b0b0b0;

    text-decoration: none;

    width: 100%;

}



#php a:hover .entry-title {

    text-decoration: underline;

}



.entry-month { width: 10ch; flex-shrink: 0; }

.entry-day { width: 6ch; flex-shrink: 0; }

.entry-separator { width: 3ch; text-align: left; flex-shrink: 0; }

.entry-title { flex-grow: 1; }



.entry-day sup {

    font-size: 0.7em;

    vertical-align: baseline;

    position: relative;

    top: -0.4em;

    line-height: 0;

}



/* Entry Specific (yy-mm-dd.html) */

.entry-header {

    flex-shrink: 0;

    margin-bottom: 30px;

}



h1#title {

    font-size: 24px;

    color: #ffffff;

    font-weight: normal;

    margin: 0 0 5px 0;

}



.date-subtitle {

    font-size: 16px;

    color: rgb(80, 80, 80);

    font-weight: normal;

    margin: 0;

}



.main-content p {

    font-size: 16px;

    line-height: 1.5;

    margin-bottom: 20px;

}



.media-embed {

    text-align: center;

    margin-bottom: 30px;

}



.media-embed iframe {

    max-width: 100%;

    border: 1px solid #333333;

}



.image-container {

    text-align: center;

    margin: 30px 0;

}



.image-container img {

    max-width: 100%;

    height: auto;

    border: 1px solid #333333;

    display: inline-block;

}



hr.separator {

    border: none;

    border-top: 1px solid #333333;

    margin: 30px 0;

}

.end-symbol {
  text-align: right;
  margin-top: 40px;
  animation: flickerOpacity 1.3s infinite;
}

@keyframes flickerOpacity {
  0%   { opacity: 1; }
  4%   { opacity: 0.25; }
  8%   { opacity: 0.9; }
  13%  { opacity: 0.15; }
  18%  { opacity: 1; }
  23%  { opacity: 0.4; }
  29%  { opacity: 0.95; }
  35%  { opacity: 0.2; }
  41%  { opacity: 1; }
  48%  { opacity: 0.6; }
  55%  { opacity: 0.1; }
  62%  { opacity: 0.85; }
  70%  { opacity: 0.3; }
  78%  { opacity: 1; }
  86%  { opacity: 0.5; }
  93%  { opacity: 0.2; }
  100% { opacity: 1; }
}


/* Shared Footer */

.bottom-fields {

    flex-shrink: 0;

    margin-top: 30px;

    font-size: 16px;

    color: rgb(80, 80, 80);

    white-space: pre-wrap;

    user-select: none;

    letter-spacing: 1px;

}