///////////////variables/////////////////////////////////

$background_principal: #fcfafc;
$couleur_police_standard: #330033;
$couleur_liens: #660066;
$couleur_liens_hover: #eeaaee;
$couleur_champs_fond_form: white;
$text_titre: #fcfafc;
$couleur_titre_fond: #663366;
$font_sans_serif: sans-serif;

///////////////////////////////////////////////////////

body {
    font-style: $font_sans_serif;
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    form {
        border: 1px solid black;
        border-radius: 5px;
        padding: 10px;
        background-color: $background_principal;
        .icon-cross {
            font-size: 70%;
        }
    }
}
h1 {
    background-color: $couleur_titre_fond;
    text-align: center;
    color: $text_titre;
}
h4 {
    background-color: $couleur_titre_fond;
    color: $text_titre;
}
label {
    color: $couleur_police_standard;
}
nav {
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}

.expandable {
    visibility: collapse;
    background: #ddd;
}

#sport:checked ~ * .expandable {
    visibility: visible;
}

#sport:checked ~ #expand-btn {
    background-color: #ccc;
}

#culture:checked ~ * .expandable {
    visibility: visible;
}

#culture:checked ~ #expand-btn {
    background-color: #ccc;
}
footer {
    text-align: center;
    ul {
        text-align: left;
    }
}
p {
    color: $couleur_police_standard;
    text-align: center;
}
input {
    background-color: white;
}

a {
    text-decoration: none;
}
a:hover {
    color: $couleur_liens_hover;
    text-decoration: underline;
}
li {
    display: inline;

    justify-content: space-between;
    padding: 10px;
    text-decoration: none;
}