/* CCS Document */

* {box-sizing:border-box;
}

html {
    width:100%;
    height:100%;
}

body {
    background-image: linear-gradient(45deg, rgb(0,0,255), rgb(255,0,0), rgb(255,150,0));
    background-size: 1500% 1500%;
    background-position:center;
    top:0;
    margin:0;
    background-repeat:repeat-y;
    overflow-y:auto;
    overflow-x:hidden;
    background-color:#048abf;
    animation: red 15s ease infinite;
}
}

.background__top {
    display:block;
    position:fixed;
    width: 100%;
    height: 100%;
    overflow:hidden;
}

/*
.bg__blue {
    display:block;
    position:relative;
    width:250%;
    height:250%;
    background-image:linear-gradient(45deg, rgba(0,0,255,0), rgba(0,0,255,.9), rgba(0,0,255,0));
    transition: rotate 5s ease infinite;
}


.bg__red {
    display:block;
    position:absolute;
    top:0px;
    width:250%;
    height:250%;
    background-image:linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,.9), rgba(255,0,0));
    z-index:1000;
    transition: scale 5s ease infinite;    
}


.bg__yellow {
    display:block;
    position:absolute;
    top:0px;
    width:250%;
    height:250%;
    background-image:linear-gradient(to left, rgba(255,150,0,0), rgba(255,150,0,.9), rgba(255,200,0,0));
    z-index:1000;
    transition: rotate 5s ease infinite;
}
*/

/*
@keyframes blue {
        0% {scale: 1}
        50% {rotate: 1 1 1 0deg}
        100% {background-position: 0,100}
    }
*/

@keyframes red {
        0% {background-position:0,100}
        50% {background-position:50,50}
        100% {background-position:100,0}
    }

/*
@keyframes yellow {
        0% {background-position: 50,0}
        50% {background-position: 100,50}
        100% {background-position: 50,100}
    }
*/