styles.css

/*
	Header		--> O cabeçalho.
	Footer		--> O rodapé.
	Container	--> O recepiente.
	Dashboard	--> Painel de controle
	Responsivo	--> Web Design do Mobile. 

	Cor do fundo das páginas, em geral:
*/
body {background-color: black}

/* Parte do Header */
.navbar-brand {position: relative}
.moviews-title {
	color: #8c00bf;
	margin-top: 2px;
	margin-left: -2px;
	font-weight: bold;
	font-size: 26px;
	position: absolute;
}

#logo {width: 60px}
#main-navbar {background-color: #121212}
#search-form {
	margin: 0 auto;
	background-color: #FFF;
	border-radius: 5px;
	width: 40%;
	margin-left: 118px;
}

#search-form .form-control {
	border: none;
	width: 88%;
	box-shadow: none;
}

.navbar-nav {
	justify-content: flex-end;
	width: 100%;
}

.navbar-nav .nav-item .nav-link:hover {color: #999}
.navbar-nav .nav-item .nav-link {
	color: #FFF;
	transition: .5s;
}

.bold {font-weight: bold}
.msg-container {
	background-color: #000;
	padding: 15px;
}

.msg {
	width: 60%;
	margin: 0 auto;
	padding: 10px;
	border: solid 1px #000;
	text-align: center;
}

.msg.error {
	color: #842029;
	background-color: #F8D7DA;
	border-color: #F5C2C7;
}

.msg.success {
	color: #0F5132;
	background-color: #D1E7DD;
	border-color: #BADBCC;
}

/* Parte dos Botões de Idioma */
.container-language {
	width: 125px;
	height: 50px;
	position: absolute;
	background-color: RGBA(0, 0, 0, 0.4);
	z-index: 1;
	top: 90px;
	right: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 3px solid #2C0058;
}

.container-language .unselected {
	opacity: 20%;
	padding: 10%;
	margin-top: 2px;
}
.container-language img {
	width: 55px;
	height: 40px;
	padding: 4px;
	margin-bottom: 6px;
}

/* Parte da Página Principal */
#main-container {
	background-color: #000;
	color: #FFF;
	min-height: 65vh;
	padding: 40px;
}

.section-title {
	font-size: 24px;
	border-left: 4px solid #2C0058;
	padding-left: 12px;
	margin-top: 20px;
}

.section-description {
	color: #CCC;
	font-size: 18px;
}

.movies-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -25px;
}

.movie-card {
	background-color: #1A1A1A;
	width: 18%;
	margin-bottom: 30px;
	margin-left: 1%;
	margin-right: 1%;
}

.movie-card .card-img-top {
	height: 300px;
	width: 100%;
	background-size: cover;
	background-position: center;
}

.card-img {
	height: 300px;
	width: 100%;
	background-size: cover;
	background-position: center;
}

.card-title {height: 3rem}
.card-title a {
	font-size: 16px;
	color: #FFF;
}

