styles.css

* {
    box-sizing: border-box;
    margin: 0;
}

/* NAV BAR CSS */
.topbar-responsive {
    background: #2c3840;
    padding: 1rem 1.5rem;
}

.topbar-responsive .topbar-responsive-logo {
    color: #fefefe;
    vertical-align: middle;
}

.topbar-responsive .menu {
    background: #2c3840;
}

.topbar-responsive .menu li:last-of-type {
    margin-right: 0;
}

.topbar-responsive .menu a {
    color: #fefefe;
    transition: color 0.15s ease-in;
}

.topbar-responsive .menu a:hover {
    color: #c6d1d8;
}

@media screen and(max-width: 39.9375em) {
    .topbar-responsive .menu a {
        padding: 0.875rem 0;
    }
}

.topbar-responsive .menu .topbar-responsive-button {
    color: #fefefe;
    border-color: #fefefe;
    border-radius: 5000px;
    transition: color 0.15s ease-in, border-color 0.15s ease-in;
}

.topbar-responsive .menu .topbar-responsive-button:hover {
    color: #c6d1d8;
    border-color: #c6d1d8;
}

@media screen and(max-width: 39.9375em) {
    .topbar-responsive .menu .topbar-responsive-button {
        width: 100%;
        margin: 0.875rem 0;
    }
}

@media screen and(max-width: 39.9375em) {
    .topbar-responsive {
        padding: 0.75rem;
    }
    .topbar-responsive .top-bar-title {
        position: relative;
        width: 100%;
    }
    .topbar-responsive .top-bar-title span {
        position: absolute;
        right: 0;
        border: 1px solid #fefefe;
        border-radius: 5px;
        padding: 0.25rem 0.45rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .topbar-responsive .top-bar-title span .menu-icon {
        margin-bottom: 4px;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@media screen and(max-width: 39.9375em) {
    .topbar-responsive-links {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        width: 100%;
        -webkit-animation: fadeIn 1s ease-in;
        animation: fadeIn 1s ease-in;
    }
}


/* MAIN MOVIE SECTION CSS */
.index-section {
    /* background: url("https://media.comicbook.com/2019/07/disney-box-office-2019-1180825-1280x0.jpeg") 50% no-repeat; */
    background-image: url("assets/images/highdef-cover.jpg");
    background-size: cover;
    height: 75vh;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.index-section .index-section-text {
    color: #fefefe;
    text-shadow: 1px 1px 2px red;
}


.movie-section {
    /* background: url("https://s3-us-west-2.amazonaws.com/flx-editorial-wordpress/wp-content/uploads/2018/03/13153742/RT_300EssentialMovies_700X250.jpg") 50% no-repeat; */
    background-image: url("assets/images/highdef-movies.jpg");
    background-size: cover;
    height: 80vh;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.movie-section .movie-section-text {
    color: #fefefe;
    text-shadow: 1px 1px 2px red;
}


.tv-show {
    /* background: url("https://eskiz.arcbazar.com/wp-content/uploads/2017/08/cover-tv-shows-house-800x423.jpg") 30% no-repeat; */
    background-image: url("assets/images/highdef-tvshows.jpg");

    background-size: cover;
    height: 80vh;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.tv-show .tv-show-text {
    color: #fefefe;
    text-shadow: 1px 1px 2px red;
}

/* FOOTER SECTION CSS */
.translucent-form-overlay {
  max-width: 500px;
  width: 100%;
  background-color: rgba(54, 54, 54, 0.8);
  padding: 20px;
  color: #fefefe;
}

.translucent-form-overlay .columns.row {
  display: block;
}

.translucent-form-overlay h3, .translucent-form-overlay label {
  color: #fefefe;
}

.translucent-form-overlay input, .translucent-form-overlay select {
  color: #8a8a8a;
}

.translucent-form-overlay input::-webkit-input-placeholder {
  color: #8a8a8a;
}

.translucent-form-overlay input:-ms-input-placeholder {
  color: #8a8a8a;
}

.translucent-form-overlay input::placeholder {
  color: #8a8a8a;
}


.movie-site-footer {
    background: #2c3840;
    color: #8aa0ae;
    padding: 2rem 0 0;
}

.movie-site-footer .movie-site-footer-menu-social a {
    color: #fefefe;
}

.movie-site-footer .column-block {
    margin-bottom: 30px;
}

.movie-site-footer > .row {
    margin-bottom: 1rem;
}

@media screen and(max-width: 39.9375em) {
    .movie-site-footer .columns {
        margin-bottom: 2rem;
    }
}

.movie-site-footer-name {
    color: #fefefe;
    margin-bottom: 1rem;
    font-size: 2rem;
    /* text-align: center; */

}

.movie-site-footer-title {
    color: #fefefe;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.movie-site-footer-block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;
}

.movie-site-footer-block .fa {
    font-size: 2rem;
    color: #020304;
}

.movie-site-footer-block p {
    margin-left: 1rem;
    line-height: 1.125rem;
}

.movie-site-footer-bottom {
    background: #020304;
    padding: 1rem 0;
}

.movie-site-footer-bottom p,
.movie-site-footer-bottom .menu {
    margin-bottom: 0;
}

.movie-site-footer-bottom .movie-site-footer-bottom-links {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.movie-site-footer-bottom .movie-site-footer-bottom-links a {
    color: #8aa0ae;
}

@media screen and(max-width: 63.9375em) {
    .movie-site-footer-bottom .movie-site-footer-bottom-links {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media screen and(max-width: 63.9375em) {
    .movie-site-footer-bottom {
        text-align: center;
    }
}

#movies {
    height: 100%;
    color: #272727;
    line-height: 1.8;
    background: linear-gradient(to right, #5b6ad7, #dc6c11);
    background-size: cover;
}

/* display: flex;
width: 100%;
overflow-x: auto;   */


#tvshows {
    /* background-color: rgb(109, 131, 154);
    background-size: cover; */
    height: 100%;
    color: #272727;
    line-height: 1.8;
    background: linear-gradient(to right, #5b6ad7, #dc6c11);
    background-size: cover;
}

img {
    width: 350px;
}

img:hover {
    margin-left: 0 40px;
    transform: scale(1.07);
    cursor: pointer;
}