body{
    background-image: url(img/page-back.gif);
    /*background-color: #7f2020;*/
    color: white;

    font-family: "Syne Mono", monospace;
    font-weight: 400;
    font-style: normal;



    #webname{
        color: white; /* Inherits the parent element's text color */
        text-decoration: none; 

        font-size: 50px;
        font-family: "Micro 5", sans-serif;
        font-weight: 400;
        font-style: normal;

        
        position: absolute; /* Keeps it in place even when scrolling */
        top: 20px; /* Adjust this value as needed */
        left: 50%; /* Centers horizontally using 50% */
        transform: translateX(-50%); /* Ensures true center alignment */
        z-index: 1000; /* Ensures it stays above other elements */
        





    }

}

/* Index/Homepage */
.navigation{
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);

    #home {
        position: absolute;
        top: 12px;
        left: 7%;
        cursor: pointer;
        /* Remove width & height from #home */
    }
    
    #home img {
        width: 60px;  /* Apply width to the image */
        height: 25px; /* Apply height to the image */
    }

    #home_text {
        position: absolute;
        top: 40px;
        left: 8.8%;
    }
    

    #home:hover{
        
    }

    #entries{
        position: absolute;
        top: 12px;
        left: 32%;
    }

    #entries img {
        width: 60px;  /* Apply width to the image */
        height: 25px; /* Apply height to the image */
    }

    #entries_text {
        position: absolute;
        top: 60px;
        left: 31.5%;
    }
    

    #letterboxd{
        position: absolute;
        top: 12px;
        left: 57%;
    }

    #letterboxd img{
        width: 60px;  /* Apply width to the image */
        height: 25px; 
    }

    #letterboxd_text {
        position: absolute;
        top: 60px;
        left: 54%;
    }

    #contact{
        position: absolute;
        top: 12px;
        left: 82%;
    }

    #contact img{
        width: 60px;  /* Apply width to the image */
        height: 25px; 
    }

    #contact_text {
        position: absolute;
        top: 60px;
        left: 82%;
    }

    #home, #entries, #letterboxd, #contact{
        transition: box-shadow 0.3 ease;

    }

    #home:hover, #entries:hover, #letterboxd:hover, #contact:hover {
        box-shadow: 0 0 12px 5px rgb(253, 253, 253);
    }



}

.tvmenu{
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
    


    .usb {
        position: absolute;
        top: 680px;
        left: 55%;
        transform: translateX(-50%);
        
        width: 200px;
        height: 60px;
        
        cursor: pointer; /* Makes it clear it's clickable */
    }
    
    .usb_button {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 60px;
    }
    
    .usb_button img {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.01s ease-in-out; /* Smooth transition */
    }
    
    .usb_button img.hover {
        opacity: 0; /* Initially hidden */
    }
    
    .usb_button:hover img.hover {
        opacity: 1; /* Fade in */
    }
    
    .usb_button:hover img.default {
        opacity: 0; /* Fade out */
    }
    

    #screen{
        position: absolute;
        top: 100px;
        left: 10%;
        width: 800px;
        height: 600px;
        z-index: -1; /* Ensures it stays above other elements */

    }
        
}


.about{
    position:absolute;
    background-color: #252be2;
    font-size: large;

    height: 430px;
    width: 450px;
    padding: 20px;

    
    margin-top: 5%;
    margin-left: -0%;
    margin-bottom: 20%;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    #header{
        text-align: center;

    }

   

}

.featured_box{
    background-image: url(img/background_featured.gif) ;

    text-align: center;
    align-items:center;

    position: absolute;
    height: 390px;
    width: 580px;
    margin-top: 5%;
    margin-left: 50%;
    margin-bottom: 20%;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    #featured_video{
        margin-top: 20px;
    }
}


    /* Container that stays in place */
.featured_screen {
    width: 50%;
    height: 350px; /* Adjust height */
    top: 24%;
    left: 16%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    position: fixed; /* Keeps it in place as user scrolls */
    right: 0;
    bottom: 0; /* Or use top: 0 for top-fixed */
    background: transparent;

    #blog1, #blog2, #blog3{
        transition: box-shadow 0.3 ease;

    }

    #blog1:hover, #blog2:hover, #blog3:hover {
        box-shadow: 0 0 10px 5px rgb(253, 253, 253);
    }

   
}
  
      /* Images inside the scroll */
.featured_screen img {
    height: 100%; /* Match the container's height */
    width: auto;  /* Keep aspect ratio */
    margin-right: 35px;
    margin-left: 35px;
    display: inline-block;

    
}


#textbox1{
    background-color: #790202;
    text-align: center;
   
    position: absolute;
    font-size: small;
    top: 71%;
    left: 35%;

    height: 20px;
    width: 120px;
    padding: 20px;
    
    
}

/* This makes sure the main content area expands to fill the page */
.navigation, .tvmenu, .about, .featured_box {
    flex-grow: 1;
}

.lower-bar{
    
    background-color: rgb(54, 54, 54);
    color: white;
    text-align: center;
    font-size: 1.25rem;
    padding: 1rem 0;
    position: absolute; /* Keeps it in place */
    z-index: 1000; /* Ensure it's on top of other content */
    bottom: -20%;
    left: 0;
    width: 100%;
    height: 10%;
    


    #social-text{
        margin: 0; /* Removes extra margin */

        #igicon{
            width: 100px;
            height: 100px;
            cursor: pointer;
        }
    }

    
}







/* Entries */

#entries_about{
    background-color: #790202;
    position: absolute;
    height: 200px;
    width: 450px;

    top: 20%;
    left: 42.5%;
}

.entries{

    position: absolute; /* This makes it the reference point for absolute positioning */
    top: 40%;
    left: 48%;

    #blog_substance{

        position: absolute; /* Positioned relative to .entries */
        left: 37%;
        top: 10%;
        /* You can adjust the size of the element as needed */
        background-color: transparent; /* Example background color */
        padding: 20px;
        height: 200px;
        width: 400px; /* Example width */
    }


}



/* Blog 1: The Substance */

.blog_block{
    position: absolute;
    background-color: #6f1313;
    top: 18%;
    left: 26%;
    height: 80%;
    width: 50%;
    align-items: center;
}

.checked {
    color: orange;
  }

/* Blog 2: ..... */

/* Blog 3: ..... */