body
{font-family: Arial, Sans-serif}

h1, h2, h3, h4, h5, h6
{font-family: Arial, Sans-serif;
 color: darkGreen;
 background-color:BlanchedAlmond}

p 
{font-size: 1.2em;}

table
{vertical-align: top;
 border: 1px solid brown;
 border-collapse: collapse;
 cols: 2}

tr
{vertical-align: top;
 border: 1px solid brown}
 
tr:nth-child(odd) {background-color: beige;}
tr:nth-child(even) {background-color: lightgreen;}
 
 
tr:hover {background-color: orange;}

td
{vertical-align: top;
 padding: 5px;
 border: 1px solid brown}
 
.topnav {
  overflow: hidden;
  background-color: darkblue;
  position: fixed;
  bottom: 0;
  }

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-right:1px solid #bbb;}

.topnav a:hover {
  background-color: #ddd;
  color: black;}

.topnav a.active {
  background-color:orange;
  color: white;}

/* Container styles */
.scrolling-text-container {
    background-color: #eff5ff;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    top: 5px;}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
    }

/* Text styles */
.scrolling-text {
    display: flex;}

.scrolling-text-item {
    padding: 0 30px;}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-100%);}
}

@keyframes scroll-right {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0%);}