/* carinda portal styles */
html, body, section, h1, ul, li, p, form, label { margin: 0; padding: 0; border: 0; }
html { min-height: 100%; }
:link, :visited { color: inherit; text-decoration: underline; }
body > h1 { text-align: left; }
body { text-align: center; }
section { text-align: left; background: rgba(0,0,0,0.2); border-radius: 20px; padding: 5px 25px 15px; margin: 5px; }
section input:not(:first-child) { margin: 0 0 0 5px; }
section input:not(:last-child) { margin: 0 5px 0 0; }
section > ul > li { list-style-type: none; margin: 0 0 2px 0; }
main > p { margin: 1em 0; }
main.live input { display: none; }
#mode { position: fixed; bottom: 0; right: 0; background: rgba(0,0,0,0.2); border-radius: 20px 0 0 0; padding: 5px 15px 5px; text-align: left; }
[hidden] { display: none; }
main { display: inline; }

#reminder { width: 24em; padding: 5px 10px 5px 10px; background: transparent; }
iframe { width: 100%; height: 20em; border: none; padding: 0; }

@media only screen and (min-width: 600px) {
  html { background: black url(images/wall.jpeg) no-repeat left top; -webkit-background-size: cover; color: white; font: 16px Gill Sans; }
  body > h1 { font: 5.3em/1.6em Papyrus; }
  section { display: inline-block; vertical-align: top; }
  section > h1 { font: small-caps 900 1.25em Papyrus; }
}

@media only screen and (max-width: 599px), handheld {
  html { background: black; color: white; font: 24px sans-serif; }
  body > h1 { font: 900 32px sans-serif; margin: 12px; }
  section { margin: 16px 8px; background: url(images/pillar.jpeg) no-repeat center top; -webkit-background-size: cover; }
  section > h1 { font: small-caps 900 28px sans-serif; margin-bottom: 12px; }
  section > ul > li { margin: 10px 0; }
  #mode { display: none; }
}