:root {
    --bg-color: black;
    --text-color: #e7e7e7;
    --content-bg: #103;
    
    --link-color: #6314ca;
    --link-hover-bg: #6a24c5;
    --link-hover-text: white;
}

body {
    background: var(--bg-color) !important;
}

.reveal {
    color: var(--link-hover-bg) !important;
}

.reveal h1, .reveal h2 {
    color: var(--text-color) !important;
}
.reveal h1 {
    font-size: 1.5em !important;
}
.reveal h2 {
    font-size: 1.2em !important;
}

h1{
    margin: 0;
    font-size: 3rem;
    font-weight: 300;
}

h1 .bon{
    color: var(--link-color) !important;
}

.reveal ul {
    list-style: none;
    padding: 0;
}
.reveal ul li {
    font-size: 0.6em;
    background: var(--content-bg) !important;
    color: var(--text-color) !important;
    padding: 16px;
    margin: 16px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
.reveal ul li:hover,
.reveal a:hover {
    background: var(--link-hover-bg) !important;
    color: var(--link-hover-text) !important;
    transform: scale(1.05);
    border-radius: 8px;
}

.reveal li {
    padding: 8px;
}

.reveal p, a {
    font-size: 1em;
    color: var(--link-color) !important;
}

.fragment {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.fragment.visible {
    opacity: 1;
}

.reveal .controls {
    color: var(--bg-color) !important;
}

.navigate-left, .navigate-right {
    color: var(--link-color) !important;
}

.navigate-left:hover, .navigate-right:hover {
    color: var(--link-hover-bg) !important;
}

#nous {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#nous img {
    width: 240px;
    height: 240px;
    border-radius: 16px;
}