/**
* TABLE OF CONTENTS 
*
* 1.0 - Color
* 
* 2.0 - Content
* 		2.1 - Text
* 		2.2 - Image
* 
* 3.0 - Boxes
* 		3.1 - Paddings
* 		3.2 - Borders
* 		3.3 - Margins
* 		3.4 - Min-height
* 
* 4.0 - Reset 
* 
* 5.0 - Layout Classes
* 		5.1 - Grid
* 		5.2 - Flex
* 
* 6.0 - Components
*  		6.1 - Lists, Table and Form
* 		6.2 - Button
* 		6.3 - Close Button
* 		6.4 - Card
* 		6.5 - Modal
* 
* 7.0 - Parts
* 	7.1 - header.php
* 	7.2 - footer.php
* 	7.3 - Content
* 
* 8.0 - Pages
* 	8.1 - movielist.php
*/


:root {
	/* 1.0 Color */

	--black: #000;
	--white: #ffffff;
	--dark-grey: #303030;
	--medium-grey: #e0e0e0;
	--light-grey: #f5f5f7;
	/* background-color: (card, button, input) */
	--bg-black: var(--black);
	--bg-white: var(--white);
	--bg-dark-grey: var(--dark-grey);
	--bg-medium-grey: var(--medium-grey);
	--bg-light-grey: var(--light-grey);
	/* background-color-opacity */
	--bg-black-opacity-75: rgba(0,0,0,.75);
	/* border-color: */
	--bd-black: var(--black);
	--bd-white: var(--white);
	--bd-dark-grey: var(--dark-grey);
	--bd-medium-grey: var(--medium-grey);
	/* color: */
	--text-seconday: #666;
	--text-black: #000;
	--text-white: #ffffff;
	/* Buttons */
	--btn-primary: var(--black);
	--btn-secondary:var(--light-grey);
	--btn-secondary-hover:var(--medium-grey);
	--btn-secondary-border:var(--bd-dark-grey);
	/* Table */
	--table-border-color:var(--bd-medium-grey);
	/* Form */
	--input-border-color:var(--bd-medium-grey);
	--input-background-color-focus:var(--bg-medium-grey);
	--textarea-background-color-focus:var(--bg-medium-grey);
	/* Modal */
	--modal-background-color: var(--bg-black-opacity-75);
	--modal-content-background-color: var(--bg-white);

	/* 2.0 Content:Text */

	--font-serif: Big Caslon, "Times New Roman", serif;
	--font-sans: Roboto, Arial, sans-serif;
 	/* Responsive font sizes */
 	--h1: calc(1.345rem + 1vw);
	--h2: calc(1.315rem + .4vw);
	--h3: calc(1.295rem + .4vw);
	--h4: calc(1.265rem + .2vw);
	--h5: 1.265rem;
	--h6: 1.125rem;
 	--p: 1rem;
	--text-s: 0.93rem;
	/* Font weight */
	--heavy-weight: 550;
	--medium-weight: 400;
	--light-weight: 100;

	/* 3.0 Boxes */

	--spacer-0: 0;
	--spacer-0-5: 0.5rem;
	--spacer-1: 1rem;
	--spacer-1-5:  1.5rem;
	--spacer-2: 2rem;

	--margin-block-start-0: var(--spacer-0);
	--margin-block-start-0-5: var(--spacer-0-5);
	--margin-block-end-0-5: var(--spacer-0-5);
	--margin-block-start-1: var(--spacer-1);
	--margin-block-end-1: var(--spacer-1);
	--margin-block-start-2: var(--spacer-2);
	--margin-block-end-2: var(--spacer-2);

	--padding-left-1: var(--spacer-1);
	--padding-right-1: var(--spacer-1);
	--padding-top-1: var(--spacer-1);
	--padding-bottom-1: var(--spacer-1);	
}

/* 2.0 Content */

/* 2.1 Text */

/* Reset a text or link’s color with .text-reset, so that it inherits the color from its parent. */
.text-reset {
	color: inherit;
}

.text-align-center {
	text-align: center;
}

/* 2.2 Image */

.personList-image,
.movieList-image {
	display: block;
	width: 100%;
}

.movie-image,
.person-image {
	width: 43%;
}

.movie-image-s,
.person-image-s {
	width: 30%;
}

/* 3.0 - Boxes */

/* 3.1 Paddings */

.padding-left-1 {
	padding-left: var(--padding-left-1);
}

.padding-right-1 {
	padding-right: var(--padding-right-1);
}

.padding-top-1 {
	padding-top: var(--padding-top-1);
}

