custom.css

@import url("https://fonts.googleapis.com/css?family=Lora:400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700");
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css");

:root {
  --r-background-color: #0059b3;
  --r-main-font-size:  30px;
  --r-heading-font: Titillium Web,Geneva,Tahoma,sans-serif;
  --r-main-font: Titillium Web,Geneva,Tahoma,sans-serif;
}

.top {
  vertical-align: top;
}

.text {
    color:  var(--r-heading-color);
}

section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, 
section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
  color: #222; 
}

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  background: #222;
  background-color: #222;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODQ0cHgiIGhlaWdodD0iNjMzcHgiIHZpZXdCb3g9IjAgMCA4NDQgNjMzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MCAoNTQ5ODMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkdyb3VwPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iMC4wNSI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgMi4wMDAwMDApIiBmaWxsPSIjRTZFQ0YyIiBzdHJva2U9IiNFNkVDRjIiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjczLjI3MjI0MiwzNTcuMDk3OTc0IEw4OS4xODk2MTMzLDIwOC41MDEyOTYgTDI3My4yNzIyNDIsNTkuOTA0MzMzNCBDMjgwLjY2NTIxMyw1Mi41MTE1MDQgMjg0LjM2MTU1Nyw0NC4wMDk4MTQyIDI4NC4zNjE1NTcsMzQuMzk4OTc5OSBDMjg0LjM2MTU1NywyNC43ODgxNDU3IDI4MC42NjUyMTMsMTYuNjU2MDc2IDI3My4yNzIyNDIsMTAuMDAyNDg3IEMyNjYuNjE4NjUzLDMuMzQ4ODk4MDIgMjU4LjMwMTc3MywwLjAyMjE3NDQ5OCAyNDguMzIxMzE5LDAuMDIyMTc0NDk4IEMyMzguMzQwODY0LDAuMDIyMTc0NDk4IDIzMC4wMjM5ODQsMy4zNDg4OTgwMiAyMjMuMzcwMjUzLDEwLjAwMjQ4NyBMMTAuNDU1NDc3MSwxODEuODg2OTQgQzYuNzU5MDE5ODMsMTg1LjU4MzI4NCA0LjE3MTUzOTUsMTg5LjgzNDIgMi42OTI5NTY2LDE5NC42Mzk1NDYgQzEuMjE0MzczODUsMTk5LjQ0NTAzNCAwLjQ3NTA5MzYxLDIwNC4wNjU0MjggMC40NzUwOTM2MSwyMDguNTAxMjk2IEMwLjQ3NTA5MzYxLDIxMi45MzcwMjIgMS4yMTQzNzM4NSwyMTcuNTU3NDE2IDIuNjkyOTU2NiwyMjIuMzYyOTA0IEM0LjE3MTUzOTUsMjI3LjE2ODI1IDYuNzU5MDE5ODMsMjMxLjQxOTE2NiAxMC40NTU0NzcxLDIzNS4xMTU2NTIgTDIyMy4zNzAyNTMsNDA2Ljk5OTk2MyBDMjMwLjAyMzk4NCw0MTMuNjUzNTUyIDIzOC4zNDA4NjQsNDE2Ljk4MDQxNyAyNDguMzIxMzE5LDQxNi45ODA0MTcgQzI1OC4zMDE3NzMsNDE2Ljk4MDQxNyAyNjYuNjE4NjUzLDQxMy42NTM1NTIgMjczLjI3MjI0Miw0MDYuOTk5OTYzIEMyODAuNjY1MjEzLDQwMC4zNDYzNzQgMjg0LjM2MTU1NywzOTIuMDI5NDk0IDI4NC4zNjE1NTcsMzgyLjA0OTA0IEMyODQuMzYxNTU3LDM3Mi4wNjg1ODUgMjgwLjY2NTIxMywzNjMuNzUxNzA1IDI3My4yNzIyNDIsMzU3LjA5Nzk3NCBaIiBpZD0iRmlsbC0xIiBzdHJva2Utd2lkdGg9IjMiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03NjEuNzc3MjEsMzk3LjI1MzY4MSBDNzU5LjU3MjUxNiwzOTYuMTUxMzUyIDc1Ny4zMjE5NjYsMzk1Ljg3NTc1MiA3NTUuMDI1NDE4LDM5Ni40MjY5NTIgQzc1Mi43Mjg5MDUsMzk2Ljk3ODExNiA3NTAuOTM3NjMsMzk4LjM1NjAxIDc0OS42NTE1OTEsNDAwLjU2MDY2OCBMNjM5LjQxODY5MSw2MTIuNzU4OTk5IEM2MzguMTMyNjE3LDYxNC45NjM2NjcgNjM3Ljc2NTE2Myw2MTcuMzA2MDk0IDYzOC4zMTYzNjIsNjE5Ljc4NjM0OCBDNjM4Ljg2NzUyNyw2MjIuMjY2NTk5IDY0MC4zMzcyNzUsNjIzLjg3NDE0NiA2NDIuNzI1Njc4LDYyNC42MDkwMzYgQzY0NS40ODE1MDEsNjI1LjUyNzY0OCA2NDcuODY5ODY5LDYyNS43NTcyOTcgNjQ5Ljg5MDc4Miw2MjUuMjk3OTkxIEM2NTEuOTExNzMsNjI0LjgzODY4NSA2NTMuNDczMzY4LDYyMy41OTg1NzcgNjU0LjU3NTY5Nyw2MjEuNTc3NjMxIEw3NjQuODA4NTk3LDQwOS4xMDM3IEM3NjYuMDk0NjcxLDQwNy4wODI3ODcgNzY2LjQxNjE2Myw0MDQuOTI0MDU2IDc2NS43NzMxNDMsNDAyLjYyNzU0MyBDNzY1LjEzMDA4OSw0MDAuMzMwOTk1IDc2My43OTgxMjMsMzk4LjUzOTc1NSA3NjEuNzc3MjEsMzk3LjI1MzY4MSBaIiBpZD0iUGF0aCIgc3Ryb2tlLXdpZHRoPSIxMCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTgzNC4zNzE5NDEsNTA2LjgyNjA2NCBMNzgxLjI2NTU1OCw0NjMuOTUzNzA2IEM3NzkuNjA1OTQ4LDQ2Mi4yOTQxMzIgNzc3LjUzMTUwNyw0NjEuNDY0MzYyIDc3NS4wNDIxMjcsNDYxLjQ2NDM2MiBDNzcyLjU1Mjc0OCw0NjEuNDY0MzYyIDc3MC40NzgzMDYsNDYyLjI5NDEzMiA3NjguODE4NzMyLDQ2My45NTM3MDYgQzc2Ni45NzQ3MzcsNDY1LjYxMzI4MSA3NjYuMDUyNzc0LDQ2Ny42NDE2MjYgNzY2LjA1Mjc3NCw0NzAuMDM4ODEzIEM3NjYuMDUyNzc0LDQ3Mi40MzU5OTkgNzY2Ljk3NDczNyw0NzQuNTU2NTM3IDc2OC44MTg3MzIsNDc2LjQwMDQ5NyBMODE0LjczMzYyNSw1MTMuNDY0MzYyIEw3NjguODE4NzMyLDU1MC41MjgxNTcgQzc2Ni45NzQ3MzcsNTUyLjM3MjE1MiA3NjYuMDUyNzc0LDU1NC40OTI2OSA3NjYuMDUyNzc0LDU1Ni44ODk4NzYgQzc2Ni4wNTI3NzQsNTU5LjI4NzA2MyA3NjYuOTc0NzM3LDU2MS4zMTU0MDggNzY4LjgxODczMiw1NjIuOTc0OTgzIEM3NzAuNDc4MzA2LDU2NC42MzQ1NTcgNzcyLjU1Mjc0OCw1NjUuNDY0MzYyIDc3NS4wNDIxMjcsNTY1LjQ2NDM2MiBDNzc3LjUzMTUwNyw1NjUuNDY0MzYyIDc3OS42MDU5NDgsNTY0LjYzNDU1NyA3ODEuMjY1NTU4LDU2Mi45NzQ5ODMgTDgzNC4zNzE5NDEsNTIwLjEwMjY2IEM4MzUuMjkzOTAzLDUxOS4xODA2NjIgODM1LjkzOTI4Nyw1MTguMTIwMzc2IDgzNi4zMDgwOTMsNTE2LjkyMTggQzgzNi42NzY5LDUxNS43MjMxODkgODM2Ljg2MTI4NSw1MTQuNTcwNzQ1IDgzNi44NjEyODUsNTEzLjQ2NDM2MiBDODM2Ljg2MTI4NSw1MTIuMzU3OTQ0IDgzNi42NzY5LDUxMS4yMDU1IDgzNi4zMDgwOTMsNTEwLjAwNjg4OSBDODM1LjkzOTI4Nyw1MDguODA4MzEzIDgzNS4yOTM5MDMsNTA3Ljc0ODAyNiA4MzQuMzcxOTQxLDUwNi44MjYwNjQgWiIgaWQ9IlBhdGgiIHN0cm9rZS13aWR0aD0iMTAiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") !important;
  background-size: 100%; 
}

