body{
    header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: navy;
a {
  text-decoration: none; 
  color: var(--c,white);
}

a:hover {
  text-decoration: underline;
  color: white;
}
}
footer {
background-color: navy;
text-align: center;
color: white;
padding: 10px;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
a {
  text-decoration: none; 
  color: var(--c,white);
}
}

}
/*Use this class when you want your content to be hidden*/
.BeforeScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  
  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  
  display: block;
}
.scroll-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.scroll-text {
display: inline-block;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}