:root {
	--background: #0f305c;
	--textColour: white;

	--theme-100: white;
	--theme-200: #d9dce0;
	--theme-300: rgb(132, 173, 228);

	--theme-900: #0d2646;
	--theme-1000: black;

	color: var(--textColour);

	/* margin: 0; */
}

body {
	width: 100%;
	height: 100%;
	/* max-height: 100dvh; */
	/* overflow: hidden; */
}

* {
    margin: 0;
	padding: 0;
}

header {
	background-color:palevioletred;
}

footer {
	background-color: var(--background);
	padding: 2%;
	text-align: center;
}

/* section.movieCard {

}

main.movieList > section.movieCard {

} */


header {
	display: flex;
	justify-content: space-between;
}


main.movieList {
	margin: 1%;
	display: flex;
	gap: 0.2dvw;
	flex-wrap: wrap;
	justify-content: space-evenly;

	section.movieCard {
		background-color: var(--theme-900);
		width: 31%;
		padding: 1%;

		justify-content: center;
		align-items: center;
		
		h2, h3, section.movieRating {
			text-align: center;
			font-family: 'Trebuchet MS';
		}

		p {
			font-family: Arial, Helvetica, sans-serif;
			font-size: small;
		}

		img {
			width: 100%;
			aspect-ratio: 16/9;
			/* height: 40%; */
			background-color: var(--theme-200);
		}


		.seemore  {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		a {
			background-color: color-mix(in srgb, var(--theme-300) 50%, #0000004f 50%);
			/* filter: invert(100%); */
			display: block;
			justify-self: center;
			/* height: 15%; */
			padding: 3%;
			/* shadow, hover colour, border/outline, rounded edges */
			border-radius: 5px;
			box-shadow: 2px 2px 2px var(--theme-200);
			text-decoration: none;
			color: var(--textColour);
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			font-weight: bolder;
			font-size: 2dvw;
		}

		a:hover {
			background-color: var(--theme-900);
		}
	}
}


@media screen and (max-width: 600px) {
	main.movieList {

		flex-direction: column;
	
		section.movieCard {
			width: 100dvw;

			a {
				width: 80dvw;
				font-size: 5dvw;
			}
			p {
				font-size: large;
				/* font-stretch: condensed; */
			}
	
		}
	}	
}