/* 
=========
universal 
========= 
*/ 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;

}

.space {
    width: 100%;
    height: 50px;
}


/* 
=========
color 
========= 
*/ 

.pink {
    margin: -33x;
    color: #e5ff00;
    background-color: rgba(192, 192, 192, 0.178);
}
.red {
    color:  rgb(212, 5, 5) ;
 }
 .orange {
     color: #FF7F00 ;
 }
 .yellow {
     color: #FFFF00;
  }
 .green {
     color:  #06aa0079;
 }
 .light-blue {
     color: dodgerblue;
 }
 .dark-blue {
     color:  #0d08ff6e ;
 }
 .indigo {
    color: #4B0082;
 }
 .violet {
    color: #4B0082;
 }
 .purple {
     color:  #790069e3 ;
 }
 .gold {
     color: #55553b;
 }
 .silver {
     color:   #666666;
 }
 .white {
     color: #ffffff;
 }
 .black {
     color: black;
 }
/* 1. Shared Flavor: Both boxes get the black background and red border */
.invert, .transition-box {
    background-color: #000000;
    border: solid 3px rgba(131, 0, 0, 0.664);
    margin: 20px auto;
    display: block;
    border-radius: 8px; /* Applying that "softness" we discussed */
}

/* 2. Specific Specs: The Main Box (Top) */
.invert {
    padding: 25px;
    max-width: 750px; /* Full dossier width */
}

/* 3. Specific Specs: The Transition Box (Bottom) */
.transition-box {
    padding: 10px;    /* Tighter spacing */
    max-width: 400px; /* Noticeably smaller/slimmer */
    text-align: center; 
    font-size: 18px;  /* Slightly smaller text for a "footer" feel */
}


 /* 
======
trim
====== 
*/ 

.dashed {
    height: auto;
    border: 3px dashed;
    padding: 10px;
    display: flow-root;
}



.dotted {
    height: auto;
    border: 3px dotted;
    padding: 10px;
    display: flow-root;
}


.solid {
    height: auto;
    border: 3px solid;
    padding: 10px;
    display: flow-root;
}


.double {
    height: auto;
    border: 3px double;
    padding: 10px;
    display: flow-root;
}

    /* width */
    ::-webkit-scrollbar {
        width: 6px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 3px grey; 
        border-radius: 3px;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: dodgerblue; 
        border-radius: 3px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        color: black;
      }

/* 
======
layout
====== 
*/ 

html {
    min-height: 100%;        
}
   
body {
min-height: 100%;
width: 100%;
margin: auto 10px auto 10px;
background-repeat: no-repeat;
background-color: #000000;
background-size: contain;
background-position:center center ;
background-position-y: 50px;
color: #FFFFFF;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 22px;
align-content: center;
} 

.header {
    margin: 0 auto;
    width: 66%; /* Matches your section width */
    height: 150px; /* Adjust this to cover your "Old Fashioned Anarchy" image */
    position: relative;
}

.home-ghost-link {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent; /* Invisible */
    cursor: pointer;
}


.section-1 {
margin-top: 100px;
}

.section-2 {
    margin: 0 auto;
    width: 100%; 
}



footer {
    margin: 1px 2.5%;
    color: rgb(212, 5, 5);
    background-position-y: -35px;
    background-position-x: 25px;
    font-size: 28px;
    background-size: 50%;
    width: 100%;
    }

/* 
==========
typography
========== 
*/

@font-face {
    src: url(font/joesfinslab/JosefinSlab-SemiBold.ttf);
    font-family: jose;
}

h2.section-1-title {
    font-size: 24px;        
    color:rgb(212, 5, 5);
    text-align: center;
    margin-top: 0px;
    border-top: 3px dotted #55553b;
    width: 44%;
}

h3.section-1-sub-title {
color: white;    
font-size: 22px;
width: 44%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
border-bottom: 3px dotted #55553b;
}

