html {
margin:0;
padding:0;
}

body {
margin:0;
padding:0;
background:#e9e9e9;
color:#333;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:1.5;
}

a {
color:#3366cc;
text-decoration:none;
}

a:hover {
color:#003399;
text-decoration:underline;
}

#wrapper {
width:760px;
margin:18px auto;
background:#fff;
border:1px solid #c8c8c8;
}

header {
padding:17px 20px 15px;
background:#fafafa;
border-bottom:1px solid #ccc;
}

.header-title {
font-size:26px;
color:#444;
font-weight:normal;
}

.header-subtitle {
margin-top:3px;
color:#888;
font-size:11px;
}

nav {
padding:7px 14px;
background:#eee;
border-bottom:1px solid #ccc;
font-size:11px;
}

nav a {
margin-right:16px;
}

#layout {
display:block;
}

main {
width:535px;
padding:16px;
}

.post {
margin-bottom:32px;
padding-bottom:18px;
border-bottom:1px solid #ddd;
}

.post h1 {
margin:0;
font-size:19px;
font-weight:normal;
color:#333;
}

.post-date {
margin-top:2px;
margin-bottom:12px;
color:#999;
font-size:10px;
}

.post p {
margin-top:7px;
margin-bottom:10px;
}

.video-container {
width:500px;
height:281px;
margin-top:10px;
margin-bottom:12px;
background:#111;
overflow:hidden;
}

.video-container iframe {
width:100%;
height:100%;
border:0;
}

.video-placeholder {
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:#666;
background:#111;
font-size:11px;
}

.description {
margin-bottom:12px;
color:#444;
}

.video-info {
padding:9px;
background:#f4f4f4;
border:1px solid #d6d6d6;
font-size:11px;
line-height:1.7;
}

.post-links {
margin-top:9px;
font-size:11px;
}

button {
padding:3px 9px;
background:#eee;
border:1px solid #999;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
cursor:pointer;
}

button:hover {
background:#ddd;
}

footer {
padding:13px;
border-top:1px solid #ccc;
background:#fafafa;
text-align:center;
color:#999;
font-size:10px;
}

@media (max-width:780px) {

#wrapper {
width:96%;
margin:5px auto;
}

main {
width:auto;
}

.video-container {
width:100%;
height:auto;
aspect-ratio:16 / 9;
}

}