@media (prefers-color-scheme: dark) {
    body {
        background: #040202;
        color: #fff;
    }

    #light-mode-users {
        display: none;
    }

    #light-mode-users * {
        color: #fff;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: #fafafa;
        color: #040202;
    }

    #light-mode-users {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 65px;
    }

    #light-mode-users * {
        color: #040202;
    }
}

body {
    margin: 0;
    margin-top: 50px;
    text-align: center;
    font-family: Arial, sans-serif;
}

#picture {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 65px;
}

#picture * {
    height: 300px;
    margin: 20px;
}

#textbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

#textbox * {
    height: 3px;
    margin: 20px;
}

#h4 {
    margin-top: 50px;
    margin-bottom: 10px;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

/*
    https://stackoverflow.com/questions/16782498/looping-animation-of-text-color-change-using-css3
    https://stackoverflow.com/questions/39725592/loop-div-background-color-through-all-rainbow-colors-gradually-css
*/

#rgb-text {
    -webkit-animation: color-change 15s infinite linear;
    -moz-animation: color-change 15s infinite linear;
    -o-animation: color-change 15s infinite linear;
    -ms-animation: color-change 15s infinite linear;
    animation: color-change 15s infinite linear;
}

@-webkit-keyframes color-change {
    0% {
        color: #FF0000;
    }
    11.1% {
        color: #FF0000;
    }
    22.2% {
        color: #FFA500;
    }
    33.3% {
        color: #FFFF00;
    }
    44.4% {
        color: #7FFF00;
    }
    55.5% {
        color: #00FFFF;
    }
    66.6% {
        color: #0000FF;
    }
    77.7% {
        color: #9932CC;
    }
    88.8% {
        color: #FF1493;
    }
    100% {
        color: #FF0000;
    }
}

@-moz-keyframes color-change {
    0% {
        color: #FF0000;
    }
    11.1% {
        color: #FF0000;
    }
    22.2% {
        color: #FFA500;
    }
    33.3% {
        color: #FFFF00;
    }
    44.4% {
        color: #7FFF00;
    }
    55.5% {
        color: #00FFFF;
    }
    66.6% {
        color: #0000FF;
    }
    77.7% {
        color: #9932CC;
    }
    88.8% {
        color: #FF1493;
    }
    100% {
        color: #FF0000;
    }
}

@-o-keyframes color-change {
    0% {
        color: #FF0000;
    }
    11.1% {
        color: #FF0000;
    }
    22.2% {
        color: #FFA500;
    }
    33.3% {
        color: #FFFF00;
    }
    44.4% {
        color: #7FFF00;
    }
    55.5% {
        color: #00FFFF;
    }
    66.6% {
        color: #0000FF;
    }
    77.7% {
        color: #9932CC;
    }
    88.8% {
        color: #FF1493;
    }
    100% {
        color: #FF0000;
    }
}

@-ms-keyframes color-change {
    0% {
        color: #FF0000;
    }
    11.1% {
        color: #FF0000;
    }
    22.2% {
        color: #FFA500;
    }
    33.3% {
        color: #FFFF00;
    }
    44.4% {
        color: #7FFF00;
    }
    55.5% {
        color: #00FFFF;
    }
    66.6% {
        color: #0000FF;
    }
    77.7% {
        color: #9932CC;
    }
    88.8% {
        color: #FF1493;
    }
    100% {
        color: #FF0000;
    }
}

@keyframes color-change {
    0% {
        color: #FF0000;
    }
    11.1% {
        color: #FF0000;
    }
    22.2% {
        color: #FFA500;
    }
    33.3% {
        color: #FFFF00;
    }
    44.4% {
        color: #7FFF00;
    }
    55.5% {
        color: #00FFFF;
    }
    66.6% {
        color: #0000FF;
    }
    77.7% {
        color: #9932CC;
    }
    88.8% {
        color: #FF1493;
    }
    100% {
        color: #FF0000;
    }
}

#rgb-text * {
    height: 35px;
    /*margin: 20px;*/
}