/***Define important CSS properties***/

:root{
/*Write the number of pixels for your desired default slide height 
   (without the 'px')*/
   --height-number: 400; 

/*Convert your desired default height into pixels*/
   --slide-height: calc(1px * var(--height-number));

/*The aspect ratio I defined when exporting the slides to pdf:*/
   --slide-aspect-ratio: calc(1140/874); 

/*Calculate the width of the slides based on the aspect ratio:*/
   --slide-width: calc(var(--slide-height) * var(--slide-aspect-ratio)); 

/*Set a default zoom factor of 1 for displaying the slides in a 
   presentation on screen*/
   --screen-zoom: 1;

/*Calculate the zoomed height of slides as displayed on screen*/
   --zoomed-slide-height: calc(var(--slide-height)*var(--screen-zoom));

/*Calculate the zoomed width of slides as displayed on screen*/
   --zoomed-slide-width: calc(var(--slide-width)*var(--screen-zoom));

/*Calculate the zoom factor required to print the slides so that they 
   appear similar to how they appear in obsidian: (If you aren't getting
   the desired result, try tweaking the 0.854 number at the front)*/
   --print-zoom: calc(0.8542 * 874/var(--height-number) / var(--screen-zoom)); 
}
/**************************************/

/***Helpful: Define your own slide-size classes***/

.small-slides {
/*Set a small zoom factor for displaying the presentation slides in 
  obsidian, and recalculate the zoomed slide height and the print 
  zoom factor for consistency*/
   --screen-zoom: 0.5;
   --zoomed-slide-height: calc(var(--slide-height)*var(--screen-zoom));
   --zoomed-slide-width: calc(var(--slide-width)*var(--screen-zoom));
   --print-zoom: calc(0.8547 * 874/var(--height-number) / var(--screen-zoom)); 
}

.large-slides {
/*Set a small zoom factor for displaying the presentation slides in 
  obsidian, and recalculate the zoomed slide height and the print 
  zoom factor for consistency*/
   --screen-zoom: 1.5;
   --zoomed-slide-height: calc(var(--slide-height)*var(--screen-zoom));
   --zoomed-slide-width: calc(var(--slide-width)*var(--screen-zoom));
   --print-zoom: calc(0.8547 * 874/var(--height-number) / var(--screen-zoom)); 
}
/**************************************************/

.presentation {
/*Set the presentation to snap directly to the slides upon scrolling up 
  and down along the y-axis*/
   scroll-snap-type: y mandatory; 
    
/*Minimize the padding of the presentation*/
   padding: 0px; 
}

.anchor {
/*Snap to the center of the slides upon scrolling. Other options include
  snapping to the "start" or the "end" of the slides.
  NOTE: If you decide to change the positioning of </div> to before
  the embedded slide notes, change this to "start"*/
   scroll-snap-align: center; 

/*When scrolling, slides can be skipped (e.g. if fast swiping used on
  a touch-screen display), instead of "always" stopping at the next slide.
  Uncomment the following line if you prefer otherwise.*/
 /*scroll-snap-stop: always;*/ 
}

.slide {
/*Do not display overflowing material beyond the slides' dimensions*/
   overflow: hidden;

/*Set the width of the default slides as the --slide-width (see :root)*/
   width: var(--slide-width);

/*Set the height of the default slides as the --slide-height (see :root)*/
   height: var(--slide-height);

/*Do not display slide borders*/
   border: none;

/*Center the slide horizontally*/
   margin: 0 auto;
  
/*Set the top padding for the default slide*/
   padding-top: 15px;
}

.presentation table {
/*Center the table for the presentation*/
   margin: auto;
}

.presentation th {
/*Do not display the presentation table heading*/
/*Note: The heading is duplicated on each page during
  export to PDF*/
   display: none;

/*If you would like to display the table heading,
  uncomment the following lines to preserve
  non-bold font weight and left-aligned text,
  unless you want centered and bold table heading text*/
 /*font-weight: inherit;
   text-align: inherit;*/   
}

.presentation th, .presentation td {
/*Hide the table borders*/
   border: none;

/*Set padding on top and bottom to center the presentation
  slides vertically on the screen*/
   padding-top: calc(50vh - (var(--zoomed-slide-height)/2));
   padding-bottom: calc(50vh - (var(--zoomed-slide-height)/2));

/*Minimize table cells' padding on the left and right*/
   padding-left: 0px;
   padding-right: 0px;

/*Adjust the table cells (i.e. the slides) by the screen zoom factor*/
   zoom: var(--screen-zoom);
}

.presentation .markdown-embed table, 
.slide table {
/*Return to original table settings for note embeds and slides
  in the presentation*/ 
   all: revert !important;
/*Some settings that weren't captured by the above statement.
  Collapse the borders of the table (as they usually are by 
  default in obsidian), and return the text color inside the
  table to normal (helps for getting the right color when
  converting to PDF)*/
   border-collapse: collapse !important;
   color: var(--text-normal) !important;

/*Also, having the tables be centered is a nice property*/
   margin: auto !important;
}

.presentation .markdown-embed tr,
.slide tr {
/*Return to original table row settings for
  note embeds and slides in the presentation*/ 
   all: revert !important;
}

.presentation .markdown-embed th, 
.presentation .markdown-embed td, 
.slide th, 
.slide td {
/*Return to original table heading and table cell settings for
  note embeds and slides in the presentation*/ 
   all: revert !important;
   padding: 4px 10px !important;
   border: 1px solid var(--background-modifier-border) !important;
}

