@keyframes DayAnim {
    from {
        opacity: 0;
        background-size: 400% 400%;
    }
    to {
        opacity: 1;
        background-size: 100% 100%;
    }
}


.MusicButton {
    position: absolute;
    top: 10%;
    height: 100px;
    width: 100px;
    background-image: url("Pictures/MusicIcon.png");
    background-color: transparent;
    background-size: contain;
    border-color: transparent;
    
}

.header {
    position: absolute;
    left : 50%;
    top: 30%;
    transform: translate(-50%,-50%);
    font-size: 100px;
    opacity: 0.7;
    color: white;
    text-shadow:  0 10px 10px rgb(255, 255, 255);

}




.timetext {
    position: absolute;
    left : 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
    opacity: 0.7;
    color: white;
        text-shadow:  0 10px 10px rgba(255, 255, 255, 0.947);
}


.sand {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translate(-50%,-50%);

    border: 20px solid transparent;
    border-radius: 15px;
    height: 75px;
    width: 2500px;
    padding: 10px;
    margin: 20px;


    z-index: 1;
    background-image: url("Pictures/sandtexture.png");
    background-position: center;
    background-color: transparent;
}

.sky {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);

    border: 20px solid grey;
    border-radius: 15px;
    height: 5px;
    width: 2500px;
    padding: 10px;
    margin: 10px;
    background-image: linear-gradient(white,grey);
    opacity: 0.3;
    z-index: -1;
}





body {
    background-image: linear-gradient(to top,yellow,orange,red);
    background-repeat: no-repeat;
    overflow: hidden; 
}

body.night {
     background-image: linear-gradient(to top,rgba(0,0,255,0.8),rgba(128, 0, 128,0.8),rgba(0,0,128,0.8)),url('stars.png');
    background-size: cover;
    background-position: center;

}

body.afternoon {
    background-image: linear-gradient(to top,yellow,orange,red,Purple);
}

body.morning {
    background-image: linear-gradient(to top,orange,Teal,Cyan);

}

body.DayAnim {
    animation: DayAnim 5s ease forwards;
}


.sun {
    position: absolute;
    bottom: -150px;         /* half of 500px height */
    left: 50%;
    transform: translateX(-50%);
    
    height: 500px;
    width: 500px;
    border-radius: 50%;
    background: linear-gradient(yellow, orange,red);
}


.sun.morning {
    background-image: linear-gradient(to top,orange,yellow);
}

.sun.afternoon {
    background-image: linear-gradient(to top,yellow,orange,red);
}

.sun.night {
    background-image: linear-gradient(to top,white,purple);

}