:root {
    --thermometer: 0%;
}
/* Structure */

.flex-container{
    display: flex;
    flex-direction: row;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}

#ex1, 
#ex2{
    background-color: royalblue;
}


/*animation */
.animate{
    position: relative;
    /* animation-name: run;
    animation-duration: 5s; */
    margin:100 auto;
    animation: run 8s steps(50) infinite;
}

/*displaying FDR */
#fdr{
    padding-left: 15px;
}


/*gradient*/
#gradient {
    width: 150px;
    height: 550px;
    margin: auto;
    background: linear-gradient(0deg, red var(--thermometer), white var(--thermometer) 100%);
    position: relative;
    animation-name: up;
    animation-duration: 3s;
    animation-iteration-count: 1;
}

/* key frames */
@keyframes up{
    0%{
        top:0px;
        down: 0px;
    }
    50%{
        down: 50px;
        animation-duration: 2s;
    }
    100%{
        down: 100px;
        animation-duration: 5s'
    }
}

@keyframes run{
    0%{
        top: 0px;
        left: 0px;
        animation-duration: 2s;
    }
    25%{
        left: 775px;
        animation-duration: 2s;
    }
    50%{
        left: 1600px;
        animation-duration: 2s;
    }
    75%{
        left: 775px;
        animation-duration: 2s;
    }
    100%{
        left: 0px;
        animation-duration: 2s;
    }
}

/*Large Resolution */
@media only screen and (min-width: 900px){
    #flex-container{
        flex: row;
    }
}