/* === TOUTES LES COULEURS, EN UN SEUL ENDROIT ! */
:root {
    --color1: #fff;
    --color2: #99f;
    --color3: #000;
}

* {
    transition:
        0.5s color,
        0.5s background-color;
}

html {
    background: var(--color1);
}

#main {
    background: var(--color2);
}

#sidebar {
    background: var(--color1);
}

#inneriframe {
    border: 8px var(--color1) solid;
}

#fonts-list li {
    color: var(--color3);
    transition: 0.3s filter;
    background: var(--color1);
    border: 1px solid var(--color2);
}

#fonts-list li:hover {
    filter: brightness(92%);
}

#home-button {
    color: var(--color1);
    border: solid var(--color2);
}

#home-menu {
    margin-right: 20px;
    margin-left: 20px;
}

.dropdown {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.dropdown a {
    color: var(--color3);
    text-decoration: none;
    background: var(--color1);
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px;
}

.dropdown a:hover {
    background: var(--color2);
    color: var(--color1);
}

.dropbtn {
    border-radius: 20px;
    color: var(--color3);
    background-color: var(--color1);
    border-color: var(--color3);
}
.dropbtn:hover,
.dropbtn:focus {
    background-color: var(--color3);
    color: var(--color1);
}

.dropdown-content {
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
    color: black;
}
.dropdown-content a:hover {
    background-color: #ddd;
}

#mezze {
    color: var(--color3);
}

#font-sample-text {
    color: black;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
    background: var(--color1);
    padding: 10px;
}

.filter-buttons {
    border-color: black;
    background: var(--color2);
}

.filter-buttons + div {
    border-color: black;
    background: var(--color1);
}

#search-field {
    background-color: var(--color1);
}

#filter-dropdown-button {
    background-color: var(--color2);
}

#collapse-button {
    color: black;
    background: var(--color2);
}

#collapse-button:hover {
    filter: brightness(110%);
}

/* FONT-INFO.CSS */

#font-info {
    background: var(--color2);
}

#font-info menu {
    background: var(--color2);
}

select {
    border-color: var(--color2);
    background: var(--color3);
}

#font-explain p {
    background-color: var(--color2);
}

#glyphContainer {
    background-color: var(--color2);
    color: var(--color2);
}

#glyphContainer span {
    background-color: var(--color1);
    border-color: var(--color2);
    transition: 0.15s;
}

#glyphContainer span:hover {
    background-color: var(--color2);
    color: var(--color1);
}

#topBtn {
    color: var(--color2);
}