@import url('reset.css');
@import url('colors.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --progressbar-height: 0.5rem;
}
/*************************************************
 * Global styles
 ************************************************/
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}
p, code, pre, table, th, td {
    text-align: left;
}
.center {
    text-align: center;
}
.small {
    font-size: 0.8em !important;
}
.verysmall {
    font-size: 0.6em !important;
}
.tiny {
    font-size: 0.5em !important;
}
pre code {
    font-family: "Roboto Mono", monospace;
    font-size: 0.7em;
}
pre code.compact {
    font-size: 0.6em;
}
img {
    display: block;
}
img + .caption {
    font-size: 0.6em;
    text-align: center;
    margin-top: 0.5em;
}
.framed {
    border: solid 1px var(--tertiary-color);
}
.w-100 { width: 100%; }
.w-99 { width: 99%; } .w-98 { width: 98%; } .w-97 { width: 97%; } .w-96 { width: 96%; } .w-95 { width: 95%; } .w-94 { width: 94%; } .w-93 { width: 93%; } .w-92 { width: 92%; } .w-91 { width: 91%; } .w-90 { width: 90%; }
.w-89 { width: 89%; } .w-88 { width: 88%; } .w-87 { width: 87%; } .w-86 { width: 86%; } .w-85 { width: 85%; } .w-84 { width: 84%; } .w-83 { width: 83%; } .w-82 { width: 82%; } .w-81 { width: 81%; } .w-80 { width: 80%; }
.w-79 { width: 79%; } .w-78 { width: 78%; } .w-77 { width: 77%; } .w-76 { width: 76%; } .w-75 { width: 75%; } .w-74 { width: 74%; } .w-73 { width: 73%; } .w-72 { width: 72%; } .w-71 { width: 71%; } .w-70 { width: 70%; }
.w-69 { width: 69%; } .w-68 { width: 68%; } .w-67 { width: 67%; } .w-66 { width: 66%; } .w-65 { width: 65%; } .w-64 { width: 64%; } .w-63 { width: 63%; } .w-62 { width: 62%; } .w-61 { width: 61%; } .w-60 { width: 60%; }
.w-59 { width: 59%; } .w-58 { width: 58%; } .w-57 { width: 57%; } .w-56 { width: 56%; } .w-55 { width: 55%; } .w-54 { width: 54%; } .w-53 { width: 53%; } .w-52 { width: 52%; } .w-51 { width: 51%; } .w-50 { width: 50%; }
.w-49 { width: 49%; } .w-48 { width: 48%; } .w-47 { width: 47%; } .w-46 { width: 46%; } .w-45 { width: 45%; } .w-44 { width: 44%; } .w-43 { width: 43%; } .w-42 { width: 42%; } .w-41 { width: 41%; } .w-40 { width: 40%; }
.w-39 { width: 39%; } .w-38 { width: 38%; } .w-37 { width: 37%; } .w-36 { width: 36%; } .w-35 { width: 35%; } .w-34 { width: 34%; } .w-33 { width: 33%; } .w-32 { width: 32%; } .w-31 { width: 31%; } .w-30 { width: 30%; }
.w-29 { width: 29%; } .w-28 { width: 28%; } .w-27 { width: 27%; } .w-26 { width: 26%; } .w-25 { width: 25%; } .w-24 { width: 24%; } .w-23 { width: 23%; } .w-22 { width: 22%; } .w-21 { width: 21%; } .w-20 { width: 20%; }
.w-19 { width: 19%; } .w-18 { width: 18%; } .w-17 { width: 17%; } .w-16 { width: 16%; } .w-15 { width: 15%; } .w-14 { width: 14%; } .w-13 { width: 13%; } .w-12 { width: 12%; } .w-11 { width: 11%; } .w-10 { width: 10%; }
.w-9 { width: 9%; } .w-8 { width: 8%; } .w-7 { width: 7%; } .w-6 { width: 6%; } .w-5 { width: 5%; } .w-4 { width: 4%; } .w-3 { width: 3%; } .w-2 { width: 2%; } .w-1 { width: 1%; } .w-05 { width: 0.5%; }
.alert {
    color: var(--alert-color);
    margin: 0;
    padding: 0;
}
/*** lists ******/
ul { 
    list-style-type: none; 
    text-align: left;
    padding-left: 1.5em;
    margin-bottom: 0.8em;
}
ul > li { margin: 0.3em 0; }
ul > li:before {
    font-family: FontAwesome;
    font-size: 0.8em;
    content: "\f138";
    color: var(--primary-color);
    margin-right: 1em;
}
ul > li.circle:before { content: "\f111"; }
ul > li.square:before { content: "\f0c8"; }
ol {
    list-style-type: decimal;
    text-align: left;
    padding-left: 1em;
    margin-bottom: 0.8em;
}
ol > li {
    margin: 0.3em 0 0.3em 1.5em;
}
ol > li::marker {
    font-weight: bold;
    color: var(--primary-color);
}

