/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'Albert-Mono';
    src: url("/fonts/aber-mono.woff");
    font-weight: normal;
}

@font-face {
    font-family: 'LunaObscura';
    src: url("/fonts/LunaObscura.woff2");
}

@font-face {
    font-family: 'XYBER';
    src: url("/fonts/XYBER-Regular.woff2");
}

body {
    background-color: #000000;
    font-family: 'Albert-Mono';
}

@page {
    size: 16.54in 11.69in;
    margin: 0.80in
}

.site-wrapper {
    /* Centering site contents */
    margin-left: auto;
    margin-right: auto;

    /* Responsive width logic */
    width: 95%;           /* base width for very small screens */
    max-width: 1200px;    /* hard cap */
    
    width: clamp(90%, 92vw, 1200px); 
}


.main-title {
    font-family: "XYBER", sans-serif;
    color: #ff1616;
    font-weight: bold;
    margin: 0;
    
    /* clamp(MIN, SCALING, MAX) */
    font-size: clamp(2.5rem, 10vw + 1rem, 5.5rem);
    
    /* Ensure the words dont break mid-letter if it still wraps */
    line-height: 1.1;
    word-wrap: break-word;

    display: inline-block;
    position: relative;

    text-shadow:
        0 0 10px  #ff161688,
        0 0 30px #ff161644;

    animation: glow-pulse 4s ease-in-out infinite;
}

.main-title::after {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 200%;
    background: repeating-linear-gradient(
        to bottom,
        transparent          0px,
        transparent          3px,
        rgba(255,22,22,0.75) 3px,
        rgba(255,22,22,0.75) 4px
    );
    mix-blend-mode: overlay;
    animation: scanlines-scroll 50s linear infinite;
    pointer-events: none;
}

@keyframes scanlines-scroll {
    from { transform: translateY(0);      }
    to   { transform: translateY(33.33%); }
}

@keyframes glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 10px  #ff1616bb,
            0 0 30px #ff161688;
    }
    50% {
        text-shadow:
            0 0 16px #ff1616cc,
            0 0 45px #ff1616aa;
    }
}

p {
    background: transparent;
    margin-bottom: 0.1in;
    line-height: 110%;
    color: #daffee;
    background: transparent;
    font-size: 1.6rem;
    word-wrap: break-word;
}

a:link,
a:visited {
    color: #00ffff;
    font-weight: bold;
    text-decoration: underline;
}

a:hover {
    background-color: #42020d;
    color: #00ffb7;
    text-decoration: underline;
}

a.nav-text {
    margin-right: 24px;
    display: inline-block;
    font-size: 1.6rem;
    padding: 16px 16px;
    /* ensures margin behaves predictably */
}

a.nav-here {
    border-style: double;
    border-color: #00ffb7;
    color: #00ffb7;
    border-width: 3px;
    background-color: #42020d;
}

hr {
    border-style: double;
    border-color: #00ffb7;
    border-width: 3px;
}
hr.footer {
    border-width: 1px;
}

div.header {
    border: 3px double #00ffb7;
    height: 20px;
    margin-top: -12px;
    background-color: #42020d;
    color: #00ffff;
    font-weight: regular;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;
    font-size: 16px;
}

div.header #get-formatted-directory,
#get-formatted-directory {
    font-family: 'Albert-Mono';
    vertical-align: middle;
    text-align: left;
    color: #00ffff;
    font-weight: regular;
    padding-left: 8px;
    font-size: 16px;
}