* { box-sizing: border-box; }
html,body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Verdana;
	padding-bottom: 40px;
}

header {
	background: url('content/sky top.png') no-repeat;
	background-size: cover;
	background-position: center;
	height: 400px;
	overflow:hidden;
}

h1 { background-color: #355269b0; padding:20px; color: #fff; }

.content { max-width: 1600px;margin: 0 auto; padding: 0 20px; }
.header-info {
	margin-top: 45px;
}

button.contact-me {
	padding: 10px 20px;
	background: linear-gradient(to bottom, #9B59B6, #8E44AD);
	border: none;
	border-radius: 5px;
	color: #fff;
	font-weight: bold;
	font-size: 1.12em;
	cursor: pointer;
	transition: background 0.3s ease;
 }
 
button.contact-me:hover {
	background: linear-gradient(to bottom, #8E44AD, #9B59B6);
}
 
button.contact-me:active {
	background: linear-gradient(to bottom, #9B59B6, #8E44AD);
}

movie-list { display:flex; gap:24px; flex-wrap:wrap;margin:30px 0; }
movie-item { display: block; width:calc((100% - 48px) / 3); }
movie-title { display: block; margin: 12px 0; font-weight:bold; }
movie-description { display: block;margin-bottom:20px; }


movie-wrapper { display: block; position: relative; overflow: hidden; width: 100%; padding-top: 56.25% }
movie-wrapper iframe,
movie-wrapper video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }


@media screen and (max-width: 1000px) {
	movie-item { width:calc((100% - 48px) / 2); }
}
@media screen and (max-width: 640px) {
	movie-item { width:100%; }
}