#header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(#ffff00, #ffd700, #daa520);
}

.leftside {
  float: left;
  width: 25%;
  height: auto;
  margin: 2px;
  background-image: url('../img/americanflag.gif');
  background-size: contain;
  background-repeat: no-repeat;
}

.headercenter {
  width: 100%;
  margin: 1px;
}

.topcenter {
  width: 100%;
  height: 30%;
}

.topcenter p {
  margin-top: 2px;
  font-size: 12px;
  font-style: italic;
}

.middlecenter {
  width: 100%;
  height: 30%;
  text-align: center;
}

.middlecenter a {
  margin: 1px 2px;
  font-size: 12px;
  text-decoration: none;
  text-shadow: 1px 1px red;
}

.bottomcenter {
  width: 100%;
  height: 30%;
  text-align: center;
}

.bottomcenter p {
  margin-top: 1px;
  font-size: 8px;
}

.bottomcenter .datetime {
  font-size: 10px;
  margin: 0px 10px;
}

.login-status {
  text-align: center;
  font-size: 12px;
  font-family: arial;
  color: white;
  background: repeating-linear-gradient(-45deg, red 0%, purple 7.14%, rgb(255,69,0) 14.28%,
  rgb(148,0,211) 21.4%, black 28.56%, blue 35.7%, magenta 42.84%, red 50%);
  background-size: 600vw 600vw;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: slide 20s linear infinite forwards;
}
@keyframes slide {
  0%{50px
    background-position-x: 0;
  }
  100%{
    background-position-x: 600vw;
  }
}

.bottomcenter .time {
  font-size: 10px;
}

.rightside {
  float: right;
  width: 25%;
  height: auto;
  margin: 2px;
  background-image: url('../img/americanflag.gif');
  background-size: contain;
  background-repeat: no-repeat;
}

/* footer style */

#footer {
  position: relative;
  display: flex;
  padding: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  justify-content: center;
  background-image: linear-gradient(#daa520, #ffd700, #ffff00);
}

.footer-leftside {
  float: left;
  width: 25%;
  height: auto;
  margin: 2px;
  text-align: center;
  background-image: url('../img/americanflag.gif');
  background-size: contain;
  background-repeat: no-repeat;
}

.footercenter {
  width: 80%;
  margin: 1px;
}

.footer-topcenter {
  width: 100%;
  height: 30%;
}

.footer-topcenter p {
  margin-top: 1px;
  font-size: 12px;
  font-style: italic;
}

.footer-middlecenter {
  width: 100%;
  height: 30%;
  text-align: center;
}

.footer-middlecenter a {
  font-size: 12px;
  text-decoration: none;
  text-shadow: 1px 1px red;
}

.footer-bottomcenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 30%;
}

.footer-bottomcenter p {
  margin-top: 1px;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
}

.footer-rightside {
  float: right;
  width: 25%;
  height: auto;
  margin: 2px;
  background-image: url('../img/americanflag.gif');
  background-size: contain;
  background-repeat: no-repeat;
}

/*Here we style the Header for Desktop */

@media only screen and (min-width: 1000px) {

.leftside {
  width: 8%;
  margin: 10px;
}

.headercenter {
  width: 100%
}

.topcenter p {
  font-size: 16px;
}

.middlecenter a {
  margin: 5px 40px;
  font-size: 16px;
}

.bottomcenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bottomcenter p {
  margin-top: 5px;
}

.bottomcenter .datetime {
  display: flex;
  flex-direction: row;
  margin: 5px 10px;
  font-size: 16px;
}

.login-status {
  font-size: 18px;
}

.bottomcenter .time {
  font-size: 16px;
}

.rightside {
  width: 8%;
  margin: 10px;
}

/* footer style */

.footer-leftside {
  width: 8%;
  margin: 10px;
}

.footercenter {
  width: 100%;
  margin: 1px;
}

.footer-topcenter {
  width: 100%;
  height: 30%;
}

.footer-topcenter p {
  font-size: 16px;
}

.footer-middlecenter a {
  margin: 10px 40px;
  font-size: 16px;
}

.footer-bottomcenter p {
  margin-top: 1px;
  font-size: 12px;
}

.footer-rightside {
  width: 8%;
  margin: 10px;
}

}