/* colors, icons: material.io */

/* --- HEAD & BODY --- */

html {
  height: 100%;
}

html, body {
  font-size: 20px;
  font-family:  Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin: 0;
}

body {
  position: relative;
  min-height: 100%
}

/* --- GENERAL TAGS --- */

h1, h2 {
  font-weight: normal;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.75em;
}

button {
  min-width: 4em;
  font-size: 1em;
  border: 1px solid black;
  background-color: white;
  min-height: 2.5em;
  cursor: pointer;
  padding: 0 2em;
  box-sizing: content-box;
  color: black;
}

button:hover {
  background-color: #424242; /* grey 800 */
  color: white;
}

code {
  color: #0033ff; /* blue */
}

/* --- SPECIAL TAGS --- */

a.link-button {
  width: 8em;
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
  display: inline-block;
  text-decoration: none;
  color: black !important;
}

a.link-button:hover {
  background-color: #424242; /* grey 800 */
  color: white !important;
}

textarea.code-area {
  width: 100%;
  margin-bottom: 1em;
  font-size: 0.95em;
  margin-top: 2em;
  font-family: monospace;

  /* due to bad textarea layout IE11/Win7 (shadow and scrollbar) */
  border: solid 1px grey;
  overflow: auto;
}

/* --- CONTENT --- */

#content {
  margin: 0 auto;
  max-width: 740px;
  /* Content height determine page height. */
  padding: 8em 6% 8em 6%;
}

#content a {
  color: #0033ff; /* blue */
}

#content pre {
  background-color: #f5f5f5; /* grey 100 */
  padding: 1em 0.7em;
  margin: 1em 0em;
  overflow: auto;
}

#content h1 {
  margin: 0;
  padding-bottom: 1em;
}

#content h2 {
  margin-top: 1.5em;
}

#content p, #content .paragraph {
  margin: 1em 0;
  line-height: 1.6em;
}

#content .paragraph2 {
  margin: 2em 0;
}

#content .paragraph5 {
  margin: 5em 0;
}

#content .extra-margin {
  margin-bottom: 3em;
}

/* --- MESSAGES --- */

#messages {
  margin-top: 3em;
  margin-bottom: 3em;
}

#messages p {
  padding: 10px;
  border-width: 1px;
  border-style: solid;
}

#messages p.red {
  border-color: #e00000; /* dark-red */
  color: #e00000; /* dark-red */
}

#messages p.green {
  border-color: #0f7820; /* dark-green*/
  color: #0f7820; /* dark-green */
}

#messages .link-button {
  margin-top: 2em;
}

#logs {
  color: #000;
  font-family: monospace;
  font-size: 0.85em;
  padding: 0.5em 0 1em 1em;
}

/* --- LINKS & PLAYGROUND PAGE --- */

#links h2 {
  font-size: 1.1em;
  margin: 1em 0 0 0;
}

#links p {
  margin: 0.5em 0 3em 0;
}

#playground #show-example {
  text-decoration: underline;
  cursor: pointer;
  color: #0033ff; /* blue */
}

/* --- WARNINGS, HINT & SOLUTION --- */

.warning {
  padding: 10px;
  border: 1px solid #e00000; /* dark-red */
  color: #e00000; /* dark-red */
  margin-bottom: 3em !important;
}

#no-storage-warning {
  display: none;
}

#hint-link-root,  #solution-link-root {
  text-decoration: underline;
  text-align: right;
  cursor: pointer;
  font-style: italic;
}

#hint-area, #solution-area {
  display: none;
}

#portrait {
  height: 8em;
  float: right;
}

/* Small screens and tablets */
@media (max-width: 1200px) {

  html, body {
    font-size: 18px;
  }

}

/* smartphones */
@media (max-width: 630px) {

  html, body {
    font-size: 17px;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.5em;
  }

  #content {
    padding: 8em 1em 14em 1em;
  }

  #portrait {
    height: 6em;
    margin-right: 3%;
  }

}