div.boxtitle {
    background-color: var(--primary-color);
    color: white;
    border-top-left-radius: .3em;
    border-top-right-radius: .3em;
    padding: 5px 10px;
    margin-left: 0.5rem; 
    margin-right: 0.5rem;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
div.boxcontent {
    background-color: #eaedf1;
    color: var(--primary-color);
    border: solid 1px var(--primary-color);
    border-bottom-left-radius: .3em;
    border-bottom-right-radius: .3em;
    padding: 5px 10px;
    margin-left: 0.5rem; 
    margin-right: 0.5rem;
    margin-top: 0px;
    margin-bottom: 1em;
    text-align: left;
    text-justify: inter-word;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
div.boxcontent ul {
    padding-left: 1.2em;
    margin-bottom: 0.5em;
}

/*************************************************
 * Reveal theming styles
 ************************************************/
.reveal .slides {
    margin: 0;
    font-family: "Roboto", "PT Sans", Calibri, Tahoma, sans-serif;
    font-size: 12pt;
    font-weight: 300;;
    /*color: var(--primary-color);*/
    line-height: 1.5;
}
/* customize the slide number */
.reveal .slide-number { 
    font-size: 1.5em;
    color: var(--primary-color);
    background-color: transparent;
    margin-bottom: var(--progressbar-height);
}
.reveal .slide-number a { text-decoration: none; }
/* customize the progress bar */
.reveal .progress {
    background: var(--tertiary-color);
    color: var(--secondary-color);
    height: var(--progressbar-height);
}
.reveal .slides section a {
    color: var(--link-color);
}

/*************************************************
 * Styles for regular slides
 ************************************************/
 .reveal .slides section {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    height: 100%;
    padding-top: 5.2em;
    /*border: solid 1px var(--primary-color);*/
 }
.reveal .slides section h1 {
    color: var(--secondary-color);
    font-size: 1.5em;
    position: absolute;
    top: 0.5rem;
}
.reveal .slides section h2 {
    color: var(--secondary-color);
    position: absolute;
    top: 3rem;
}

/*************************************************
 * Styles for title slides
 ************************************************/
.reveal .slides section.title-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}
.reveal .slides section.title-slide .title {
    color: var(--secondary-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.reveal .slides section.title-slide .subtitle {
    color: var(--secondary-color);
    font-size: 2rem;
    margin-bottom: 5rem;
}
.reveal .slides section.title-slide .logo img {
    height: 4rem;
    margin: auto;
    margin-top: 1rem;
}
.reveal .slides section.title-slide .link {
    color: var(--secondary-color);
    font-size: 1rem;
    position: absolute;
    bottom: 1rem;
    align-content: center;
    width: 100%;
}

/*************************************************
 * Styles for section slides
 ************************************************/
.reveal .slides section.section-slide {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 0;
}
.reveal .slides section.section-slide .title {
    width: 100%;
    color: var(--secondary-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: left;
}
.reveal .slides section.section-slide .title:after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--primary-color);
    margin-top: 10px;
}