$link-color: #95A6B8;

.reveal .controls {
  color: $highlight-color;
}

.reveal .progress {
  background: $presentation-heading-color;
  color: $highlight-color
}

.reveal div.sourceCode {
  margin: 0;
  overflow: auto;
  border-color: $link-color;
}

.reveal a:hover {
  color: #516372;
}

.reveal .footer a {
  color: #C6AA51;
}

.reveal .footer a:hover {
  color: #FFFFFF;
}

section.has-dark-background a, section.has-dark-background a:hover {
  color: #C6AA51;
}

/*
 * This modifies the appearance of the bullet list wrt Cara's original formulation
*/
.reveal .slide ul li {
  letter-spacing: -0.025em;
}

.reveal .slide ul li::marker {
  list-style-type: disc;
  color: #AC8300;
}

.reveal .slide ol li::marker {
//  font-family: Permanent Marker;
  color: #AC8300;
  font-weight: 500;
}

/*
 * This is Cara's original formatting for bullet point lists
 *
.reveal .slide ul li {
  list-style: none; // Remove default bullets
  letter-spacing: -0.025em;
}

.reveal .slide ul li::before {
  content: "\25FC";      // Add content: \2022 is the CSS Code/unicode for a bullet; add a space for easier alignment!
  color: #AC8300;        // Change the color
  display: inline-block; // Needed to add space between the bullet and the text
  width: 1.5em;          // Also needed for space (tweak if needed)
  margin-left: -1.5em;   // Also needed for space (tweak if needed)
  font-size: 66%;
}
*/


.reveal .panel-tabset ul li::before {
  content: ""; /* Remove default bullets */
}

.reveal .monospace{
  font-size: 36pt;
}

.reveal .faded{
  opacity: 0.4;
}

.reveal .faded-small{
  opacity: 0.4;
  font-size: 0.8em;
}

.reveal .imitate-title{
  font-size: 2em;
}

.reveal p {
  letter-spacing: -0.025em;
}

#title-slide, .p{
   margin:0;
}

.reveal .slide blockquote {
  border-left: 3px solid #AC8300;
}

@media (min-width: 30em) {
  .panel-tabset [role="tab"][aria-selected="true"] {
    background-color: rgba(0,0,0,0);
    border: 1px solid $link-color;
    border-bottom-color: $link-color;
    border-bottom-color: #fff;
  }

  .panel-tabset [role="tab"]:hover:not([aria-selected="true"]) {
    border: 1px solid $link-color;
    border-bottom-color: #fff;
  }

}

@media screen and (max-width: 800px) {
  .reveal .footer {
    font-size: 8pt !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }
}

.panel-tabset [role="tablist"] {
  border-bottom: 1px solid $link-color;
  list-style: none;
  margin: 0;
  margin-bottom: 0px;
  padding: 0;
  width: 100%;
}

/* Added by GB for further customisation */
.postit1 {
  position: absolute;
  top: 65%;
/*  left: 1.5%; */
  font-family: Nanum Pen Script;
  font-size: 75%;
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  margin-left: -40px;
  height: 6.3em;
  width: 6.3em;
  padding: .5em; box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transform: rotate(-8deg);
  border-bottom-right-radius: 60px 5px;
}

.postit2 {
  position: absolute;
  top: 38%;
/*  left: 2.5%; */
  font-family: Nanum Pen Script;
  font-size:75%;
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  margin-left: -40px;
  height: 6.3em;
  width: 6.3em;
  padding: .5em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transform: rotate(6deg);
  border-bottom-right-radius: 60px 5px;
}

/* This makes the left-positioning of the post-its responsive */
.postit1 { left: clamp(-37.5px, calc(12vw - 157.5px), 22.5px); }
.postit2 { left: clamp(-37.5px, calc(15vw - 187.5px), 37.5px); }


/*******************************************************************************************************************************
 * Colours
 * NB: In LaTeX, colors may be defined in rgb (0-1). Can scale up to RGB (0-255) by simply multiplying the three numbers by 255
 *     then can use 'https://www.google.com/search?channel=fs&client=ubuntu&q=rgb+to+hex' to convert to HEX and can use here.
 *     These can be used as 'class', so for instance code such as
 *     `[$y \sim \dnorm(0,100)$]{.spanish-red}`
 *     will make the LaTeX equation coloured in the red of the Spanish flag
 ******************************************************************************************************************************/
.myred {
  color: #e62b4f;
}
.red {
  color: #ff0000;
}
.blue{
  color: #0000FF;
}
.magenta{
  color: #FF00FF;
}
.myblue {
  color: #24568c;
}
.orange {
  color: #ff8811;
}
.myblue {
  color: #24568c;
}
.olive {
  color: #334f17;
}
.ubuntublue {
  color: #035AA6;
}
.spanish-red {
  color: #c60b1e;
}
.spanish-yellow {
  color: #ffc400;
}
.italian-green {
  color: #009246;
}
.italian-red {
  color: #ce2b37;
}
.blue90red60 {
  color: #7e5dc9;
}
.blue60red90 {
  color: #9350c7;
}
.lightgray {
  color: #ededed; /*#d3d3d3*/
}
.navbargrey{
  color: #D5D5D5;
}
.beamer-yellow {
  color: #fcd000;
}
.samp-blue {
  color: #1B5497;
}
.samp-red {
  color: #C21718;
}

/* UCL palette */
.uclblue {
  color: #5487ff;
}
.uclred {
  color: #ed367d;
}
.uclgreen {
  color: #57b444;
}
.ucldarkgreen {
  color: #005e5c;
}
.ucldarkred {
  color: #9e1a54;
}
.ucldarkorange {
  color: #781c1c;
}
.ucldarkblue {
  color: #002ea6;
}


/* This makes long tables included in tabsets scrollable vertically */
.panel-tabset {
  height: 90%;
  overflow-y: auto;
}

/* Creates a marker effect */
.magic-marker {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Some new colours for highlighting text in fragments
 * Of course, can make new ones with differet values for the colour.
 * NB: This is originally defined in gb-slides_files/libs/revealjs/dist/reveal.css
*/
.reveal .slides section .fragment.highlight-blue {
  opacity: 1;
  visibility: inherit;
}
.reveal .slides section .fragment.highlight-blue.visible {
  color: blue;
}

/* The code below can be used to increase the font-size for the R chunks --
   just need to un-comment the line with font-size.
*/
.reveal div.sourceCode {
  margin: 0;
  overflow: auto;
  border-color: $link-color;
  font-size: 1.40em;
}

/* This controls the font size of the output of R chunks */
.reveal pre:not(.sourceCode) {
  font-size: .75em;
}

/* The code blocks have a fixed height by default, set by a 500px `max-height`
   on `.reveal pre code` that Quarto has with `!important`. Need to override
   with `!important` too.
   This changes the default setting for the height of the code chunks and
   scales with the slide viewport, so it stays consistent across screen sizes.
   Can use 90vh if want to push further, but leave some room for the slide title.
   Can also do `none !important` to remove the cap entirely.
*/
.reveal pre code {
  max-height: 85vh !important;
}

/* This ensures that the footer stays in position, even when slides are accidentally too large */
.reveal .footer {
  position: absolute !important;
  bottom: 0 !important;
}