/* @theme structure */

/*
  ============================================
    Created by Paulo Cunha
    version: 1.7
    last update: 12.mai.2022
         update: 30.dez.2021
  ============================================

    You may use freely (MIT license) provided  
    due credits are granted to the authors. 

    CLASSES:
        
        <!-- _class: biblio           -->
        <!-- _class: blockquote       -->
        <!-- _class: cite             -->
        <!-- _class: columns          -->
        <!-- _class: columns3         -->
        <!-- _class: columns-center   -->
        <!-- _class: columns3-center  -->
        <!-- _class: cool-list        -->
        <!-- _class: cool-list2       -->
        <!-- _class: table            -->
        <!-- _class: transition       -->
        <!-- _class: titlepage        -->

  Credits: https://catalin.red/css3-ordered-list-styles/
           for cool-list anda cool-list2.

*/

/***************** COMMON STRUCTURE **********************/

h1 {
  color: var(--h1-color);
  border-bottom: 1px solid var(--border-color);
}

section p {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
  line-height: 1.3em;
  font-size: 32px;
}

section li {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
  line-height: 1.2em;
  font-size: 105%;
  color: val(--list-item-color);
}

/* Definition for emphasis */
section em {
  color: var(--italic-color);
  background: var(--italic-background-color);
  font-style: normal;
  font-weight: bold;
  font-family: sans-serif;
  padding-top: 6px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 6px;
}

/* Definition for bold text */
section strong {
  color: var(--bold-color);
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 600;
}

/* May append some string to page number     */
/* Uses format "page-number / total pages" */

section::after {
  color: rgb(51, 59, 77);
  font-size: 0.8em;
  content: " " attr(data-marpit-pagination) "/"
    attr(data-marpit-pagination-total) " ";
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.small {
  font-size: 24px;
}

/* 
   Tables are always centered.
   Credits: Juan Vera del Campo 
   Loco:   https://github.com/Juanvvc
   
*/
section table {
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  width: auto;
  border: 0;
}
section table th {
  background-color: var(--table-header-color);
  color: white;
  border: 0;
  border-top: rgb(253, 74, 3) solid 2px;
  border-top: rgb(255, 0, 0) solid 2px;
}
section table td {
  border: 0;
}
section table tr:nth-child(2) {
  background-color: #dedede;
}
section table tr:last-child {
  border-bottom: rgb(253, 74, 3) solid 2px;
}

tr:nth-child(even) {
  background-color: #e8edf1 !important;
}
tr:hover {
  color: rgb(36, 34, 34);
  background-color: rgb(255,204,0);
  font-weight: bold;
}

/* 
  Block quote: used for footnote
  substitution. Use as the last  
  element of a slide.
*/
section blockquote {
  color: rgb(66, 66, 66);
  font-size: 20px;
  border-top: 0.1em dashed var(--extra-back-color);
  margin-top: auto;
}

section blockquote strong {
  color: rgb(68, 104, 151);
  font-weight: bold;
  font-size: 1.13em !important; 
}

section blockquote p {
  font-size: 1.13em !important; 
}
/* 
  Adds two-columns class 
*/
.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  /* justify-content: center !important; */
}


/************************* columns-center *****************************/
/* 
/* 
  Adds two-columns with centered contens class 
*/
.columns-center {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  justify-items: center;
  justify-content: center;
  align-items: center;
}


/************************* columns3 *****************************/
/* 
  Adds three-columns class 
*/
.columns3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  /* justify-content: center !important; */
}



/******************** columns3-center ***************************/
/* 
/* 
  Adds three-columns with centered contens class 
*/
.columns3-center {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  justify-items: center;
  justify-content: center;
  align-items: center;
}


/******************* titlepage *************************/
/* 
    Title Page Class: first slide in a deck.
    
    Use: 
    
    <!-- _class: titlepage --> 

    # TTILE
    ## SUBTITLE
    ### AUTHOR
    #### DATE
    ##### INSTITUTION
*/

section.titlepage {
  background-color: var(--background-color);
}

