:root {
	/*Colors*/
	--color-black: rgb(0, 0, 0);
	--color-grey: rgb(60, 60, 60);
	--color-dimgrey: rgba(60, 60, 60, .8);
	--color-whitesmoke: rgb(245,245,245);
	/*Decoration images*/
	--image-banner: url(https://res.cloudinary.com/babylizzyevee/image/upload/v1643322980/CV-images/moviebuff_banner_qz9qhh.png) ;
}

html, body {
	scroll-behavior: smooth;
	scroll-padding-top: 5em;
	background: var(--color-whitesmoke);
}
label {
    border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
}
h2, h3, h4, button, input {
	font-family: 'Orbitron', sans-serif;
}
h3 {
	margin: 0;
}
h4 {
	margin: .3em 0 0 0;
}
p {
	font-family: 'Roboto', sans-serif;
	margin: 0;
}
#header--container { grid-area: header; }
#banner { grid-area: banner; }
main { grid-area: main; }
footer { grid-area: footer; }
body {
	display: grid;
	grid-template-areas: 'header' 'banner' 'main' 'footer';
}
#header--container {
	font-family: 'Orbitron', sans-serif;
	background: var(--color-black);
	position: sticky;
	top: 0;
	display: grid;
	grid-template-rows: 1fr 0fr .7fr;
}
.header__logo {
	height: 3em;
	width: 13em;
	margin: auto;
	border: 1px solid var(--color-black);
	background: var(--color-black);
	text-align: center;
	grid-area: 1;
}
.header__logo h1 {
	color: white;
	font-size: 2em;
	margin: .2em 0 .2em 0;
}
.header__logo a {
	text-decoration: none;
}
#header__nav {
	margin: 0;
	padding: .3em 0 .3em 0;
	grid-area: 3;
}
/*If width smaller then 320, STACK EM*/
#searchbar--container {
	display: grid;
	grid-template: 1fr / 2fr 2.5fr 1fr 2fr;
}
#search_btn {
	margin: 0 0 0 1%;
	grid-area: 1 / 3;
}
#search_input {
	margin: 0 1% 0 0;
	grid-area: 1 / 2;
}
#error-container {
	grid-area: 2;
	position: fixed;
	display: none;
	grid-template: 1fr 2fr 1fr / .5fr 2.5fr .5fr;
	height: 100%;
	width: 100%;
	background: var(--color-dimgrey);
}
#error-box {
	background: var(--color-whitesmoke);
	padding: 3%;
	border: .5em solid var(--color-black);
	grid-area: 2 / 2 / 3 / 3;
	text-align: center;
}
#error-welcome {
	margin: 0 0 2% 0;
}
#error-message {
	display: block;
	margin: 0 0 2% 0;
}
#close-err {
	width: 50%;
	height: 1.5em;
}
#banner {
	height: calc(100vh - 4em);
	background: var(--color-black) var(--image-banner) 8.5% 30%/cover no-repeat;
}
main {
	/*grid-area: 3;*/
	background: var(--color-whitesmoke);
	max-width: 40em;
	margin: 0 auto 0 auto;
	display: flow-root;
}
section {
	width: inherit;
}
/*Two parent containers*/
#featuredmovies {
	padding: 0 .5em 0 .5em;
}
#searchresults {
	display: none;
	padding: 0 .5em 0 .5em;
	min-height: calc(100vh - 4em);
}
/*The movies*/
.movie_container {
	display: grid;
	grid-template: 28em / 1fr 1fr;
	grid-gap: 0 .8em;
	padding: 1em 0 1em 0;
}
.poster {
	background: var(--color-grey);
	width: 100%;
	height: 100%;
	object-fit: fill;
	grid-area: 1 / 1;
}
.title {grid-area: title;}
.year {grid-area: year;}
.genre {grid-area: genre;}
.type {grid-area: type;}
.type h4, p {display: inline-block;}
.type h4 {margin-right: .3em;}
.director {
	grid-area: director;
	max-height: 4em;
	overflow-y: scroll;
}
.actors {
	grid-area: actors;
	max-height: 4em;
	overflow-y: scroll;
}
.awards {grid-area: awards;}
.plot {
	grid-area: plot;
	overflow-y: scroll;
}
.info_container_featured {
	grid-area: 1 / 2;
	overflow-y: scroll;
	display: grid;
	grid-template: .3fr .3fr .5fr 4fr / 1fr ;
	grid-template-areas: 'title' 'year' 'awards' 'plot';
}
.info_container_search {
	grid-area: 1 / 2;
	overflow-y: scroll;
	display: grid;
	grid-template: .3fr .3fr .4fr .4fr 1fr 1fr 1fr 3fr / 1fr ;
	grid-template-areas: 'title' 'year' 'genre' 'type' 'director' 'actors' 'awards' 'plot';
}
@media screen and (max-width: 600px) {
	.movie_container {
		display: grid;
		grid-template: 28em 28em / 1fr;
		grid-gap: .8em 0;
		padding: 1em 0 1em 0;
	}
	.poster {
		width: 305px;
		height: 448px;
		margin: auto;
		grid-area: 1 / 1;
	}
	.info_container_featured {
		grid-area: 2 / 1;
	}
	.info_container_search {
		grid-area: 2 / 1;
	}
}
footer {
	height: 7em;
	background: var(--color-black);
}