.presentation div.markdown-preview-sizer.markdown-preview-section{
/*Remove uneccessary padding after final slide*/
   padding-bottom: 0px !important;
 
/*Trial and error calculation for top padding for zoomed slides in
  an attempt to better adjust the zoomed slides' bottom edge*/
   padding-top: calc(4px / (var(--screen-zoom)*var(--screen-zoom)*var(--screen-zoom)) - 3.5px) !important;
}

.presentation .markdown-embed-title, 
/*.presentation .markdown-embed-link,*/ /*Uncomment if you want to
                                          also hide embedded notes'
                                          links. Otherwise, leave as
                                          is: they can facilitate 
                                          linking to the original 
                                          slide notes for quick editing.*/
.presentation .file-embed-link {
/*Hide embedded slide notes' titles and embedded files' links.*/
   display: none;
}

.presentation .markdown-embed, 
.presentation .file-embed {
/*Hide embedded slide notes' and files' borders*/
   border: none;
   
    
/*Markedly reduce top margin from embedded notes (i.e. slides) and files*/
   margin-top: 0.5px;
}


div.markdown-preview-view.slide{
/*Padding for how each slide will appear individually in preview mode*/
   padding-left: 25px !important;
   padding-right: 25px !important;
}

.presentation .markdown-embed .markdown-preview-view{
/*Minimize padding for each slide as they appear in the presentation 
  in preview mode*/
   padding-top: 0px;
   padding-bottom: 0px;
}

.presentation .markdown-embed  {
/*Further minimize padding for slides*/
    padding: 0px 0% 0px 0%;
}

/***Adding Background Image or Color to Slides****/

/**A CSS class to add a background image**/
.cover {
/*Use background image of interest from local file directory OR
  Use an image link from the internet*/
/*To use an image from local directory:
  (Credit to @halfelixir in obsidian post: 
  https://forum.obsidian.md/t/allow-embed-of-local-images-using-file/1990/4)
  
  Windows:
   background: url('app://local/C://Users/username/Documents/obsidian_notebook/test.png');

  Linux (you have to have two “/” before “home”):
   background: url('app://local//home/username/Documents/obsidian_notebook/test.jpg');

  Mac (it doesn’t matter if you have one or two “/” before “Users”):
   background: url('app://local/Users/cusername/Documents/obsidian_notebook/test.jpg');
*/
/*Placeholder image from the internet:
  (Credit to Sarah Dorweiler at unsplash.com: https://unsplash.com/@sarahdorweiler)*/
   background: url('https://images.unsplash.com/photo-1487700160041-babef9c3cb55?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80');

/*Fill background with 100% of image*/
   background-size: 100% 100%;

/*Do not repeat background image*/
   background-repeat: no-repeat;
}

/**Adjusting the font size and bottom margin of the h1 heading for the cover slide**/
.cover h1 {
  font-size: 45px;
  margin-bottom: -15px;
}

/**Adjusting the font color of the class based on what works well with
the background**/
.cover h1, .body h1, 
.cover h2, .body h2, 
.cover h3, .body h3, 
.cover h4, .body h4, 
.cover h5, .body h5,
.cover h6, .body h6,
.cover p,  .body p,
.cover li, .body li,
.cover th, .body th,
.cover .markdown-embed th, .body .markdown-embed th,
.cover td, .body td,
.cover .markdown-embed td, .body .markdown-embed td{
   color: black !important; /*Adjust font color*/
}


/**A CSS class to add background color**/
.body {
   background-color: darkgrey; /*Set background color*/
}

/**Another CSS class to add a background image**/
.end {
/*Placeholder image from the internet:
  (Credit to Mihail_hukuna at pixabay.com: https://pixabay.com/users/mihail_hukuna-6620069/)*/
   background: url('https://cdn.pixabay.com/photo/2018/06/16/20/41/rose-3479487_960_720.jpg');

/*Fill background with 100% of image*/
   background-size: 100% 100%;

/*Do not repeat background image*/
   background-repeat: no-repeat;
}

/**********************************************/

/***Define CSS setting for export to PDF***/
@media print {

  table{
     margin: auto; /*Center table*/ 
  }
  tr{
   /*Display each row of the table (i.e. each slide) on a separate page*/
     display: block;
     page-break-before: always;
  }
  th{
     display: none !important; /*Do not show the header*/
  }
  td{
   /*Set the default background color 
     of each slide as the background color of your vault*/
     background-color: var(--background-primary); 
   /*Set the dimensions of the table cells (i.e. slides) to 100%*/
     width: 100%;
     height: 100%;
   /*Set each cell's padding to 0 so whatever uniquely added
     background images or colors fully cover the default background color*/
     padding:0px !important; 
  }
  th,td{
   /*Don't show table borders*/
     border: none !important;
  }

  h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  p, 
  li,
  table{
   /*Set the color of all text as the normal color you use in your vault.*/
     color: var(--text-normal) !important; 
  }

  ::-webkit-scrollbar{
   /*Don't show scrollbars*/
     display: none;
  }
   
  body { 
   /*Adjust the content body margin so that the first page isn't offset*/
     margin-top: -20px;
  }

  @page {
   /*Apply custom margins to the printed pages*/
     margin-top: 34px;
     margin-bottom: -30px;
     margin-left: calc(-20px * var(--print-zoom));
     margin-right: calc(-20px * var(--print-zoom));
  }

  .slide {
   /*Minimize top padding for slides*/
     padding-top: 0px;
   /*Enlarge the slides to fit the desired printed area*/
     zoom: var(--print-zoom);
  }
}
/******************************************/