.section-1 p, .section-2 p {
    font-size: 22px; /* Matches your body size */
    line-height: 1.4; /* Improves readability */
}
code {
    -webkit-text-stroke: 4px rgb(212, 5, 5);
    margin: auto ;
    font-size: 33px; 
    text-shadow: -4px 2px 3px grey;
    /*
    color:rgb(212, 5, 5);
    margin: 0 0 0px 33% ;
    font-weight: 900;
    font-size: 30px; 
    text-shadow: 1px 1px 2px grey;
    */
}

.typewriter-text {
  font-family: "Courier New", Courier, monospace;
  background-color: black; /* Optional: adds a slight paper-like background */
  padding: 2px 4px;          /* Optional: gives the text some breathing room */
  border-radius: 3px;       /* Optional: softens the edges of the background */
  font-weight: 500;
  line-height: 2;
}

.section-2-title {
    font-size:25px;
    font-weight: 100; 
    margin: 10px 0% 10px 0%;
    width: 100%;
    text-align: center;
    display: block;
}


q {
    font-size: 14px;
    font-family:monospace;
}

.underline {
    text-decoration: underline;
}

.dashed p {
    color: white;
}

.dotted p {
    color: white;
}

.solid p {
    color: white;
}

.double p {
    color: white;
}

.invert p {
    color: rgb(255, 255, 255);
    padding: 5% 10% ;
}

.tr, .tl {
    width: 100%;       /* Forces the span/strong to fill the box width */
    display: block;    /* Allows the text-align to actually work */
    text-align: right; /* Pushes the name to the right side of the box */
    margin-top: 10px;  /* Keeps it away from the quote text */
    float: none;       /* Explicitly kills the old floating behavior */
}



div .sidenav {
    list-style-type: none;
    margin: 0px 0 0px 0;
    padding: 0;
    width: 75px;
    background-color: black;
    position: fixed;  
}

li a {
    display: flex;         /* Enables alignment powers */
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 60px;          /* Match this to your sidebar icon height */
    text-decoration: none;
}

li a.active {
  color: white;
}

.sidenav a:hover:not(.active) {
  background-color: #666666;
  border: dotted 2px dodgerblue;
    
}

.closebtn {
    display: block;
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px; /* This creates the "spot" you want to move everything down to */
    color: white;
}


html {
    scroll-behavior: smooth;
}
    


a .home-button:visited {
    color: white;
}


img.small-scale {
    width: 25%;
    margin: 8px;
}

.clearfix {
    overflow: auto;
  }


ul li a:hover{
    border: double 3px rgb(212, 5, 5);
}

.cube {
    display: block;
    width: 50px;
    height: auto;
    margin: 25px 0 10px -18px; 
} 

.block-head{
    display: block;
    width: 55px;
    padding-top: 5px;
    margin: -2px 0 -2px -20px;
    
}
.tv {
    display: block;
    width: 45px;
    height: auto;
    margin: -18px 0px -4px -15px;
}
.bird-sign {
    display: block;
    width: 45px;
    height: auto;
    padding: 0;
    margin: -8px 0 0px -15px;
}
.bullet {
    display: block;
    margin: 0 0;        /* The classic "auto-center" trick */
    width: 15px;           /* Adjust based on your image size */
    height: auto;
    padding: 0 0 0 0px;        /* Adds a little breathing room top/bottom */
}
.bullhorn {
    display: block;
    width: 25px;
    height: auto;
     padding: 0px 0 00px 0;
    margin: -10px 0 0 -6px;
}
.eye {
    width: 60px;
    height: 55px;
    margin: -8px 0 0px -20px;
   
       
}

.lemon-stand {
    width: 55px;
    height: 45px;
    margin: -12px 0 0 -20px;
   
}
     .border-1::after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 375px;
        padding-bottom: 5px;
        border-top: 3px solid rgb(212, 5, 5);
    }


    .vertical-nav-stack {
    display: flex;
    flex-direction: column; /* This stacks them vertically */
    align-items: center;    /* Centers the stack in the box */
    gap: 8px;              /* Space between links */
    padding: 15px 0;
}

