mainStyle.css

.body{
    margin: 0;
}

.page-container{
    position: relative;
    overflow: hidden;
}

.searchengine{
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 300px;

}
.searchbar{
    margin-top: 10px;
}


.pic_display{
    position: relative;
    height: 2000px;

}

/*what is wrong with my footer*/
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: grey;
}

.carousel-inner{
    position: relative;
    text-align: center;
    color: white;

}

.searchengine{
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 400px;

}
.searchbar{
    margin-top: 10px;
}

.navbar{
    position: absolute;
    width: 100%;
    height: 50px;
    text-align: center;
    display: inline-block;

}
.nav_01{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

}

.nav_01 a {
    display: inline-block;
    width: 50px;
    paddng: 300px;
    margin-top: 10px;
    margin: 10px;
}

.nav_01 a:hover{
    color: red;

}

.logo_subtitle h1,h5{
    margin: 0;
    color: red;
}

.pic_display{
    position: relative;
    height: 2000px;

}

.head_pic{
    text-align: center;

}


.mostviewed{
    text-align: center;
}

.content-wrap{
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding-bottom: 100px;
}

.carousel-item img{
    width: 100%;
    height: 830px;
}

/*figure and fig caption seems to have issue of not letting us change the width of the column. Without it, you are able to do so*/
.img_container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.img {
    flex-basis: 200%;
    padding:50px
}
.img_text{
    padding: 100px;
}

.displayimg{
    width:100%;
    height: 500px;
}

.figname:hover{
    color: red;

}

.slideshow-container{
    position: relative;
    z-index: -1;
}

.prev, .next{
    cursor:pointer;
    position:absolute;
    top:45%;
    width:auto;
    color: white;
    padding: 16px;
    font-size: 28px;
    border-radius: 0 10px 10px 0;
}

.next{
    right:0;
    border-radius: 10px 0px 0px 10px;
}

.prev:hover,.next:hover{
    background-color: rgba(0,0,0,0.8);
}

/*.searchbar{
    margin: 0 auto;
    display: inline-block;
}*/