body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

h1 {
    color: #007C89;
}

a.icon_link {
    display: inline-block;
    margin-bottom: 1em;
}

a.icon_link > span.icon {
    width: 1.5em;
    height:1.5em;
    margin-right: 1em;
    vertical-align: bottom;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%; /*  Safari  */
    -khtml-background-size: 100% 100%; /*  Konqueror  */
    -moz-background-size: 100% 100%; /*  Firefox  */
}

span#google_play_icon {
    background-image: url(../img/google_play_borders.png);
}

a.icon_link:hover > span#google_play_icon {
    background-image: url(../img/google_play.png);
}

span#github_icon {
    background-image: url(../img/github_borders.png);
}

a.icon_link:hover > span#github_icon {
    background-image: url(../img/github.png);
}

span#stackoverflow_icon {
    background-image: url(../img/stackoverflow_borders.png);
}

a.icon_link:hover > span#stackoverflow_icon {
    background-image: url(../img/stackoverflow.png);
}

span#mail_icon {
    background-image: url(../img/mail_bw.png);
}

a.icon_link:hover > span#mail_icon {
    background-image: url(../img/mail.png);
}

span#gleitzeitrechner_icon {
    background-image: url(../img/gleitzeitrechner_borders.png);
}

a.icon_link:hover > span#gleitzeitrechner_icon {
    background-image: url(../img/gleitzeitrechner.png);
}

span#steffi_icon {
    background-image: url(../img/steffi_borders.png);
}

a.icon_link:hover > span#steffi_icon {
    background-image: url(../img/steffi.png);
}

span#concordia_icon {
    background-image: url(../img/concordia_borders.png);
}

a.icon_link:hover > span#concordia_icon {
    background-image: url(../img/concordia.png);
}

span#reversi_icon {
    background-image: url(../img/reversi_borders.png);
}

a.icon_link:hover > span#reversi_icon {
    background-image: url(../img/reversi.png);
}

span#playlist_generator_icon {
    background-image: url(../img/playlist_generator_icon_borders.png);
}

a.icon_link:hover > span#playlist_generator_icon {
    background-image: url(../img/playlist_generator_icon.png);
}

span#phrasomat_icon {
    background-image: url(../img/phrasomat_icon_borders.png);
}

a.icon_link:hover > span#phrasomat_icon {
    background-image: url(../img/phrasomat_icon.png);
}

h2 {
    margin-top: 2em;
}

a {
    color: #007C89;
}

nav.menu-main {
    text-align: center;
    margin-top: 2em;
}

nav.menu-main ul {
    padding: 0;
    margin: 0;
}

nav.menu-main li {
    list-style-type: none;
    text-align: center;
    display: inline-block;
    padding: 0.75em;
    font-size: 1.5em;
}

nav.menu-main a {
    text-decoration: none;
    color: #333;
}

nav.menu-main a:hover {
    text-shadow: 1px 1px 1px #ccc;
}

hr.divider {
    border: none;
    height: 0.5px;
    width: 80%;
    max-width: 50em;
    color: #333;
    background-color: #333;
    margin-top: 2em;
    margin-bottom: 5em;
}

div#container-main {
    width:80%;
    max-width: 50em;
    margin: 0 auto;
    margin-bottom: 20%;
    text-align: left;
}

div#container-main h1 {
    text-align: center;
    font-size: 44px;
}

div.container-project-inner {
    text-align: left;
}

input.button {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    color: #fff;
    background-color: #007C89;
    border: 1px solid #fff;
}

input.email {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    border: 1px solid #333;
}

::-moz-selection {
    color: #fff;
    background: #007C89;
}

::selection {
    color: #fff;
    background: #007C89;
}

label.accordion {
    background-color: #dadada;
    padding: 18px;
    width: 100%;
    display: block;
    font-size: 110%;
}

div.acc-minus {
    float: right;
    font-weight: bold;
}

div.acc-plus {
    float: right;
    font-weight: bold;
    display: none;
}

input.accordion {
    display: none;
}

input#acc-2021:checked ~ div#content-2021 {
    display: none;
}

input#acc-2022:checked ~ div#content-2022 {
    display: none;
}

input#acc-2023:checked ~ div#content-2023 {
    display: none;
}

input#acc-2024:checked ~ div#content-2024 {
    display: none;
}

input#acc-2025:checked ~ div#content-2025 {
    display: none;
}

input#acc-2021:checked ~ label div#acc-2021-minus {
    display:none;
}

input#acc-2021:checked ~ label div#acc-2021-plus {
    display:block;
}

input#acc-2022:checked ~ label div#acc-2022-minus {
    display:none;
}

input#acc-2022:checked ~ label div#acc-2022-plus {
    display:block;
}

input#acc-2023:checked ~ label div#acc-2023-minus {
    display:none;
}

input#acc-2023:checked ~ label div#acc-2023-plus {
    display:block;
}

input#acc-2024:checked ~ label div#acc-2024-minus {
    display:none;
}

input#acc-2024:checked ~ label div#acc-2024-plus {
    display:block;
}

input#acc-2025:checked ~ label div#acc-2025-minus {
    display:none;
}

input#acc-2025:checked ~ label div#acc-2025-plus {
    display:block;
}

@media (prefers-color-scheme: dark) {
    body, #onePlayerButton, #twoPlayerButton, input, textarea{
        color: #dadada;
        background-color: #18181f;
    }

    hr.divider {
        color: #dadada;
        background-color: #dadada;
    }

    a {
        color: #007C89
    }

    nav.menu-main a {
        color: #dadada;
    }

    input.button {
        border: 1px solid #18181f;
    }

    input.email {
        color: #dadada;
        border: 1px solid #dadada;
    }

    #playerLabel, #whiteLabel {
        color: #333;
        background-color: #fff;
    }

    label.accordion {
        background-color: #333;
    }
}