.nav-link {
    font-family: jose, sans-serif;
    color: dodgerblue;
    font-size: 22px;        /* Matches your preferred body font size */
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.2s;
}

.nav-link:hover {
    color: #ffffff;
    text-shadow: 0 0 10px dodgerblue;
    border-left: 3px solid rgb(212, 5, 5); /* Red "indicator" on hover */
    padding-left: 10px;
}





    .page-sub-section {
    width: 200px;
    margin: 19px auto 19px 20%;
    padding: 5px 5px;
    text-indent: 33px;
    border: 4px double white;
    background-color: #666666;
    text-align: left;
    font-weight: 700;
    }

.dossier-box p {
    margin: auto;

}

.dossier-box, .invert {
    display: block;
    width: 90%;       /* This makes them match on small screens */
    max-width: 750px; /* This makes them match on big screens */
    margin: 20px auto;
    padding: 33px;

    
    /* The "Softening" Logic */
    border-radius: 8px;      /* Rounds the corners slightly */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Adds a subtle depth/shadow */
}

/* 2. Specific Skin: Only the unique colors/borders go here */
.invert {
    background-color: #000000;
               /* Increased for breathing room */
    border: solid 3px rgba(131, 0, 0, 0.664); /* Your red "War" border */
}


/* Specific override for the blue definition box */
.dotted.light-blue.right-side {
    display: block;      /* Makes it a full block element */
    margin: 30px auto;   /* Automatically calculates equal space on left/right */
    width: 80%;          /* Gives it a consistent width compared to other blocks */
    text-align: left;    /* Keeps headers like "Basically -" flush left */
    padding: 30px;       /* Adds breathing room around the heavy text */
}

.related-images-container {
    text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee; /* Adds a nice visual break */
}

.image-links {
  display: flex;
  justify-content: center;
  gap: 15px; /* Spaces the links out */
  flex-wrap: wrap; /* Ensures they wrap to the next line on mobile */
}

.image-links a {
  text-decoration: none;
  padding: 8px 12px;
  background-color: none;
  border-radius: 4px;
  color: #333;
  transition: background-color 0.3s;
}

.image-links a:hover {
  background-color: dodgerblue;
}


img.right-i {
    width: 33%;
    margin: 10px;
    float: right;
    clear: right;
    border-left: 3px solid #666666;
    display: flow-root;
}    

img.right-i-small {
    width: 15%;
    margin: 1px;
    float: right;
    clear: right;
}   


    img.left-i {
        width: 33%;
        margin: 10px;
        float: left;
        clear:left;
        border-right: 3px solid #666666;
        display: flow-root;
    }
img.bottom-i {
    width: 66%;
    margin: 5% 50% 5% 50%;
    display: flow-root;
    
}

.center-content {
    text-align: center;
}

/* This makes any section center its text and images */
.center-content {
    text-align: center;
    display: flow-root; 
}

/* A universal class for centered images in these blocks */
.block-img-center {
    display: block;
    margin: 20px auto; /* Centers horizontally and adds vertical breathing room */
    max-width: 60%;    /* Makes sure it doesn't get too huge */
    height: auto;
    float: none !important; /* This overrides your old left-i and right-i floats */
    border: none !important;
}

.dossier-img {
    width: 100%;           /* Allows the image to fill its container */
    max-width: 400px;      /* Limits the "gigantic" feel—adjust this number to your preference */
    height: auto;          /* Strictly maintains the correct aspect ratio */
    display: block;        /* Removes bottom whitespace/gaps */
    margin: 20px auto;     /* Centers the image and adds breathing room top/bottom */
    border: 0; /* Optional: adds a subtle border to match your dossier look */
}

/* Styling for the "Stated as" quotes to make them pop */
.statement-text {
    font-size: 20px;
    margin: 10px auto;
    display: block;
    width: 100%;
}

