/* override browser default */
html,
body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}

/* use viewport-relative units to cover page fully */
body {
  height: 100vh;
  width: 100vw;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}

/* full-sized  container that fills up the page */
main {
  height: 100%;
  width: 100%;

  /* example padding, font-size, background, etc */
  padding: 10px;
  font-size: 20px;
  background-color: white;
  overflow:auto;
}

.filterLetter
{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
	margin:40px 10px;
}

.btn-primary
{
	background-color:lightgreen;
}

.filmscontainer{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	width:100%;
}

.film
{
	flex-grow:1;
 	width: 25%;
 	min-width:200px;
  	aspect-ratio : 1 / 1;
	overflow:hidden;
}

.affiche
{
	width:100%;
	height:80%;
	overflow:hidden;
}

.imgaffiche
{
	width:100%;
	height:100%;
	object-fit:contain;
}

.myButton {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}


.butn
{
	width:100%;
	height:20%;
	display:flex;
	text-align:center;
	align-items:center;
	flex-wrap:wrap;
	justify-content:center;
}