body { background-color: #eee; color: #cb7ec0; font-size: 32pt; font-family: 'Jura', sans-serif; margin: 0px; }
h1 { text-transform: uppercase; font-size: 64pt; display: inline; vertical-align: middle; letter-spacing: 0.25em; }
h2 { background-color: #cb7ec0; color: #eee; font-size: 48pt; display: inline; padding: 0.07em; }
p img { height: 1em; }
a { color: #cb7ec0; }
a:visited { color: #4e1e86; }
.main { margin: 1em 2.5em;  }
.footer { background-color: #cb7ec0; color: #eee; margin-block-start: 2em; padding: 1em 2.5em; font-size: 24pt; }
.footer a { color: #eee; }

.logo { vertical-align: middle; border: 0.5em #eee solid; margin-right: 1.25em; }
.tentacles { overflow: auto; }
.tentacles img { float: right; margin-block-start: 1em; margin-block-end: 0.5em; }
.platform { vertical-align: middle; margin-right: 0.4em; }
.screenshots img { margin: 3px; max-width: 400px; }
.description { margin-block-end: 0.5em; }
.store-links { margin-block-start: 0; }
.store-links img { height: 1.5em; }

@media only screen and (max-width: 768px) {
    body { font-size: 16pt; }
    h1 { font-size: 32pt; }
    h1 { letter-spacing: 0.1em; max-width: 90%; }
    h2 { font-size: 24pt; }
    .main { margin: 0.5em 1em; }
    .footer { padding: 0.5em 1em; font-size: 12pt; }

    .logo {  max-width: 100px; }
    .tentacles img { max-width: 150px; }
    .screenshots img { max-width: 90%; }
    .store-links img { height: 2em; }
}