/**
 * Fabian Alvarez © 2024 https://fabianalvarez.dev
 * Responsive Terminal CSS
 */

 body {
    background: hsl(0, 0%, 0%);
    color: hsl(120, 100%, 60%);
    text-shadow: 0 0 3px hsl(154, 84%, 70%);
    font-family: monospace;
    font-size: 1rem; /* Relative font size for responsiveness */
    max-width: 90vw; /* Limits width for smaller screens */
    margin: auto;
    padding: 0 1rem; /* Adds padding for small screens */
}


pre {
    margin: 0 auto;
    display: table;
    width: 100%;
}

#glare {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Ensure the effect doesn't cover the text */
    background: radial-gradient(hsl(154, 5%, 15%) 0%, hsl(154, 50%, 5%) 70%);
}

@keyframes lines {
    0%, 50% { background-position: 0 0; }
    51%, 100% { background-position: 0 2px; }
}

#interlaced {
    position: fixed;
    background: repeating-linear-gradient(
        transparent 0px 1px, 
        hsl(154, 0%, 0%, 0.2) 3px 4px
    );
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    animation: lines 0.067s linear infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    30%, 70% { opacity: 1; }
}

.blink {
    animation: blink 0.4s linear infinite;
}

.apod-container {
    max-width: 90vw; /* Adjusts for small screens */
    margin: auto;
    padding: 1rem;
    text-align: center;
    border: 1px solid hsl(154, 84%, 40%);
    background: hsl(154, 50%, 10%);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.apod-container h1 {
    font-size: 1.5em;
    margin-bottom: 0.1em;
    color: hsl(154, 84%, 70%);
    text-shadow: 0 0 5px hsl(154, 84%, 70%);
}

.apod-container img, .apod-container iframe {
    max-width: 100%;
    height: auto; /* Maintains proportions */
    border-radius: 5px;
    margin: 0.5em auto; /* Centers the image */
    display: block; /* Centers image as a block element */
    max-height: 100vh; /* Limits height for small screens */
}

.apod-container p {
    text-align: justify;
    line-height: 1.6;
    color: hsl(154, 84%, 70%);
    text-shadow: 0 0 3px hsl(154, 84%, 70%);
    white-space: pre-wrap; /* Preserves line breaks */
    word-wrap: break-word; /* Prevents overflow of long words */
    overflow-wrap: break-word;
}

/* Media Query for small screens */
@media (max-width: 600px) {
    body {
        font-size: 0.9rem; /* Reduces font size on small screens */
    }

    .apod-container h1 {
        font-size: 1.2em; /* Reduces header size */
    }

    .apod-container {
        padding: 0.75rem;
    }

    .apod-container img {
        max-height: 40vh; /* Reduces image height */
    }
}

/* Media Query for large screens */
@media (min-width: 1200px) {
    body {
        font-size: 1.1rem; /* Increases font size on large screens */
        max-width: 100%; /* Expands max width */
    }

    .apod-container {
        max-width: 100%;
        padding: 1.5rem;
    }

    .apod-container h1 {
        font-size: 1.75em;
    }
}

a {
    color: hsl(120, 100%, 60%);
    animation: blink 1s linear infinite;
}