body {
    font-family: 'Avenir Next LT Pro', 'Nunito', sans-serif;
    margin: 0;
    background-color: var(--clr-background);
    color: var(--clr-gray);
    font-size: var(--font-size);
    transition: all 0.2s linear;
}

:root {
    --clr-background: #E6E3DF;
    --clr-base: #ffffff;
    --clr-primary: #DA291C;
    --clr-gray: #000000;
    --clr-text: #3c3c3b;
    --clr-button: #DA291C;
    --clr-button_text: #DA291C;
    --clr-button_icon: #DA291C;
    transition: all 0.2s linear;
}

.dark-mode {
    --clr-background: #222221;
    --clr-base: #121212;
    --clr-primary: #E6e3df;
    --clr-gray: #E6e3df;
    --clr-text: #ffffff;
    --clr-button: #222221;
    --clr-button_text: #ffffff;
    --clr-button_icon: #222221;
    transition: all 0.2s linear;
}

.back_button_inner {
    fill: var(--clr-button_text) !important;
    transition: all 0.2s linear;
}

.logo_inner {
    fill: var(--clr-button_text);
    transition: all 0.2s linear;
}

#theme_container {
    width: auto;
    height: auto;
}

.author_mastercontainer {
    background-color: var(--clr-base);
    transition: all 0.2s linear;
}

.author_top,
.author_container {
    color: var(--clr-text);
    transition: all 0.2s linear;
}

#description {
    color: var(--clr-text);
}

#container {
    background-color: var(--clr-base);
}

#title {
    color: var(--clr-text);
}

#text, .text2 {
    color: var(--clr-text);
}

.wrapper-color-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.color-switch {
    width: 4em;
    height: 2em;
    border-radius: 10em;
    background: var(--clr-base);
    border: 2px solid var(--clr-primary);
    position: relative;
    cursor: pointer;
}

.color-switch-toggle {
    width: 1.6em;
    height: 1.6em;
    background: var(--clr-primary);
    position: relative;
    border-radius: 10em;
    top: 3px;
    left: 0.2em;
    cursor: pointer;
    transition: all 0.2s linear;
}

.color-switch::before {
    font-size: 12px;
    content: "Light";
    position: absolute;
    display: inline-block;
    width: 12em;
    left: -2.25em;
    top: 0.7em;
    transition: all 0.2s linear;
    z-index: 0;
}

.button, .button_os, .button_platti, .button_appli {
    background-color: var(--clr-button);
    border: 2px solid var(--clr-button);
}

.button:hover .button_icon_inner {
    fill: var(--clr-button_icon);
}

.button_os:hover .button_icon_inner {
    fill: var(--clr-button_icon);
}

.button_platti:hover .button_icon_inner {
    fill: var(--clr-button_icon);
}

.button_platti:hover .download_text {
    color: var(--clr-button_icon);
}

.button_appli:hover .button_icon_inner {
    fill: var(--clr-button_icon);
}

.button_appli:hover .download_text {
    color: var(--clr-button_icon);
}

.button_text {
    color: var(--clr-button_text);
}

#input-color-switch:checked~label .color-switch-toggle {
    transform: translatex(2em);
}

#input-color-switch:checked~.color-switch::before {
    content: "Dark";
    left: -4.4em;
    transition: all 0.2s linear;
}

#input-color-switch {
    display: none;
}