.reveal {
  font-size: 38px;
  font-weight: normal;
  color: #fff; 
}

::selection {
  color: #fff;
  background: #bee4fd;
  text-shadow: none; }

.reveal .slides > section,
.reveal .slides > section > section {
  line-height: 1.3;
  font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 2.1em; }

.reveal h2 {
  font-size: 1.4em; }

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

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: none; }

#prioFix .reveal .slides h1 + h2 {
  padding-top: 0;
  padding-left: 0;
  padding-right: 6%;
  text-align: left;
  border-bottom: none;
}

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal q,
.reveal blockquote {
  quotes: none; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  /*width: 90%;*/
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); 
}

.reveal code {
  font-family: monospace; 
}

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 600px;
  word-wrap: normal; }

.reveal tt, .reveal code, .reveal pre {
  line-height: 1.3em;
}

.reveal tt, .reveal :not(pre) > code {
  font-size: 100%;
  color: #42affa;
}

.reveal h1 tt, .reveal h2 tt {
  font-size: 110%;
}

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super; }

.reveal sub {
  vertical-align: sub; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  text-decoration: none;
  -webkit-transition: color 0.15s ease;
  -moz-transition: color 0.15s ease;
  transition: color 0.15s ease; }

.reveal a:hover {
  color: #b10142;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #068de9; }

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
  margin: 15px 0px;
  background: rgba(255, 255, 255, 0.12);
  border: 4px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 
}

