* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5; } a { color: #529AB5; text-decoration: none; } /* without this: .home {position:fixed} doesn't work @ mobile */ /* horizontal overflowing content brings all the problems of mobile scailability */ img { width: 100%; max-width: 750px; padding-top: 0.25em; padding-bottom: 0.25em; } /* allow only 1 img in a row */ img { display: block; } .home { position: fixed; top: 10px; width: 100%; text-align: center; } .home a { display: inline-block; width: 45px; } .menu { position: fixed; top: 15px; right: 0px; text-align: right; } .menu a { display: inline-block; width: 40px; } .wrapper { display: flex; flex-direction: column; padding-top: 72px; padding-right: 1em; padding-bottom: 50px; padding-left: 1em; margin: auto; max-width: 800px; } .content { padding-bottom: 50px; } .content a:hover { color: #529AB5; text-decoration: underline; } .menulist { margin-bottom: 50px; padding-left: 2em; padding-right: 2em; } .menulist ul { display: flex; flex-direction: column; list-style: none; } .menulist ul li { width: 100%; } .menulist .stripe { color: #FF0000; } .menulist a.menuitem:hover { color: #529AB5; font-weight: bold; } /*@media screen and (min-width: 700px) {*/ /* .home {*/ /* position: fixed;*/ /* width: unset;*/ /* text-align: left;*/ /* padding-left: 30px;*/ /* padding-top: 20px;*/ /* }*/ /* .home a {*/ /* width: 65px;*/ /* }*/ /* .menulist {*/ /* position: absolute;*/ /* margin-top: 150px;*/ /* }*/ /* .content {*/ /* margin-left: 350px;*/ /* padding-left: 2em; */ /* }*/ /*}*/