/* Mise en page générale */ 

body { background-color: lightblue;
       padding: 0px;
       margin: 0% 5%; } 

h1, h2 { background-color: lightseagreen; }

h1 { margin-bottom: 1em; }

h2 { margin-top: 1em; }

h3 { color: darkblue; }

h4 { color: blueviolet; }

/* Énoncés */ 
/* MediumSeaGreen, SteelBlue, MediumBlue */

.definition, .notation, .hypotheses, .lemme, .corollaire, .lemma, .theorem, .statement {
  border-left: 4px solid DodgerBlue;
  padding: 10px 15px;
  margin: 20px 0 0;
}

.rappel {
  border-left: 4px solid DodgerBlue;
  padding: 5px 10px;
  margin: 20px 0 0;
  font-size: 80%;
  background-color: CornflowerBlue;
}

.definition, .notation, .hypotheses {
  background-color: CornflowerBlue; 
}

.lemme, .corollaire, .lemma, .theorem, .statement {
  background-color: DeepSkyBlue;
}

.definition::before, .notation::before, .hypotheses::before, .lemme, .corollaire, .lemma::before, .theorem::before, .statement::before {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.definition::before { content: "Definition"; }
.notation::before { content: "Notation"; }
.lemme::before { content: "Lemme"; }
.corollaire::before { content: "Corollaire"; }
.lemma::before { content: "Lemma"; }
.theorem::before { content: "Theorem"; }
.statement::before { content: ""; }

.definition[data-title]::before { content: "Definition (" attr(data-title) ")"; }
.notation[data-title]::before { content: "Notation (" attr(data-title) ")"; }
.hypotheses[data-title]::before { content: "Hypotheses (" attr(data-title) ")"; }
.lemme[data-title]::before { content: "Lemme (" attr(data-title) ")"; }
.corollaire[data-title]::before { content: "Corollaire (" attr(data-title) ")"; }
.lemma[data-title]::before { content: "Lemma (" attr(data-title) ")"; }
.theorem[data-title]::before { content: "Theorem (" attr(data-title) ")"; }
.statement[data-title]::before { content: attr(data-title); }

p > br:last-child {
    display: none;
}

/* Bouttons de navigation */ 

.nav-buttons {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 5px;
    z-index: 1000;
}

.nav-buttons button {
    background-color: lightseagreen;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
}

.nav-buttons button:hover {
    background-color: lightslategrey;
}

.nav-buttons button:active {
    background-color: lightslategrey;
}