.reveal section img.plain {
  border: 0;
  box-shadow: none; }

.reveal a img {
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear; }

.reveal a:hover img {
  background: rgba(255, 255, 255, 0.2);
  border-color: #42affa;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
  border-right-color: #b10142; }

.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
  border-left-color: #b10142; }

.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
  border-bottom-color: #b10142; }

.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
  border-top-color: #b10142; }

.reveal .controls .navigate-left.enabled:hover {
  border-right-color: #76002C; }

.reveal .controls .navigate-right.enabled:hover {
  border-left-color: #76002C; }

.reveal .controls .navigate-up.enabled:hover {
  border-bottom-color: #76002C; }

.reveal .controls .navigate-down.enabled:hover {
  border-top-color: #76002C; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2); }

.reveal .progress span {
  background: #b10142;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }


/**********************************************
 * DEVOXX FRANCE CHART 1
 **********************************************/
code, .slides .code {
  font-size: 0.6em; 
}

mark {
  opacity: 0.2;
  background-color: #3f3f3f; }

html body {
  background-image:linear-gradient(#380B4C,#140223); }

html.topbanner body {
  background-image:linear-gradient(#140223, #380B4C); }

html.rightbanner body {
  background-image:linear-gradient(to left, #140223, #380B4C); }


/* main text */
.slides, .reveal .slide-number {
  text-transform: none; 
}


/* main title */
.slides h1, .slides h2, .slides h3, .slides h4, .slides .title {
  text-transform: none; 
}

.slides h2 {
  border-bottom: solid 10px #750e29;
  text-align: center;
  padding-bottom: 0.1em; }

.slides h3 {
  background-color: #c11e53;
  color: white;
  text-align: left;
  padding-left: 4%;
  padding-right: 4%; }

.slides h4 {
  text-align: center;
  padding-left: 4%;
  padding-right: 4%; }

.slides section p, .slides section ul, .slides section i {
  padding-left: 6%;
  padding-right: 6%; }


html.intro .reveal .slides section h1, html.intro .reveal .slides section h2 {
  padding-top: 12%;
  padding-left: 0;
  padding-right: 6%;
  text-align: left;
  border-bottom: none; }

html.intro .reveal .slides section p {
  text-align: left;
  margin-left: 12%;
  margin-right: 12%; }


html.content .slides section h1 {
  top: 0%; }


.reveal .slide-number {
  left: 50%;
  bottom: 0.5em;
  width: 4em;
  text-align: center; 
}

.reveal section img {
  border: none; }

.reveal .slides {
    text-align: left; }



/* flash slides */
html.flash h1 {
  font-size: 2em;
  margin-top: 20%;
  text-align: center; }


/* full image slide */
html.fullimg .footer {
  z-index: 100;
  background-image: none; }


/* light slide */
html.light .footer p {
  color: black; }


.slides .main {
  color: #2a013b; }

.slides .secondary {
  color: #b10142; }

.slides .third {
  color: #eeeeee; }

.slides .fourth {
  color: #10001a; }

.reveal .slides li.fragment.overlay-previous {
  position: relative;
  top: -1.3em;
}

.reveal pre code samp {
  font-style: italic;
  color: #999;
}

.reveal p[lang="en"], .reveal span[lang="en"], .reveal h3[lang="en"] {
  font-style: italic;
}

.reveal blockquote {
  padding-left: 1em;
  margin-bottom: 1em;
}

.reveal blockquote::before {
  position: absolute;
  left: -0.3em;
  top: -0.4em;
  opacity: 0.5;
  font-size: 3em;
  color: gray;
  content: '“';
}

.reveal blockquote::after {
  position: absolute;
  right: -0.15em;
  top: 100%;
  margin-top: -0.45em;
  opacity: 0.5;
  font-size: 3em;
  color: gray;
  content: '”';
}

table.compact { font-size: 90%; }

.reveal .slides section footer {
  margin-top: 1em;
  text-align: center;
  font-size: 0.8em;
  color: silver;
}

.reveal .translucent {
  background: rgba(0, 0, 0, 0.7);
  /*text-shadow: 2px -2px black, 2px 2px black, -2px 2px black, -2px -2px black;*/
}

.reveal acronym {
  cursor: help;
  border-bottom: 0.05em dotted #444;
}

.reveal section .breathing { margin: 1em 0; }

b.wrong, b.right {
  font-weight: normal;
  padding: 0.1em 0.5em 0.1em 0; border-radius: 0.5em;
}
b.wrong:empty, b.right:empty { padding-left: 0.5em; }
b.wrong { background: #fdd; }
b.wrong::after {
  content: " ✖ KO";
  font-weight: bold;
  color: #b00;
}

b.right { background: #dfd; }
b.right::after {
  content: " ✔ OK";
  font-weight: bold;
  color: #090;
}

.reveal code u, b.hl {
  background: #fe9; padding: 0.1em 0.3em; border-radius: 0.5em;
  text-decoration: none;
}

h2[data-irl]::after {
  position: absolute;
  right: 0;
  top: 0;
  content: 'IRL';
  color: black;
  font-size: 80%;
  background-color: #b10142;
  color: white;
  padding: 0.1em 0.2em;
  transform: rotate(-30deg);
}

.footer-icon {
    zoom: 0.3;
    -ms-zoom: 0.3;
    -webkit-zoom: 0.3;
    -moz-transform:  scale(0.3,0.3);
    -moz-transform-origin: left center;
}

[hidden] {
  display: inherit !important;
}