.quote {
    font-style: italic;
    color: #e5ff00; /* Yellow like your other highlights */
}

/* Constrains the thumbnail/poster image to the video container */
video {
    width: 100%;            /* Fills the width of the .video-wrapper */
    max-width: 750px;       /* Matches your wrapper's max size */
    height: auto;           /* Maintains the correct aspect ratio */
    object-fit: cover;      /* Ensures the high-res image fills the area properly */
    border: 2px solid #666; /* Your 'silver' border logic */
}

/* If you are placing the image as a standalone <img> tag at the top */
.presentation-poster {
    width: 100%;
    max-width:800px;       /* Limits the 'Material Manifestation' of the image */
    height: auto;
    display: block;
    margin: 20px auto;      /* Centers the 'Star' on the page */
    border: 3px double dodgerblue; 
}

/* The container for the object */
.object-card {
    display: block;
    max-width: 750px; /* Slightly slimmer than a full section */
    margin: 30px auto;
    padding: 20px;
    border: 3px double #666666; /* Silver double border looks great here */
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* The name/title of the object */
.object-name {
    font-family: jose, sans-serif;
    color: dodgerblue;
    font-size: 26px;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 1px solid #333;
}

/* The description text */
.object-description {
    color: white;
    font-size: 18px;
    line-height: 1.5;
    text-align: left; /* Keep text left-aligned for readability */
    margin-top: 15px;
    padding: 10px;
}

.content-banner {
    width: 100%;
    max-width: 750px; /* Matches your .invert and .dossier-box width */
    height: auto;     /* Keeps it from looking squashed */
    display: block;
    margin: 20px auto; 
}






    .define {
        width: 80%;
        margin: 0 10% 0 10%;

    }
        .foot-img {
            position: relative;
            width: 150px;
            margin: 0 50%;
            left: -115px;
            padding-top: 0px;
            margin-bottom: -5px;
            }

            @media screen and (max-width : 899px ){
                body {
            background-color: black;
            color:  #5C5C5C;
            margin: 5px 5px
                }
.header {
        width: 100%;       /* Take up the full phone width */
        height: auto;      /* Let the image dictate the height */
        margin-top: 10px;
    }

    .header img {
        width: 90%;        /* Make the banner big and readable */
        display: block;
        margin: 0 auto;    /* Center it */
    }
                .section-1-title {
                    margin-top: 42px;
                    font-size: 18px;
                }
                .section-1-sub-title {
                    font-size: small;
                }

                ul {
                    overflow: hidden;
                    background: #F9F8F6;
                    height: 50px;
                }
                .nav-menu ul li {
                    float: none;
                    text-align: left;
                    width: 50%;
                    margin: 0;
                    height: 25px;
                }
                .nav-menu ul li a {
                    border-bottom:1px rgb(212, 5, 5);
                    display: block;
                    font-size: 12px;
                    margin: 4px;
                    padding: 0 auto;
                    height: 15px;
                }
        
                .section-1 p {
                    text-indent: 15px;
                    color: white;
                    margin: 5px 50px 5px 50px;
                    padding: 5px 5px;
                    font-size: 18px;
                    line-height: 24px;
                    font-family: "Courier New", Courier, monospace;
                    }

                    section.page-section {
                        margin-top: 100px;
                    }

                    .content-banner {
        width: 90%;      /* Gives it a little "breathing room" on the edges */
        max-width: none; /* Allows it to ignore the 750px limit if needed */
        height: auto;
    }
                    
        

            @media screen and (max-width : 599px ){
                body {
            background-color: black;
            color:  #5C5C5C;
            margin: 5px 5px
                }
                .section-1-title {
                    margin-top: 20px;
                    font-size: small;
                }
                .section-1-sub-title {
                    font-size: small;
                }
                
                .section-1 {
                    margin-top: 100px;
                }
         
                

                
        
                
        
                ul {
                    overflow: hidden;
                    background: #F9F8F6;
                    height: 50px;
        
                }
        
                div .sidenav {
                    width: 10%;
                }
                
                .nav-menu ul li {
                    float: none;
                    text-align: left;
                    width: 50%;
                    margin: 0;
                    height: 25px;
                }
                .nav-menu ul li a {
                    border-bottom:1px rgb(212, 5, 5);
                    display: block;
                    font-size: 12px;
                    margin: 4px;
                    padding: 0 auto;
                    height: 15px;
                }
        
.section-1 p, .page-section p {
    text-indent: 15px;
    color: white;
    margin: 15px 5%; /* Use percentages so it scales! 5% on each side is perfect */
    padding: 10px;
    font-size: 16px; /* Slightly larger for readability */
    line-height: 1.5;
    width: auto;     /* Ensure it doesn't fight the margin */
}

                   

    @media screen and (max-width : 400px ){
        body {
    background-color: black;
    color:  #5C5C5C;
    margin: 5px 10px 5px 50px;
        }
        
 


        

        ul {
            overflow: hidden;
            background: #F9F8F6;
            height: 50px;

        }

        div .sidenav {
            width: 25%;
        }
        
        .nav-menu ul li {
            float: none;
            text-align: left;
            width: 50%;
            margin: 0;
            height: 25px;
        }
        .nav-menu ul li a {
            border-bottom:1px rgb(212, 5, 5);
            display: block;
            font-size: 12px;
            margin: 4px;
            padding: 0 auto;
            height: 15px;
        }

        .page-section p {
            text-indent: 15px;
            color: white;
            margin: 5px 25px;
            padding: 5px 15px;
            font-size: 12px;
            line-height: 12px;
            font-family: "Courier New", Courier, monospace;
            }

            section.page-section {
                margin-top: 75px;
            }

            @media screen and (max-width : 274px ){
                body {
            background-color: black;
            color:  #5C5C5C;
            margin: 5px 10px 5px 50px;
                }
                
         
        
        
                
        
                ul {
                    overflow: hidden;
                    background: #F9F8F6;
                    height: 50px;
        
                }
        
                div .sidenav {
                    width: 25%;
                }
                
                .nav-menu ul li {
                    float: none;
                    text-align: left;
                    width: 50%;
                    margin: 0;
                    height: 25px;
                }
                .nav-menu ul li a {
                    border-bottom:1px rgb(212, 5, 5);
                    display: block;
                    font-size: 12px;
                    margin: 4px;
                    padding: 0 auto;
                    height: 15px;
                }
        
                .page-section p {
                    text-indent: 15px;
                    color: white;
                    margin: 5px 25px;
                    padding: 5px 15px;
                    font-size: 12px;
                    line-height: 12px;
                    font-family: "Courier New", Courier, monospace;
                    }
        
                    section.page-section {
                        margin-top: 25px;
                    }
        


            @media screen and (max-width : 250px ){
                body {
            background-color: black;
            color:  #5C5C5C;
            margin: 5px 10px 5px 50px;
                }
                
         
        
        
                
        
                ul {
                    overflow: hidden;
                    background: #F9F8F6;
                    height: 50px;
        
                }
        
                div .sidenav {
                    width: 25%;
                }
                
                .nav-menu ul li {
                    float: none;
                    text-align: left;
                    width: 50%;
                    margin: 0;
                    height: 25px;
                }
                .nav-menu ul li a {
                    border-bottom:1px rgb(212, 5, 5);
                    display: block;
                    font-size: 12px;
                    margin: 4px;
                    padding: 0 auto;
                    height: 15px;
                }
        
                .page-section p {
                    text-indent: 15px;
                    color: white;
                    margin: 5px 25px;
                    padding: 5px 15px;
                    font-size: 12px;
                    line-height: 12px;
                    font-family: "Courier New", Courier, monospace;
                    }
        
                    section.page-section {
                        margin-top: 25px;
                    }