@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: black;
}

header img {
    height: 50px;
}

section {
    position: relative;
    border-bottom: 8px solid #222222;
}

.jumbotron {
    padding: 140px 60px;
    max-width: 940px;
}

.font-bold {
    font-weight: 600;
}

.background {
    width: 100%;
    height: 100%;
}

.background:before {
    content: '';
    background-image: url(../img/bg-hero.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    opacity: 0.35;
}

.input-wrapper {
    max-width: 600px;
    margin: auto;
}

.input-wrapper input {
    padding: 20px;
}

.input-wrapper input,
.input-wrapper span {
    border: none;
    border-radius: 0;
}

.youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
}

.youtube-wrapper iframe {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.list-movie {
    height: calc(100vh - 98px);
    overflow: auto;
    margin-bottom: 0;
}

.movie-card {
    background: black;
    border-radius: 8px;
}

a {
    text-decoration: none;
}