/*main{
    padding:5vh 5vw;
    display:flex;
    flex-direction: column;
    background-color: #fff782;
}*/
.news-box{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-grow:2;
    border: 1px solid grey;
    overflow: hidden;
    background-color:white;
}

.news-box a, .news-box div{
    font-size: 5vh;
}

/* https://ryanmulligan.dev/blog/css-marquee/ */
.marquee{
    --gap: 0rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    padding 2em 0;
}
  
.marquee__content{
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 5s linear infinite;
    font-family:Arial, Helvetica, sans-serif
    font-size: 3rem;
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

.bottom-information{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-evenly;
}

.date{
    align-self: start;
}

.adress{
    align-self: end;
    flex-grow:2;
}

.date, .adress{
    margin: 3vh 3vw;
}

.adress span{
    display: block;
    text-align: right;
}


@media only screen and (max-width: 600px) {
    .news-box div{
        font-size: 1.5rem;
        padding: 0 3vw;

    }

    .marquee__content{
        animation: scroll 10s linear infinite;
      }
    
  }