* {
    box-sizing: border-box;
}

:root {
    --color-background: #090811;
    --color-link: #704faa;
    --color-link-border: #3c2a5b;
    --color-text: #776595;
    --footer-height: 3rem;
    --footer-color-background: rgba(0, 0, 0, 0.5);
}

/*@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #320009;
        --color-text: #ff8ca1;
        --color-link-border: #8b3948;
        --color-link: #ff5473;
        --footer-color-background: rgba(0, 0, 0, 0.5);
    }
}*/

html {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: 'DM Sans', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

body {
    color: var(--color-text);
    margin: 0 auto;
    padding: 0;
}

a {
    border-bottom: 2px solid var(--color-link-border);
    color: var(--color-link);
    display: inline-block;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
}

a:hover {
    border-bottom: 2px dotted var(--color-link-border);
}

body {
    overflow: hidden;
}

.c-content {
    height: calc(100vh - var(--footer-height));
    padding-bottom: var(--footer-height);
    width: 100vw;
}

svg {
    color: rgb(252, 238, 197);
    display: block;
    overflow: unset;
}

.c-moon {
    left: -4vw;
    position: absolute;
    bottom: -3vh;
}

.c-moon svg {
    filter: drop-shadow(0px 45px 105px rgba(240, 212, 197, 0.9));
    height: 40vw;
    width: 40vw;
}

.c-star-1,
.c-star-2,
.c-star-3,
.c-star-4,
.c-star-5,
.c-star-6 {
    transition: opacity 0.3s ease;
}

.c-star-1:hover,
.c-star-1:focus,
.c-star-2:hover,
.c-star-2:focus,
.c-star-3:hover,
.c-star-3:focus,
.c-star-4:hover,
.c-star-4:focus,
.c-star-5:hover,
.c-star-5:focus,
.c-star-6:hover {
    opacity: 1;
}

.c-star-1 svg,
.c-star-2 svg,
.c-star-3 svg,
.c-star-4 svg,
.c-star-5 svg,
.c-star-6 svg {
    transition: filter 0.4s ease;
    will-change: transform;
}

.c-star-1 svg:hover,
.c-star-1 svg:focus,
.c-star-2 svg:hover,
.c-star-2 svg:focus,
.c-star-3 svg:hover,
.c-star-3 svg:focus,
.c-star-4 svg:hover,
.c-star-4 svg:focus,
.c-star-5 svg:hover,
.c-star-5 svg:focus,
.c-star-6 svg:hover,
.c-star-6 svg:focus {
    filter: drop-shadow(0px 10px 40px rgba(240, 212, 197, 0.9));
}

.c-star-1 svg {
    animation: shine 3s ease-in-out infinite;
    left: 29vw;
    top: 5vh;
    position: absolute;
    height: 12vw;
    width: 12vw;
}

.c-star-2 svg {
    animation: shine 4s ease-in-out infinite;
    right: 25vw;
    top: 15vh;
    position: absolute;
    height: 12vw;
    width: 12vw;
}

.c-star-3 svg {
    animation: shine 5s ease-in-out infinite;
    right: 9vw;
    top: 40vh;
    position: absolute;
    height: 8vw;
    width: 8vw;
}

.c-star-4 svg {
    animation: shine 4.5s ease-in-out infinite;
    right: 35vw;
    top: 64vh;
    position: absolute;
    height: 9vw;
    width: 9vw;
}

.c-star-5 svg {
    animation: shine 3.5s ease-in-out infinite;
    right: 7vw;
    bottom: 10vh;
    position: absolute;
    height: 9vw;
    width: 9vw;
}

.c-star-6 svg {
    animation: shine 5.5s ease-in-out infinite;
    left: 24vw;
    bottom: 36vh;
    position: absolute;
    height: 6vw;
    width: 6vw;
}

.c-footer {
    align-items: center;
    background-color: var(--footer-color-background);
    display: flex;
    font-size: 0.85rem;
    height: var(--footer-height);
    inset: auto 0 0 0;
    justify-content: center;
    padding: 1rem 1.5rem 1rem;
    position: fixed;
    width: 100%;
}

@keyframes shine {
    0% {
        opacity: 0.3;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
    70%,
    90% {
        opacity: 1;
        filter: drop-shadow(0px 10px 40px rgba(240, 212, 197, 0.9));
    }
    100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

@media (max-width: 800px) {
    .c-moon svg {
        height: 60vw;
        width: 60vw;
    }
}