body {
    margin: 0;
    background-image: url("/images/bg-light.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        background-image: url("/images/bg-dark.jpg")
    }

    .content {
        color: white;
    }

    .link {
        color: cornflowerblue;
    }
}

.content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 7px;
}

.header {
    /* text-decoration: underline; */
}

.link {
    font-size: 24px;
    transition: 0.3s ease;
}

.link:hover {
    color: red;
}

.no-margin {
    margin: 0;
}

.text-center {
    text-align: center;
}

@keyframes anim-rainbow {
    0% {
        color: hsla(0deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(0deg 100% 50%));
    }
    16.67% {
        color: hsla(60deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(60deg 100% 50%));
    }
    33.33% {
        color: hsla(120deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(120deg 100% 50%));
    }
    50% {
        color: hsla(180deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(180deg 100% 50%));
    }
    66.67% {
        color: hsla(240deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(240deg 100% 50%));
    }
    83.33% {
        color: hsla(300deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(300deg 100% 50%));
    }
    100% {
        color: hsla(360deg 100% 50%);
        filter: drop-shadow(0 0 5px hsla(360deg 100% 50%));
    }
}

.rainbow {
    animation: 2s anim-rainbow infinite;
}