@media screen {
    .slide {
        padding-top: 10px !important;
    }
}

@media print {
  footer {
    display: none;
  }
}

.slide {
  min-height: 400px;
  -webkit-print-color-adjust:exact;
}

code {
  font-size: 100%;
  background-color: #f2f2f2;
  border: 1px dotted #999999;
  border-radius: 5px;
}

h1 {
  background: #006fad url('zhaw_logo_de.png') no-repeat right top !important;
  background-size: 62px !important;
  background-position-y: 12px !important;
  vertical-align: middle;
  padding: 20px 0 20px 10px !important;
  color: white;
  font-family: "Arial", sans-serif;
  font-size: 28pt !important;
  margin-right: 0px !important;
}

footer {
  border: none;
  background-color: #d6d6d6;
  font-size: 12px;
  padding: 5px 5px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}

.page_no {
  float: right;
  margin-right: 20px;
}

.syntax-container {
  margin: 20px 0;
}

.slide h1 {
    font-size: 180%;
    line-height: 150%;
}

.slide h2 {
    font-size: 160%;
    line-height: 140%;
}


.slide h3 {
    font-size: 140%;
    line-heigt: 120%;
}

.slide h4 {
    font-size: 120%;
    line-height: 100%;
}


.slide p {
  font-family: "Arial", sans-serif;
  font-size: 100%;
  line-height: 130%;
}

.slide th,
.slide td {
  font-family: "Arial", sans-serif;
  font-size: 24px;
  line-height: 30px;
}

.slide li {
    color: #000 !important;
}
.syntax-container.syntax-theme-base ol.syntax.highlighted {
  padding-left: 60px !important;
}

.syntax-container.syntax-theme-base ol.syntax.highlighted li {
  font-size: 20px;
}

/*
   Styling of trivia Questions
   - Use a <h2.trivia></h2>
   - And write a question underneath
*/

h2.trivia:before {
    content: "¿ Trivia Question ?";
    padding-left: 112px;
}

h2.trivia {
    background-color: orange;
    width: 70%;
    margin: 1.2em auto auto auto;
}


h2.trivia + p + p:before {
    content: "⊝ ";
}

h2.trivia + p + p {
    background-color: lightgrey;
    width: 70%;
    margin: auto auto;
    padding: 10px;
    text-align: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.note {
  padding-left: 2em;
  margin-top: 2em;
  background-image: url("images/comment.png");
  background-repeat: no-repeat;
  background-position: left;
  min-height: 45px;
}

.left, .right {
  margin-right: 2.5%;
  max-height: 95%;
}


img {
  max-width: 100%;
}

/* A Box with a nice linear gradient */
.grad, .grad-pos {
  background: linear-gradient(160deg, #0012B9 0%, #00BD58 50%, #0012B9 100%);
  text-align: center;
  font-size: 1.25em;
  border-radius: 25px;
  padding: 5%;
  width: 90%%;
}

.grad-neg {
  background: linear-gradient(160deg, #FF3900 0%, #FFBA00 50%, #FF3900 100%);
  text-align: center;
  font-size: 1.25em;
  border-radius: 25px;
  padding: 5%;
  width: 90%%;
  font-weight: bold;
}