.padding-bottom-1 {
	padding-bottom: var(--padding-bottom-1);
}

.padding-all-1 {
	padding-left: var(--padding-left-1);
	padding-right: var(--padding-right-1);
	padding-top: var(--padding-top-1);
	padding-bottom: var(--padding-bottom-1);
}


/* 3.2 Borders */

.border-top {
	border-top: 1px solid var(--bd-medium-grey);
}

.border-bottom {
	border-bottom: 1px solid var(--bd-medium-grey);
}

.border-left {
	border-left: 1px solid var(--bd-medium-grey);
}

.border-right {
	border-right: 1px solid var(--bd-medium-grey);
}

.border-all {
	border-left: 1px solid var(--bd-medium-grey);
	border-right: 1px solid var(--bd-medium-grey);
	border-top: 1px solid var(--bd-medium-grey);
	border-bottom: 1px solid var(--bd-medium-grey);
}

.border-left-right {
	border-left: 1px solid var(--bd-medium-grey);
	border-right: 1px solid var(--bd-medium-grey);
}

.border-right-bottom {
	border-right: 1px solid var(--bd-medium-grey);
	border-bottom: 1px solid var(--bd-medium-grey);
}


/* 3.3 Margins */

.margin-block-start-0 {
	margin-block-start: var(--margin-block-start-0);
}

.margin-block-start-0-5 {
	margin-block-start: var(--margin-block-start-0-5);
}
.margin-block-end-0-5 {
	margin-block-end: var(--margin-block-start-0-5);
}


.margin-block-start-1 {
	margin-block-start: var(--margin-block-start-1);
}

.margin-block-end-1 {
	margin-block-end: var(--margin-block-end-1);
}

.margin-left-0-5 {
	margin-left: var(--spacer-0-5);
}

/* 3.4 Min-height */

.min-height {
	min-height: calc(87vh - 3rem);
}

/* 4.0 Reset */

/* Resets box-sizing for all elements */
*, 
*::before, 
*::after {
	box-sizing: border-box;
}

body {
	margin:0;
	font-family: var(--font-sans);
	background-color: var(--bg-light-grey);
	font-size: 17px;
}

h1 {
	font-size: var(--h1);
}

h2 {
	font-size: var(--h2);
}

h3 {
	font-size: var(--h3);
}

h4 {
	font-size: var(--h4);
}

h5 {
	font-size: calc(1.265rem - .2vw);
}
@media (min-width: 768px) {
	h5 {
		font-size: var(--h5);
	}
}

h6 {
	font-size: calc(1.125rem - .4vw);
}
@media (min-width: 768px) {
	h6 {
		font-size: var(--h6);
	}
}

p {
	font-size: var(--p);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--medium-weight);
}

a {
	color: var(--text-black);
	text-decoration: none;
}

body.active {
	/* To prevent the background from scrolling when open the modal */
	overflow-y: hidden;
}

input,
textarea,
select {
	all: unset;
}

/* 5. Layout */

hr {
	border-top: 1px solid var(--bd-medium-grey);
	border-bottom: none;
}

/* Grid classes */

/* Table grid */
.table-grid {
	display: grid;
	grid-template-columns: 30% 20% 20% 30%;
	background-color: var(--bg-white);
}

.table-grid div {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--spacer-1);
}

.table-grid-col-1 {
	grid-column: 1 / span 1 ;
}

.table-grid-col-2 {
	grid-column: 2 / span 2 ;
}

.table-grid-col-last {
	grid-row: 1 / span 4;
	grid-column: 4 / span 4;
}

/* Card grid */

.card-grid {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, 1fr);
	
}
@media (min-width: 768px) {
	.card-grid {
	    grid-template-columns: repeat(auto-fit, minmax(calc( (100% - 1rem)/2), 1fr));
	}
}
@media (min-width: 1024px) {
	.card-grid {
	    grid-template-columns: repeat(auto-fit, minmax(calc( (100% - 3rem)/4), 1fr));
	}
}


/* Flex */

.display-flex {
	display: flex;
}

.align-items-center {
	align-items: center;
}

.justify-content-center {
	justify-content: center;
}

.perfect-center {
	align-items: center;
	justify-content: center;
}

