.horizontal {
  display: flex;
  width: 100%;
  gap: 16px;
}

.horizontal > .block,
.horizontal > .vertical {
  flex: 1; 
}

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

.vertical > .block,
.horizontal > .vertical {
  flex: 1;
}

.poster {
  max-width: 200px;
  height: auto;
  border: 8px solid #b57614;
}

#sitetitle > h1 {
	text-align:center;
	font-size: 40pt;
	color: #282828;
}

.filmblock > .posterContainer {
	flex: none;
}

.filmblock > .synopsisContainer {
	flex: 3;
}

.filmblock > .dateContainer {
	flex: 1;
}

.filmblock > div {
	padding-left: 30px;
	padding-right: 30px;
}

.block.title {
	flex: none;
}

.film > h2 {
	font-size: 26pt;
	color: #282828;
	padding-left: 30px;
}

body {
	background-color: #427b58;
	color: #3c3836;
	font-family: sans-serif;
}

.film {
	margin-top: 50px;
	margin-bottom: 50px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
}

main {
	margin: 0 auto;
	margin-top: 3vh;
	margin-bottom: 3vh;
	width: 55%;
	align-content: center;
}

 @media only screen and (max-width: 1080px){
 	main {
 		width: 93%;
 	}

 	.horizontal {
 		flex-direction: column;
 	}

 	.film {
 		padding-left: 5px;
 		padding-right: 5px;
 	}
 }

.block.synopsis > p {
	text-align: justify;
}

#sitetitle,
#filmlist {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 20px;
	background-color: #fbf1c7;
	outline: 13px solid #282828;
}

#filmlist {
	padding-bottom: 10px;
}