/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*FONTS*/
.doto {
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
      "ROND" 0;
}
/* aux classes */
.p15{
    padding: 15px;
}
body {
    background-color: #9056c2;
    color: white;
    font-family: Verdana;
    margin: 0;
    background: conic-gradient(
    #9056c2 90deg,
    #5d1999 90deg 180deg,
    #9056c2 180deg 270deg,
    #5d1999 270deg
  );
    background-repeat: repeat;
    background-size: 60px 60px;
    background-position: top left;
}
.content{
    display: flex;
    justify-content: center;
}
.main-container{
    display: flex;
    flex-direction: column;
    width: 1200px;
    
}
.rounded-box{
    border: 1px solid white;
    border-radius: 5px;
    margin-top: 15px;
    background-color: #5d1999;
    
}
.topbar{
    display: flex;
    flex-direction: row;
    border: 1px solid white;
    border-radius: 5px;
    background-color: #5d1999;
}
.article-container{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.video-container{
    display: flex;
    justify-content: center;
    gap: 15px;
    
}
.running-text-container{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}
.running-text{
    display: inline-block;
    font-size: 24px;
    color: lime;
    animation: scrollLeft 25s steps(500, end) infinite;
}
@keyframes scrollLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}