html, body { height: 100%;margin: 0;}
body{
    font-family: Verdana, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
} 
.topbar{
    background : #0f172a;
    color:white;
    padding: 16px;
    font-size: 32px;
    text-align: center;
}

/* colorful element placed inside the topbar */
.topbar .colorful {   
    animation: rgb 3s linear infinite;
}
@keyframes rgb {
  0%   { color: red; }
  16%  { color: orange; }
  33%  { color: yellow; }
  50%  { color: rgb(3, 255, 3); }
  66%  { color: cyan; }
  83%  { color: blue; }
  100% { color: red; }
}
.navbar{
    background : #1e293b;
    padding: 8px;
    text-align: center;
    font-style:italic;
}.navbar a {
  color: white;
  margin-right: 15px;
  text-decoration: none;
}
.navbar a:hover {
  text-decoration: underline;
  color: #ff9800;
}
.navbar .chosen{
    color: #ffffff;
    margin-right: 15px;
  text-decoration: underlinee;
}
.footer{
    background : #1e293b;
    padding: 8px;
    text-align: center;
    font-style:italic;
}.footer a {
  color: white;
  margin-right: 15px;
  text-decoration: none;
}
.content {
  background: white;
  padding: 30px;
  flex:1;
}
.center{
    text-align: center;
    align-items: center;
}
.logbox{
    text-align: left;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    padding-left:350px ;
    font-family: monospace;
}