.justify-content-space-between {
	justify-content: space-between;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

.justify-content-space-around {
	justify-content: space-around;
}

.justify-content-space-evenly {
	justify-content: space-evenly;
}

.align-items-stretch {
	align-items: stretch;
}	

.flex-wrap {
	flex-wrap: wrap;
}

.flex-direction-column {
	flex-direction: column;
}

/* 6.0 - Components */

/* 6.1 - Lists, Table & Form */

/* Lists */

.list-style-type-none {
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.nav-list {
	display: inline-block;
	padding-left: var(--spacer-1);
}

/* Form */

.form-control {
	margin: var(--spacer-1) 0;
}

.form-label {
	display: block;
    font-size: var(--p);
    font-weight: var(--heavy-weight);
    margin-bottom: var(--spacer-0-5);
}

.form-input {
	box-sizing: border-box;
	border: 1px solid var(--bd-medium-grey);
	padding: 10px 13px;
	width: 100%;
	font-size: var(--p);
}

input[type="file"] {
	font-size: var(--p);
}

input[type="submit"] {
	border: none;
}

input:focus {
	background-color: var(--input-background-color-focus);
}

textarea:focus {
	background-color: var(--textarea-background-color-focus);
}

/* 6.2 Button */

.btn {
	box-sizing: border-box;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border-radius: 13px;
}

.btn-primary {
	background-color: var(--btn-primary);
	color: var(--text-white);	
	width: 100%;
	padding: 11px;
}

.btn-secondary {
	background-color: var(--btn-secondary);
	color: var(--text-seconday);
	border: 1px solid var(--btn-secondary-border);
	font-size: var(--text-s);
	padding: 7px 13px;
}

.btn-secondary:hover {
	background-color: var(--btn-secondary-hover);
	text-decoration: none;
}

.control-buttons a {
	color: var(--text-black);
}

.control-buttons a:before {
	content: url('../images/icons-left-24.png');
	position: relative;
	top: 6px;
}

/* 6.3 Close Button */

.close {
	display: block;
	border-radius: 50%;
	background-color: white;
	opacity: 0.7;
	height: 40px;
	width: 40px;
	padding: 10px;
}

.close:hover {
	background-color: gray;
	opacity: 0.8;
}

.close-img {
	display: block; 
}

/* 6.4 Card */

.card {
	box-shadow:
		-6px -6px 8px 0 rgba(217,210,200,0.51),
		6px 6px 8px 0 rgba(217,210,200,0.51);
	border:1px solid rgba(255,255,255,0.20);
	background-color: var(--bg-white);
	border-radius: 11px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 6.5 Modal */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background-color);
}

.modal-content {
	position: absolute;
	background-color: var(--modal-content-background-color);
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    padding-top: var(--spacer-1);
    padding-bottom: var(--spacer-1-5);
    border-radius: 11px;
    width: calc(100% - 10vw);
}
@media (min-width: 768px) {
	.modal-content {
	    width: calc(100% - 20vw);
	}
}
@media (min-width: 1024px) {
	.modal-content {
	    width: calc(100% - 60vw);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 var(--spacer-2);
}

.modal-body {
	padding: 0 var(--spacer-2);
}

.modal-title {
	text-align: center;
	margin-block-start: 0;
	margin-block-end: 0;
	font-weight: var(--heavy-weight);
}

.modal.active {
	display: block;
}

/* 7.0 Parts */

/* 7.1 header.php */

.header{		
	min-height: 6.5vh;
	max-height: 6.5vh;
	background-color: var(--bg-dark-grey);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: var(--spacer-1-5);
	padding-right: var(--spacer-1-5);
}
@media (min-width: 768px) {
	.header {
		min-height: 5vh;
		max-height: 5vh;
		padding-left: 4rem;
		padding-right: 4rem;
	}
}
@media (min-width: 1024px) {
	.header {
		padding-left: 11rem;
		padding-right: 11rem;
	}
}

.header-title,
.nav-a {
	font-weight: var(--medium-weight);
	color: var(--text-white);
}

/* 7.2 footer.php */

.footer {
	min-height: 9vh;
	background-color: var(--bg-medium-grey);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 7.3 Content */

.article {
	min-height:86vh;
	margin-top: var(--spacer-1);
	margin-bottom: var(--spacer-1);
	border-radius: 11px;
	margin-left: var(--spacer-1-5);
	margin-right: var(--spacer-1-5);
}
@media (min-width: 768px) {
	.article {
		margin-left: 4rem;
		margin-right:4rem;
	}
}
@media (min-width: 1024px) {
	.article {
		margin-left: 11rem;
		margin-right:11rem;
	}
}

/* 8.0 Pages */

/* 8.1 movielist.php */

.title-wrapper {
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--spacer-1);
}

.title {
	font-weight: var(--heavy-weight);
	margin-block-start: var(--spacer-0-5);
	margin-block-end: var(--spacer-0-5);
}