style.scss

/*-- scss:defaults --*/

// fonts
@import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap';
@import url('https://fonts.googleapis.com/css2?family=Delius+Unicase&display=swap');

$font-family-sans-serif: "Atkinson Hyperlegible", sans-serif;

// Colors
$orange: #f79927;
$redorange: #f75627;

// Font-style: 


// Base document colors
$presentation-heading-color: $orange;
$presentation-title-slide-text-align: "left";
$link-color: $redorange;
$code-block-font-size: 0.9em;

/*-- scss:rules --*/

.reveal .custom-title {
  font-family: 'Delius Unicase', cursive;
  color: #de1b0d;
  font-size: 1.5em;
  position: absolute; 
  left: 20px; 
  top: 20px;
}

.reveal .custom-subtitle {
  font-family: 'Delius Unicase', cursive;
  color: #de1b0d;
  font-size: 1em;
  position: absolute; 
  left: 20px; 
  top: 200px
}

.reveal .custom-author {
  color: #de1b0d;
  position: absolute; 
  text-align: right;
  font-size: 1.1em;
  right: 0px; 
  bottom: 40px;
  line-height: 1.5em;
}

.reveal .custom-url a {
  color: #9CE0F6;
  font-size: 1em;
  text-align: right;
  position: absolute; 
  right: 0px; 
  bottom: -10px;
}

.reveal .custom-url1 a {
  color: #9CE0F6;
  font-size: 1em;
  text-align: right;
  position: absolute; 
  right: 0px; 
  bottom: -120px;
}

.reveal .custom-url2 a {
  color: #9CE0F6;
  font-size: 1em;
  text-align: right;
  position: absolute; 
  right: 0px; 
  bottom: -130px;
}

.reveal .custom-url-middle-dark a {
  color: #0F1620;
  font-size: 1.75em;
  position: absolute; 
  left: 20px; 
  top: -150px;
}

.reveal .custom-url-top-white a {
  color: #FFFFFF;
  font-size: 1.1em;
  position: absolute; 
  left: 20px; 
  top: -475px
}

.reveal .custom-artwork {
  font-family: 'Delius Unicase', cursive;
  color: #d2e3f3;
  font-size: 0.8em;
  text-align: right;
  position: absolute; 
  right: 0px; 
  bottom: -90px;
}

.reveal .code-file {
  background-color: #ECECEC;
  margin-bottom: 2px !important;
}

.reveal .code-file p {
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 0.8em;
  margin-left: 0.8em;
}

.reveal .code-file code {
  color: #0F1620;
}

.reveal .title-top-light h1 {
  font-family: 'Delius Unicase', cursive;
  color: #75AADB;
  font-size: 3em;
  position: absolute; 
  left: 20px; 
  top: -400px
}

.reveal .title-top-ice h1 {
  font-family: 'Delius Unicase', cursive;
  color: #9CE0F6;
  font-size: 3em;
  position: absolute; 
  left: 20px; 
  top: -400px
}

.reveal .title-top-dark h1 {
  font-family: 'Delius Unicase', cursive;
  color: #0F1620;
  font-size: 3em;
  position: absolute; 
  left: 20px; 
  top: -400px
}

.reveal .title-middle-dark h1 {
  font-family: 'Delius Unicase', cursive;
  color: #0F1620;
  font-size: 3em;
  position: absolute; 
  left: 5px; 
  top: 0px
}

.reveal .title-middle-ice h1 {
  font-family: 'Delius Unicase', cursive;
  color: #9CE0F6;
  font-size: 3em;
  position: absolute; 
  left: 5px; 
  top: 0px
}

.reveal .title-middle-light h1 {
  font-family: 'Delius Unicase', cursive;
  color: #9CE0F6;
  font-size: 3em;
  position: absolute; 
  left: 5px; 
  top: 0px
}

.reveal .takeaway h2 {
  font-size: 1.7em;
  font-weight: normal;
  color: #0F1620;
  text-align: center;
}

.reveal .takeaway {
  background-color: #e1ecf7;
  text-align: center;
}

.reveal .slide .quotebox-transparent {
  border: 2px solid #FFFFFF;
  padding: 1em;
  background: rgb(231, 231, 232, 0.75);
  position: absolute;
  left: 15%;
  width: 70%;
  color: #0F1620;
  font-size: 1.1em;
}

.reveal .slide .quotebox-transparent-low {
  border: 2px solid #FFFFFF;
  padding: 1em;
  background: rgb(231, 231, 232, 0.75);
  position: absolute;
  left: 15%;
  bottom: 1%;
  width: 70%;
  color: #0F1620;
  font-size: 1.1em;
}

.reveal .slide .quotebox-transparent-wide-high {
  border: 2px solid #FFFFFF;
  padding: 1em;
  background: rgb(231, 231, 232, 0.75);
  position: absolute;
  left: 0%;
  bottom: 65%;
  width: 95%;
  color: #0F1620;
  font-size: 1.1em;
}

.reveal .slide .quotebox-transparent-bottom-right {
  border: 2px solid #FFFFFF;
  padding: 0.5em;
  background: rgb(231, 231, 232, 0.75);
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 35%;
  color: #0F1620;
  font-size: 1.1em;
}

.reveal .slide .quotebox-transparent-bottom-right2 {
  border: 2px solid #FFFFFF;
  padding: 0.5em;
  background: rgb(231, 231, 232, 0.75);
  position: absolute;
  right: 0%;
  top: 0%;
  width: 35%;
  color: #0F1620;
  font-size: 1.1em;
}

.reveal .slide .quotebox-opaque {
  border: 2px solid #FFFFFF;
  padding: 1em;
  background: rgb(231, 231, 232, 0.95);
  position: absolute;
  left: 15%;
  width: 70%;
  color: #0F1620;
  font-size: 1.1em;
}


.reveal .slide .bulletbox {
  padding: 0.5em;
  height: 300px;
}

.reveal .borderbox img {
  border: 5px solid #ececec;
}

/* alignment */

.reveal .centered {
  text-align: center;
}

/* font sizes */

.reveal .larger {
  font-size: 3em;
}

.reveal .large {
  font-size: 1.5em;
}

.reveal .midi {
  font-size: 1.2em;
}

.reveal .quote-source {
  font-size: 0.9em;
}

.reveal .small {
  font-size: 0.75em;
}

/* unused */

.reveal .h3center h3 {
  text-align: center;
}

.shout { /*-- julie note: also not final (or accessible)! Just wanted something that isn't normal text - altering Header3 could also work here --*/
  color: teal; 
  font-size: 1.5em;
  font-weight: bold;
}

.question {
  background-color: #FF744E;
  font-style: italic;
}


.reveal .slide .demo {
  border: 3px solid #c7cfcf;
  color: white;
  font-size: 0.75em;
  padding-left: 0.5em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background: #607576;
}

.reveal .slide .illustration {
  border: 3px solid #FF744E;
  color: black;
  font-size: 0.75em;
  padding-left: 0.5em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  background: #FAE3E3;
}

.reveal .footer {
  font-size: 0.35em !important;
  margin-left: 0.5em;
  text-align: right !important;
}

*[id^="h"] {
  font-weight: italic; // Set the font weight to bold for all header elements
}