/* 
  Titlepage informations 
*/
section.titlepage .title {
  font-size: var(--title-size);
  font-weight: var(--title-font-weight);
  color: var(--title-color);
  border-bottom: 1px solid var(--border-color);
  line-height: 1.25;
  padding-bottom: 15px;
  padding-right: 10%;
}
section.titlepage .subtitle {
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-font-weight);
  line-height: 1.2;
  color: var(--subtitle-color);
  padding-top: 10px;
  padding-bottom: 120px;
  letter-spacing: var(--letter-spacing);
}
section.titlepage .author {
  font-size: var(--author-size);
}
section.titlepage .date {
  font-size: var(--date-size);
}
section.titlepage .organization {
  font-size: var(--institute-size);
}
section.titlepage .author,
section.titlepage .date,
section.titlepage .organization {
  font-weight: 400;
  text-align: right;
  color: var(--titlepage-color);
  line-height: 1.25;
}
section.titlepage h3,
section.titlepage h4,
section.titlepage h5 {
  font-weight: 400;
  text-align: right; 
  color: var(--titlepage-color);
  line-height: 0;
  letter-spacing: var(--letter-spacing);
}

section.titlepage h1 {
  font-size: var(--title-size);
  font-weight: var(--title-font-weight);
  text-align: left;
  color: var(--title-color);
  border-bottom: 1px solid var(--border-color);
  line-height: 1.25;
  padding-right: 20%;
}
section.titlepage h2 {
  font-size: var(--subtitle-size);
  font-weight: var(--subtitle-font-weight);
  text-align: left;
  color: var(--subtitle-color);
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
  margin-top: -0.2em;
  padding-bottom: 95px;
}
section.titlepage h3 {
  font-size: var(--author-size);
}
section.titlepage h4 {
  font-size: var(--date-size);
}
section.titlepage h5 {
  font-size: var(--institute-size);
}

/* Omits page number in Title Page Slide */
section.titlepage footer,
section.titlepage header,
section.titlepage:after {
  /* hide header, footer and pagination */
  display: none;
}

/************************* transition *****************************/
/* 
    transition class: first slide in a section. Use h1 as header.
    Use: 
    
    <!-- _class: transition --> 

    # Header
   
*/
section.transition {
  background-color: var(--transitionpage-color);
  text-align: center !important;
  font-weight: bold !important;
  color: white;
  padding-top: auto;
  padding-buttom: auto;
}
section.transition h1,
section.transition h2,
section.transition p,
section.transition a {
  color: rgb(243, 229, 212);
  font-size: 200%;
  border-bottom: none;
}
section.transition footer,
section.transition header,
section.transition:after {
  /* hide header, footer and pagination */
  display: none;
}

/************************* transition *****************************/
/* 
    transition class: first slide in a section. Use h1 as header.
    Use: 
    
    <!-- _class: transition --> 

    # Header
   
*/
section.transition2 {
  background-color: rgb(137, 173, 207);
  text-align: center !important;
  font-weight: bold !important;
  color: white;
  padding-top: auto;
  padding-buttom: auto;
}
section.transition2 h1,
section.transition2 h2,
section.transition2 p,
section.transition2 a {
  color: rgb(217, 235, 247);
  font-size: 200%;
  border-bottom: none;
}

section.transition2 em {
  background-color: rgb(60, 255, 0) !important;
}

section.transition2 footer,
section.transition2 header,
section.transition2:after {
  /* hide header, footer and pagination */
  display: none;
}

/************************* CITE *****************************/
/* 
    cite class: slide containg a citation 
    
    Use: 
    
    <!-- _class: cite --> 

    Text

*/
section.cite {
  background-color: var(--background-color);
}

section.cite p {
  color: black;
  background-color: ;
  letter-spacing: var(--letter-spacing);
  font-size: 150%;
  text-align: center;
  line-height: 1.2em;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  /*  font-style: oblique; */
  padding-top: auto;
  padding-bottom: auto;
  padding-left: 100px;
  padding-right: 100px;
}

section.cite strong {
  color: var(--strong-color);
}

/* Omits page number in Title Page Slide */
section.cite footer,
section.cite header,
section.cite:after {
  /* hide header, footer and pagination */
  display: none;
}

/************************* biblio *****************************/
/* 
    slides containg bibliography
    Use: 
    
    <!-- _class: biblio --> 
    # References

    1. Item one
    2. Item two

*/

section.biblio {
  background-color: var(--background-color);
}

section.biblio p {
  color: var(--text-color);
  font-size: 80%;
  font-weight: 300;
  padding-left: 5px;
}
section.biblio h1 {
  font-size: 35px;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}