/* Parte do Carrossel */
#empty {height: 537px}
#float-left {float: left}
#float-right {float: right}
.fa-design {color: #4b009c}
.fa-design:hover {color: #1a0036}

.carousel-inner > .item {
	display: none;
	position: relative;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
	.carousel-inner > .item {
		-webkit-transition: -webkit-transform .6s ease-in-out;
		-o-transition: -o-transform .6s ease-in-out;
		transition: transform .6s ease-in-out;
	}
	
	.carousel-inner > .item.active.right,
	.carousel-inner > .item.next {
		left: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	
	.carousel-inner > .item.active.left,
	.carousel-inner > .item.prev {
		left: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	
	.carousel-inner > .item.active,
	.carousel-inner > .item.next.left,
	.carousel-inner > .item.prev.right {
		left: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {display: block}
.carousel-inner > .active {left: 0}

.carousel-inner > .next,
.carousel-inner > .prev {
	position: absolute;
	width: 100%;
	top: 0;
}

@media screen and (min-width:768px) {
	.carousel-control .glyphicon-chevron-left,
	.carousel-control .glyphicon-chevron-right,
	.carousel-control .icon-next,
	.carousel-control .icon-prev {
		width: 30px;
		height: 30px;
		margin-top: -10px;
		font-size: 30px;
	}
	.carousel-control .glyphicon-chevron-left,
	.carousel-control .icon-prev {margin-left: -10px}
	
	.carousel-control .glyphicon-chevron-right,
	.carousel-control .icon-next {margin-right: -10px}
	
	.carousel-indicators {bottom: 20px}
	.carousel-caption {
		right: 20%;
		left: 20%;
		padding-bottom: 30px
	}
}

/* Parte de Busca e exibição dos Filmes */
#description {text-align: left; display: block}
.fas.fa-star {color: #8c00bf}
.col-md-12 {margin-bottom: 25px}
.fas.fa-plus {margin-right: 10px}
.rating {color: #CCC}
.rate-btn {
	margin-bottom: 15px;
	background-color: #333;
	border-color: #333;
	font-weight: bold;
	color: #9a47ff;
	width: 100%;
}

.rate-btn:hover {
	background-color: #444;
	border-color: #444;
}

.empty-list {
	margin-top: 20px;
	margin-left: 8px;
	font-size: 19px;
}

#empty-search {margin-left: 25px}
#search-title {font-size: 40px}
#search-result,
.back-link {color: #2C0058}

/* Parte de como fazer um trailer */
#trailer-container h3 {
	justify-content: space-evenly;
	border-bottom: 2px solid #2C0058;
	margin: 0 auto;
	width: 210px;
	padding: 10px;
	text-align: center;
	margin-bottom: 26px;
}

#trailer-container form {
	margin: 0 auto;
	width: 60%;
	padding: 10px;
}

#trailer-container img {
	display: block;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	border-radius: 20px;
}

/* Parte de conexão e Fale Conosco */
#auth-row {justify-content: space-evenly}

#login-container h2,
#register-container h2,
#contact-container h2 {
	text-align: center;
	border-bottom: 2px solid #2C0058;
	width: 210px;
	margin: 0 auto;
	padding: 10px;
}

#login-container form,
#register-container form,
#contact-container form,
#profile-container form {
	max-width: 400px;
	margin: 30px auto;
}

.message {border-radius: 6px}
.profile {min-width: 100%}
.card-btn {
	color: #fff;
	background-color: #2C0058;
	border: 2px solid #2C0058;
	width: 100%;
}

.card-btn:hover {
	background-color: transparent;
	color: #2C0058;
	border-color: #2C0058;
}

/* Parte de Atualização do Perfil */
#profile-image-container,
.profile-image-container {
	width: 150px;
	height: 150px;
	border: 6px solid #2C0058;
	border-radius: 100%;
	background-size: cover;
	background-position: center;
	margin: 15px auto;
}

.page-description {color: #999}
.profile-image-container {
	width: 70px;
	height: 70px;
}

.form-control.disabled {background-color: #BBB}
#change-password-container {margin-top: 30px}

.edit-profile-page .card-btn,
#add-movie-container .card-btn,
#review-form .card-btn,
#edit-movie-form .card-btn {width: auto}

/* Parte do Perfil */
.profile-container {justify-content: center}
.profile-container .profile-image {margin: 20px auto}
.about-title {color: #CCC}

.profile-description {
	max-width: 500px;
	margin: 20px auto;
}

.added-movies-container,
.about-container {padding-top: 20px}
.about-container {
	text-align: center;
	border-bottom: 3px solid rgb(39, 0, 90);
}

.added-movies-container .movies-container {padding: 20px}
.added-movies-container .movie-card {width: 31%}

/* Parte de Atualizar Filmes */
.new-movie-container {
	text-align: center;
	width: 420px;
	margin: 0 auto;
}

#add-movie-form {text-align: left}
.movie-image-container {
	height: 470px;
	min-width: 240px;
	background-position: center;
	background-size: cover;
}

.page-title:after {
	content: "";
	width: 300px;
	border-bottom: 2px solid #2C0058;
	display: block;
	margin: 0 auto;
	padding-top: 7px;
}

/* Página do Filme */
.movie-container {text-align: center}
.movie-details {margin: 25px 0}
.pipe {
	border: 1px solid #333;
	margin: 0 10px;
}

#reviews-title {margin-bottom: 25px}
#review-form-container {
	background-color: RGBA(34, 0, 89, 0.4);
	padding: 20px;
}

#review-form-container select,
#review-form-container textarea {width: 50%}
#reviews-container {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 4px solid #2C0058;
}

.review {
	padding: 20px 0;
	border-bottom: 1px solid #333;
}

.author-details-container {padding-top: 20px}
.author-name a {color: #2C0058}
.comment-title {color: #999}

/* Parte do Dashboard */
#add-movie-container {text-align: right}
#movies-dashboard .table {color: #FFF}
#movies-dashboard .table th {border-top: none;}
#movies-dashboard .table tr {padding: 15px 0}

.table-movie-title {
	color: #FFF;
	font-weight: bold;
	transition: .5s;
}

.table-movie-title:hover {color: #2C0058}
.actions-column {
	max-width: 110px;
	text-align: center;
}

.actions-column form {
	display: inline-block;
}

.edit-btn,
.delete-btn {
	padding: 5px 10px;
	border-radius: 5px;
	margin: 0 5px;
	font-weight: bold;
	transition: .5s;
	border: none;
	height: 32px;
}

.edit-btn i,
.delete-btn i {margin-right: 10px}

.edit-btn {
	background-color: #510df0;
	color: #FFF;
}

.edit-btn:hover {
	background-color: transparent;
	color: #0DCAF0;
	text-decoration: none;
}

.delete-btn {
	background-color: #ce35dc;
	color: #FFF;
}

.delete-btn:hover {
	background-color: transparent;
	color: #DC3545;
	text-decoration: none;
}

/* Parte do Footer */
#footer {
	background-color: #000;
	color: #FFF;
	text-align: center;
	margin: 0;
	padding: 20px;
}

#social-container ul,
#footer-links-container ul {
	list-style-type: none;
	padding: 0;
}

#social-container li,
#footer-links-container li {
	display: inline-block;
	margin: 0 10px;
}

#social-container li:hover {background-color: #333;}
#social-container li {
	height: 40px;
	width: 40px;
	border-radius: 100%;
	transition: .5s;
	line-height: 3;
}

#social-container a,
#footer-links-container a {
	color: #FFF;
	transition: .5s;
}

#social-container li i {font-size: 25px}
#footer-links-container {margin: 30px 0}
.t1 {width: 70%}
.t2 {
	width: 30%;
	margin-left: 10px;
}
.form-trailer {display: flex}

/* Responsivo */
@media(max-width: 450px) {
	#main-container {padding: 20px}
	
	/* Parte da Página Principal */
	#search-form .form-control {width: 85%}
	#search-form {
		width: 100%;
		margin-left: 0;
	}
	
	.section-title {
		font-size: 2.2rem;
		margin-bottom: 1rem;
	}
	
	.movies-container {padding: 0 15px}
	.movie-card {width: 100%}
	.movie-details {
		display: flex;
		flex-direction: column;
	}
	
	.movie-details span {padding-bottom: 8px}
	.pipe {display: none}
	.movie-container iframe {max-width: 100% !important}
	
	#reviews-container {
		padding-left: 0;
		padding-right: 0;
	}
	
	#review-form-container select,
	#review-form-container textarea {width: 100%}
	.msg {width: 100%}
	
	/* Parte dos botões de Idioma */
	.container-language {
		width: 90px;
		height: 40px;
		position: absolute;
		background-color: RGBA(0, 0, 0, 0.4);
		z-index: 1;
		top: 6px;
		right: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 3px solid #2C0058;
	}

	.container-language .selected {opacity: 20%; padding: 10%; margin-top: 2px}
	.container-language img {
		width: 40px;
		height: 30px;
		padding: 4px;
		margin-bottom: 6px;
	}

	/* Parte de Filme */
	.review {padding: 0 15px}
	
	/* Parte do Dashboard */
	#movies-dashboard {padding: 0}
	.actions-column {width: 140px}
	
	.edit-btn {
		display: block;
		margin-bottom: 10px;
	}
	
	/* Parte de Atualização do Filme */
	.movie-image-container {margin-top: 1rem}
	.fas.fa-bars {color: #2C0058}
}