/* --- Base Styles (Mobile First or Desktop First - This is Desktop First) --- */
body {
    margin: 0;
    padding: 0;
    font-family: Courier, 'Courier New', monospace;
    font-size: 1.0rem;
    line-height: 1.33;
    color: rgba(0, 0, 0, 0.85);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jp-title{
    font-size: 0.8rem;
    text-decoration: none;
}

.notes_link {
    font-size: 1.0rem;
    text-decoration: underline;
}

.notes-title{
    font-size: 1.0rem;
    text-decoration: none;
}

.notes-date{
    font-size: 1.0rem;
    text-decoration: none;
}

.page-layout {
    /* Styles for larger screens (default) */
    max-width: 60%;    /* Max width for wider screens */
    margin-left: 0;     /* Left-aligned */
    margin-right: auto;
    padding-top: 3rem;   /* Padding for wider screens */
    padding-bottom: 3rem;
    padding-left: 4%;    /* Left padding for wider screens */
    padding-right: 1rem; /* Add some default right padding too */
}

.pre-ascii {
    color: #000000;
    line-height: 1.2;
    display: block;
    font-family: Courier, 'Courier New', monospace;
    font-size: 0.85rem;
}

.page-content {
    text-align: left;
}

a {
    color: rgba(0, 0, 0, 0.85);
}    


/* --- Responsive Adjustments using Media Queries --- */

/* Medium screens (e.g., tablets, smaller laptops: 992px and below) */
@media (max-width: 992px) {
    .page-layout {
        max-width: 80%; /* Allow slightly more width */
        padding-left: 3%; /* Adjust padding if needed */
        padding-right: 3%;
    }
}


/* Small screens (e.g., large phones, tablets in portrait: 768px and below) */
@media (max-width: 768px) {
    .page-layout {
        max-width: 90%; /* Use more width */
        padding-top: 2rem; /* Reduce top/bottom padding */
        padding-bottom: 2rem;
        padding-left: 1rem;  /* Switch to rem for more consistent padding */
        padding-right: 1rem; /* Add consistent right padding */
    }

    /* Optional: Slightly adjust base font size for better readability */
    /* body {
        font-size: 0.95rem;
       } */
}

/* Extra small screens (e.g., phones: 576px and below) */
@media (max-width: 576px) {
     .page-layout {
        max-width: 95%; /* Almost full width */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 0.8rem; /* Slightly less padding */
        padding-right: 0.8rem;
     }
}

a.active {
  color: #ff0000;
}



/* --- Side Animation --- */

.side-animation {
    position: fixed;
    /* top: 3rem; */       /* Adjust vertical position (matches your .page-layout top padding) */ /* <<< REMOVE OR COMMENT OUT THIS LINE */
    right: 1%;       /* Move closer to the edge */
    width: auto;     /* Width determined by the content */
    padding: 0.5em;    /* Reduce padding around the art */
    font-family: Courier, 'Courier New', monospace; /* Inherit or set monospace */
    font-size: 0.65rem; /* Significantly smaller font size */
    line-height: 1.2;  /* Tighter line spacing */
    z-index: 1;      /* Ensures it sits on top of default static content if needed */
    display: none; /* Keep hidden by default */

    top: 50%; /* Position the top edge at the vertical middle */
    transform: translateY(-50%); /* Shift the element up by half its own height */
}

/* Style the <pre> tag inside (no changes needed) */
.side-animation pre {
    margin: 0;
}

/* Media query to show it (no changes needed) */
@media (min-width: 993px) and ( max-width: 1200px) {
    .side-animation {
        display: block; /* Show the element */
    }
}


@media (min-width: 1201px)  and ( max-width: 1500px) {
    .side-animation {
        display: block; /* Show the element */
        font-size: 0.8rem; /* Significantly smaller font size */
    }
}

@media (min-width: 1501px) {
    .side-animation {
        display: block; /* Show the element */
        font-size: 0.9rem; /* Significantly smaller font size */
    }
}
/* --- End of Side Animation --- */

/* --- Small Animation --- */

.small-animation {
    font-size: 0.7rem;
}

/* Style the <pre> tag inside (no changes needed) */
.small-animation pre {
    margin: 0;
}

@media (max-width: 992px) {
    .small-animation {
        display: block; /* Show the element */
    }
}

@media (min-width: 993px) {
    .small-animation {
        display: none; /* Show the element */
    }
}

/* --- End of Small Animation --- */


video {
    position: fixed;
    /* Position the top-left corner at the center of the viewport */
    top: 50%;
    left: 50%;
    /* Use transform to shift the image back by half its own width and height */

    /* Set the transparency */
    /* opacity: 0.9; means 90% opaque (10% transparent) */
    /* If you literally meant 10% opaque (90% transparent), use opacity: 0.1; */

    /* Optional: Ensure the GIF is above other content if necessary */
    z-index: -10;

     /* Optional: Limit the size if the GIF is very large */
    /* max-width: 80%; */
    /* max-height: 80vh; */
}

@media (max-width: 992px) {
    video {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.04;
    }
}

@media (min-width: 993px) {
    video {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0.04;
    }
}