/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 #dashboard {
    font-family: 'Roboto', sans-serif;
    padding: 20px;
    background-color: #333333;
    color: #e0e0e0;
  }

  .group {
    /* display: flex; */
  }
  .h-group {
    display: flex;
  }

  .news-title {
    background-color: #404040;
    font-family: 'Montserrat', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
    flex-grow: 1;
  }

  .article-headline {
    color: #e0e0e0;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .article-summary {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
  } 

  .card {
    background-color: #404040;
    color: #e0e0e0;
  }

  .hide {
    display: none;
  }

  .count {
    background-color: #404040;
    font-family: 'Montserrat', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
  }

  .new {
    color: yellowgreen;
  }

  li {
    opacity: 1; /* Default visible state */
    transform: translateY(0); /* Default position */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
  }
  
  li.updated {
    opacity: 0; /* Briefly fade out */
    transform: translateY(20px); /* Shift down */
  }
  
  li.visible {
    opacity: 1; /* Fade back in */
    transform: translateY(0); /* Return to position */
  }

  .active {
    font-size: 56px;
  }