@property --background-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

@property --stars-url {
    syntax: '<url>';
    initial-value: url("stars1.png");
    inherits: false;
}

@keyframes fadeIn {
    50% {--background-opacity: 1}
}

@keyframes backgroundImageFlip {
    0% {--stars-url: url("stars1.png")}
    50% {--stars-url: url("stars2.png")}
}

html {
    --animation-time: 4s;
    animation: 
    var(--animation-time) fadeIn infinite , 
    calc(2 * var(--animation-time)) backgroundImageFlip infinite;
    animation-timing-function: steps(10, end);
    background-color: black;
    background-image: linear-gradient(rgba(0, 0, 0, var(--background-opacity)), rgba(0,0,0,var(--background-opacity))), var(--stars-url);
    height: 100%;
}

body {
    color: aliceblue;
    font-family: 'Times New Roman', Times, serif;
}

h1 {
    margin: auto;
    text-align: center;
}

a {
    color: aliceblue;
}

#pyramid {
    max-width: 100%;
    max-height: 50%;
    margin: auto;
    width: 700px;
    display: block;
}

marquee {
    padding: 0.5em;
    display: block;
    margin: auto;
}

@media screen and (width <= 400px) {

    #pyramid {
        width: 100%;
        max-width: 100%;
    }
}

#links {
    text-align: center;
    margin-top: 1em;
}