section.biblio strong {
  color: var(--bold-color);
}
section.biblio a {
  font-size: 31px;
  font-weight: bold;
  color: var(--bold-color);
}
section.biblio li {
  color: var(--text-color);
}
section.biblio footer,
section.biblio header,
section.biblio:after {
  /* hide header, footer and pagination */
  display: none;
}

/******************* cool-list *****************************/
/* 

  Credits: https://catalin.red/css3-ordered-list-styles/

  Use:

  <!-- _class: cool-list -->

  1. *Item One*
  1. *Item two*
      1. *Item two.one*
      1. *Item two.two*
      1. *Item two.three*
  1. *Item Three*
  
*/

section.cool-list ol {
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  padding: 0;
  /*text-shadow: 0 1px 0 rgba(255,255,255,.5);*/
}
section.cool-list li {
  margin-bottom: 0.1em !important;
  margin-top: 0.1em !important;
}
section.cool-list ol > li > em,
section.cool-list > ol > li > a {
  position: relative;
  display: block;
  padding: 0.4em 0.4em 0.4em 2em;
  margin: 0.5em 0;
  background: #ddd;
  color: #444;
  text-decoration: none;
  border-radius: 0.3em;
  transition: all 0.3s ease-out;
  font-style: normal;
}
section.cool-list ol > li > em:before,
section.cool-list > ol > li > a:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  background: var(--cool-list-color);
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: 0.3em solid #fff;
  text-align: center;
  font-weight: normal;
  border-radius: 2em;
  transition: all 0.3s ease-out;
  color: white;
}
section.cool-list > ol > li > em:hover,
section.cool-list > ol > li > a:hover {
  background: #eee;
  font-weight: bolder;
}
/* Rotating effect */
/*
section.cool-list ol > li > em:hover:before,section.cool-list ol > li > a:hover:before{
    transform: rotate(360deg);
}*/
/* Lists inside lists */
section.cool-list > ol ol {
  margin: 0 0 0 2em; /* Add some left margin for inner lists */
  font-size: 75%;
  counter-reset: li2; /* Initiate a counter */
}
section.cool-list > ol ol > li > em:before,
section.cool-list > ol ol > li > a:before {
  content: counter(li2);
  counter-increment: li2;
}
section.cool-list > ol > li > ul {
  list-style-type: disc;
  margin: 0 0 0 1em;
  font-size: 75%;
}
section.cool-list > ol ol > li > em {
  background: #efefef;
}

/******************* cool-list2 *****************************/
/* 

  Credits: https://catalin.red/css3-ordered-list-styles/

  Use:

  <!-- _class: cool-list2 -->

  1. *Item One*
  1. *Item two*
      1. *Item two.one*
      1. *Item two.two*
      1. *Item two.three*
  1. *Item Three*

*/

section.cool-list2 ol {
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  padding: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
section.cool-list2 ol ol {
  margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
section.cool-list2 ol li em {
  position: relative;
  display: block;
  padding: 0.4em 0.4em 0.4em 0.8em;
  margin: 0.5em 0 0.5em 2.5em;
  background: #ddd;
  color: #444;
  text-decoration: none;
  transition: all 0.3s ease-out;
  font-style: normal;
}
section.cool-list2 ol li em:hover {
  background: #eee;
  font-weight: bolder;
}
section.cool-list2 ol li em:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -2.5em;
  top: 50%;
  margin-top: -1em;
  /* background: #fa8072; */
  background: var(--lighter-color);
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: bold;
}
section.cool-list2 ol li em:after {
  position: absolute;
  content: "";
  border: 0.5em solid transparent;
  left: -1em;
  top: 50%;
  margin-top: -0.5em;
  transition: all 0.3s ease-out;
}
section.cool-list2 ol li em:hover:after {
  left: -0.5em;
  /* border-left-color: #fa8072; */
  border-left-color: var(--lighter-color);
}
/* Lists inside lists */
section.cool-list2 ol ol {
  margin: 0 0 0 2em; /* Add some left margin for inner lists */
  font-size: 75%;
  counter-reset: li2; /* Initiate a counter */
}
section.cool-list2 ol ol > li > em:before,
section.cool-list2 ol ol > li > a:before {
  content: counter(li2);
  counter-increment: li2;
  background: lightgray;
}
section.cool-list2 ol ul {
  list-style-type: disc;
  margin: 0 0 0 1em;
  font-size: 75%;
}
section.cool-list2 ol ol em {
  background: #efefef;
}
