/* General ASCII Art Styling */
body {
    background-color: #EAEAEA;  /* Off-white background for consistency */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content */
    min-height: 100vh;  /* Ensures full height coverage */
}

/* Ensure ASCII Art Section Expands Fully */
.ascii-background {
    background-color: #EAEAEA;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 80%;  /* Ensures alignment */
    max-width: 900px;
    flex-grow: 1;  /* Allows it to stretch properly */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure ASCII Art Scales Properly */
.ascii-art {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    white-space: pre-wrap;  /* Allows text wrapping */
    overflow-wrap: break-word;
    max-width: 100%;  /* Prevents overflow */
    display: block;
    margin: 0; /* Fixes extra space */
    padding: 0;
    line-height: 1.1; /* Reduces line height to remove extra space */
}

/* ASCII Art Font Variants */
.ascii-bold { font-weight: bold; }
.ascii-light { font-weight: 300; }

/* Dynamic ASCII Colors */
.ascii-offwhite { color: #1B1B1B; } /* Dark text for readability */
.ascii-orange { color: #FFAA00; }  /* Default Orange */
.ascii-green { color: #55FF55; }   /* Bright Green */
.ascii-blue { color: #00AAFF; }    /* Cool Blue */
.ascii-red { color: #FF5555; }     /* Bold Red */
.ascii-purple { color: #AA00FF; }  /* Deep Purple */
.ascii-gray { color: #888888; }    /* Subtle Gray */
.ascii-gold { color: #FFD700; }    /* Bright Gold */
.ascii-white { color: #FFFFFF; }   /* Pure White */

/* Interactive ASCII Links */
.ascii-link, .ascii-menu a {
    color: #1B1B1B; /* Dark text */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease-in-out, text-shadow 0.3s;
}

.ascii-link:hover, .ascii-menu a:hover {
    color: #FFAA00; /* Warm Amber Highlight */
    text-shadow: 0px 0px 8px rgba(255, 170, 0, 0.8);
    text-decoration: underline;
}

/* Override Visited Link Styles */
.ascii-link:visited, .ascii-menu a:visited {
    color: #1B1B1B !important; /* Prevents purple visited links */
}

/* Menu Embedded Inside ASCII */
.ascii-menu {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

/* Footer Styling */
.ascii-footer {
    background-color: #EAEAEA; /* Matching ASCII background */
    color: #1B1B1B; /* Dark text */
    text-align: center;
    padding: 10px 0; /* Reduced padding */
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    border-top: 2px dashed #888; /* Styled divider */
    width: 80%;  /* Matches ASCII Art width */
    max-width: 900px;
    margin-top: auto; /* Ensures it stays at the bottom */
}

/* Footer Links */
.footer-link {
    color: #1B1B1B; /* Dark text */
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
    transition: color 0.3s, text-shadow 0.3s;
}

/* Footer Hover Effect */
.footer-link:hover {
    color: #FFAA00; /* Warm amber highlight */
    text-shadow: 0px 0px 8px rgba(255, 170, 0, 0.8);
    text-decoration: underline;
}

/* Responsive Design Adjustments */
@media (max-width : 1329px ){
    .ascii-background, .ascii-footer {
        width: 95%; /* Ensures it stays within the viewport */
    }
    .ascii-art {
        font-size: 12px;
        padding: 10px;
    }
    .ascii-footer {
        font-size: 12px;
    }
    .footer-link {
        display: block; /* Stacks links on mobile */
        margin: 5px 0;
    }
}

@media (max-width: 768px) {
    .ascii-art {
        font-size: 10px; /* Smaller font for mobile */
        line-height: 1; /* Reduces spacing */
    }
    .ascii-footer {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .ascii-art {
        font-size: 8px; /* Further reduce size on very small screens */
    }
}