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

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

@property --opacity2 {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
}

html {height:100%}

body {
    
    background: black;
    
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
	overflow:hidden;
}

@keyframes sunrise {
    0% {--opacity0: 1; --opacity1: 0; --opacity2: 0}
    80% {--opacity0: 1; --opacity1: 1; --opacity2: 0}
    100% {--opacity0: 1; --opacity1: 1; --opacity2: 1}
}

@keyframes anim {
    from {top:0vh; opacity:1}
    to {top:40vh; opacity:0}
}

@keyframes fade {
    from {opacity:0.5}
    to {opacity:0}
}

a {color:white}

.thing {position:absolute; width:100%; text-align:center; color:white; font-family:"Arial"; font-style:bold; animation:anim 20s linear;}

    #circle {display:block; margin-left: auto; margin-right:auto;
        animation: circleFadeIn 15s; z-index:10; cursor:pointer;
    }
    
    #initialCanvas {position:absolute; display:block; left:50%; transform:translate(-50%,50%); margin-left: auto; margin-right:auto; opacity:0.5; z-index:1; cursor:pointer}

@keyframes circleFadeIn {
    0% {opacity:0}
    80% {opacity:0}
    100% {opacity:1}
}

    .circleExpand {display:block; position:absolute; margin-left: auto; margin-right:auto; z-index:-2}
    
    #poo {position:absolute; width:100%; z-index:-1}