:root{
        --bgcolor: white;
    }
    
    body{
        background-color: var(--bgcolor);
    }
        
    #stories-container{
        display: flex;
        border: solid 2px #ccc;
        padding: 40px 0;
    }
    
    .story{
        border: 0;
        background-color: transparent;
        cursor: pointer;
        margin: 0 5px;
    }
    
    .story.profile {
        background: rgb(255,201,0);
        background: linear-gradient(36deg, rgb(255,201,0) 13%, rgb(255,0,95) 73%, rgb(255,9,237) 100%);
        padding: 5px;
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-size: cover;
    }
    
    .story.profile img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 0:
        margin: 0;
        border: solid 5px var(-bgcolor);
        
        }
        
    .story .title{
        text-align:center;
        padding: 5px 0;
        }
    
    .story.active .profile{
        animation-duration: 1s;
        animation-name: story;
        animation-iteration-count: infinite;
        }
        
    .story .profile.empty{
        background-color: #ccc;
        
    }
            
    
    @keyframes story{
        
        0%{
            background: linear-gradient(36deg, rgb(255,255,255) 0%, rgb(255,255,255) 0%, rgb(255,201,0) 28%, rgb(255,0,95) 73%, rgb(255,9,237) 100%);
            
            }
        10%{
            background: linear-gradient(72deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        20%{
            background: linear-gradient(108deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        30%{
            background: linear-gradient(144deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        40%{
            background: linear-gradient(180deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        50%{
            background: linear-gradient(216deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        60%{
            background: linear-gradient(252deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        70%{
            background: linear-gradient(288deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        80%{
            background: linear-gradient(324deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        90%{
            background: linear-gradient(360deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        100%{
            background: linear-gradient(396deg, rgb(255,255,255)0%,rgb(255,255,255)0%,rgb(255,201,0)28%, rgb(255,0,95)73%, rgb(255,9,237)100%);
            
            }
        
        }