body {
    /* background-color: rgb(255, 255, 255); */
    /*background-image: url(/backgrounds/goldstars.gif); */   
    background-color: rgb(0, 0, 0);
    overflow-x: hidden; /* prevents horizontal scrolling */

 }

.shocked_tomato{
    width: 50px;
    height: 100px;
    margin-left: 30px;
    float: left;
}

.logo{
    width: 1180px;
    height: 110px;
    background-color: black;
    border-color: rgb(255, 200, 0);
    border-width: 12px;
    border-style: dotted;
    color: rgb(0, 255, 115);

    margin: auto;
    margin-top: 5px;

    animation: glowing 2s infinite;

}


@keyframes glowing {
    0% {
        border-color: rgb(255, 200, 0);
    }
    50% {
        border-color: rgb(255, 255, 255);
    }
    100% {
        border-color: rgb(255, 200, 0);
    }
}


.outer_logo{
    width: 1200px;
    height: 140px;
    background-color: rgb(0, 0, 0);
    border-color: black;
    border-width: 9px;
    border-style: solid;
    border-radius: 20px;

    margin: auto;
    margin-top: 5px;

}

.container{
    width: 1300px;
    height: 1300px;
    background-color: rgb(255, 0, 0);
    border-color: black;
    border-width: 12px;
    border-style: solid;
    border-radius: 20px;

    margin: auto;

}

.welcome{
    width: 300px;
    height: 700px;
    border-color: rgb(0, 0, 0);
    border-width: 0px;
    border-style: solid;


    color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: "Courier New", Courier, monospace;

    margin-top: 25px;;
    margin-left: 20px;

    float: left;
}

.main{
    width: 900px;
    height: 1000px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;
    border-radius: 0px;

    color: white;

    background-color: rgba(255, 255, 255, 0.601); 

    margin-top: 20px;
    margin-right: 30px;

    float: right;

    overflow-y: scroll;   /* Forces the scrollbar area to exist */
    overflow-x: hidden;   /* Prevents horizontal shifting */
}
/* 1. The width of the entire scrollbar */
.main::-webkit-scrollbar {
  width: 20px; /* Adjust this to match the width of your blue box */
}

/* 2. The background (the "track") */
.main::-webkit-scrollbar-track {
  background: #000000; /* Your blue color */
  border-left: 2px solid black; /* Optional: adds definition */
}

/* 3. The draggable part (the "thumb") */
.main::-webkit-scrollbar-thumb {
  background: #2bdd07ce; /* Maybe a yellow like your marquee dots? */
  border: 4px solid #000000; /* Creates padding around the thumb */
  border-radius: 10px;
}

/* 4. Hover effect for the thumb */
.main::-webkit-scrollbar-thumb:hover {
  background: #21d705; /* Change color when hovering */
}



.info{
    width: 300px;
    height: 200px;
    border-color: rgb(0, 0, 0);
    border-width: 2px;
    border-style: solid;

    color: white; 

    margin-top: 30px;;
    margin-left: 20px;

    font-size: 20px;
    font-family: "Courier New", Courier, monospace;

    float: left;
}

.bar1{
    width: 900px;
    height: 50px;
    font-size: 30px;
    font-family: "Courier New", Courier, monospace;

    color: rgb(247, 0, 255);
    background-color: rgb(0, 0, 0);
}

.bar2{
    width: 900px;
    height: 50px;
    font-size: 30px;
    font-family: "Courier New", Courier, monospace;

    color: rgb(255, 0, 93);
    background-color: rgb(0, 0, 0);

    margin-top: 60%;
}

.project_hail_mary{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;

    background-image: url(/movie_posters/project_hail_mary.png);
    background-size: cover;
}



#movie_poster:hover{
    filter: brightness(1.2) contrast(1.1);
    cursor: pointer;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.twentyeight_years_later_bone_temple{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;

    background-image: url(movie_posters/28-years_later_bone_temple2.webp);
    background-size: cover;
}
.movie1{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;

    background-image: url(movie_posters/Marty-Supreme-2.jpg);
    background-size: cover;
}
.movie2{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;

    background-image: url(movie_posters/MV5BZGY2NDBjNjYtYWVjNi00OTAwLWE5YzAtN2M3YjkyMzNkYzQ1XkEyXkFqcGdeQWFkcmllY2xh._V1_.jpg);
    background-size: cover;
}
.movie3{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;
    background-image: url(movie_posters/ichithekiller.jpg);
    background-size: cover;
}
.movie4{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;

    background-image: url(movie_posters/August-in-the-Water.jpg);
    background-size: cover;
}
.movie5{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    color: white;

    float: left;
    background-image: url(movie_posters/cronocrimenes.jpg);
    background-size: cover;
}
.movie6{
    width: 430px;
    height: 254px;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
    border-style: solid;

    float: left;
    background-image: url(movie_posters/yiyi.jpg);
    background-size: cover;

}