custom.scss

/*-- scss:defaults --*/

// fonts

@font-face {
  font-family: "Montserrat";
  src: url("\\fonts\\Montserrat-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Roboto";
  src: url("\\fonts\\Roboto-VariableFont_wdth,wght.ttf");
}

$font-family-sans-serif: "Roboto" !default;
$presentation-heading-font: "Montserrat", sans-serif !default;

$presentation-font-size-root:	36px !default;


/*-- 
$font-family-sans-serif	“Source Sans Pro”, Helvetica, sans-serif


$presentation-font-smaller	0.7
$presentation-line-height

$presentation-h1-font-size	2.5em
$presentation-h2-font-size	1.6em
$presentation-h3-font-size	1.3em
$presentation-h4-font-size	1em
$presentation-heading-font	$font-family-sans-serif
$presentation-heading-color	$body-color
$presentation-heading-line-height	1.2
$presentation-heading-letter-spacing	normal
$presentation-heading-text-transform	none
$presentation-heading-text-shadow	none
$presentation-heading-font-weight	600
$presentation-h1-text-shadow	none

--*/

// colors
$body-bg: #f0f1eb !default;
$body-color: #000 !default;
$link-color: #51483d !default;
$selection-bg: #26351c !default;

$shadow-col: #6666ff44 !default;
$custom-box-bg:#f0f0f0 !default;

// headings
$presentation-heading-font: "Montserrat" !default;
$presentation-heading-color: #6e5e50 !default; // #383d3d 
$custom-title-color: #383d3d !default;

/*-- scss:rules --*/
// General aesthetics

.quarto-title-author-name {
  font-size: 0.75em ;
}


.reveal .slide a {
  line-height: 1.3em;
}

.slide-background {
  background: #2A7B9B;
  background: linear-gradient(rgba(42, 123, 155, 1) 0%,rgba(42, 123, 155, 0.7) 3%, rgba(87, 199, 133, 0.3) 12%, rgba(255, 255, 255, 1) 17%, rgba(255, 255, 255, 1) 90%, rgba(240, 227, 112, 0.5) 95%, rgba(237, 221, 83, 1) 100%);
  background-attachment: fixed; /* Keeps gradient consistent on scroll */
}

.reveal .slide h2::after {
  content: "";
  display: block;
  margin-top: 0.125em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid black;
}

.reveal .slide blockquote {
  border-left: 3px solid $text-muted;
  padding-left: 0.5em;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  text-transform: none !important; /* Disables all-caps */
//  font-variant: normal !important; /* Ensures normal capitalization */
}

.reveal h2{
  color: $custom-title-color;
}

.reveal h3{
  font-size: 1.15em;
}

.reveal li {
  margin-left: 1.75em; 
}

.reveal li {
  margin-left: 1.75em; 
}

// Specific customization


.column-container {
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  align-items: right;    /* Centers images horizontally within the container */
  justify-content: center; /* Centers images vertically within the slide */
  height: 100%;           /* Ensures container takes full height of the slide */
}

.column-container img {
  /* Add specific styling for your images if needed, e.g., margin or max-height */
  max-height: 45vh; /* Adjust height as needed to fit two images on one slide */
  margin: 5px 0;   /* Adds some space between the images */
}

.custom-box {
  background-color: $custom-box-bg;
  border: 2px solid black;
  padding: 20px;
  border-radius: 5px;
}

.reveal .v-center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.custom-shadow {
  filter: drop-shadow(0.5rem 0.5rem 0.5rem $shadow-col);
}

// animations
.blink {
  animation: blink 0.7s steps(2, jump-both) infinite;
  
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.irregular-blink {
  animation: flicker 5s step-end infinite; /* Adjust duration to change overall speed */
}

@keyframes flicker {
  /* Keep it hidden for varying percentages of the animation */
  11%, 21%, 41% {
    opacity: 0;
  }
  /* Make it visible for short, irregular bursts */
  0%, 10.5%, 11.5%, 20.5%, 21.5%, 40.5%,41.5%, 100% {
    opacity: 1;
  }
}

.reveal .slides section .fragment.blur {
  filter: blur(10px);
}

.reveal .slides section .fragment.blur.visible {
  filter: none
}