* { box-sizing: border-box; }

body { margin: 0; }

.header { padding: 40px; text-align: left; background: white; color: black; }
.subheader { position: relative; left: 100px; }
.navbar { display: flex; background-color: #333;  }
.navbar a { color: white; padding: 10px 20px; text-decoration: none; text-align: center; }
.navbar a:hover { background-color: #ddd; color: black; }

article { padding-bottom: 1.5em; }
.enhavo { display: flex; flex-wrap: wrap; }
.flanko { flex: 30%; order: 2; background-color: #f1f1f1; padding: 20px; }
.main { flex: 70%; order: 1; background-color: white; padding: 20px; }
.footer { padding: 20px; }
.opa { opacity: 0.333; }


#la ekrano iĝas malpli larĝa ol 700px la paĝo iĝos vertikala/kolona anstataŭ horizontala -->
@media screen and (max-width: 700px) {  .enhavo, .navbar { flex-direction: column; } }