@font-face {
  font-family: Roboto-Regular;
  src: url(Roboto-Regular.ttf);
}

body {
    background-color: #d7ffc5;
    background-blend-mode: color;
    font-family: Roboto-Regular; 
    padding: 5px 50px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
  flex: 1;
}

table :nth-child(3){
  width: 100px; 
}

tr:hover{
  background-color: beige;
  color: darkolivegreen;
}


ul.sidetable {
  list-style-type: none;
  padding: 0; 
  margin: 0 ; 
  overflow: hidden;
  background-color: red;
}

ul li.sidetable {
  float: left; 
}

ul li table {
  display: flex;
  background-color: aquamarine;
  border-radius: 10px;
}

.about-btn{
    color: blue;
    border-radius: 15%;
    padding: 0.5%;
    background: white;
}


nav ul {
  list-style-type: none; 
  padding: 0%;
  margin: 0;
  overflow: hidden;
  background-color: black;
}

nav ul li{
  float: left; 
}

nav ul li a {
  display: block;
  padding: 20px 20px;
  size: 15px;
  color: white;
  text-align: center;
  text-decoration: none;
}


nav ul li a.active {
    background-color: greenyellow;
    color: black;
}

nav ul li a:hover{
  color: black;
  background-color: #d7ffc5;
}



footer {
  display:block; 
  color: rgb(97, 158, 97);
}

footer div {
  background-color: black;
  border-radius: 5px;
}

footer div ul {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 20px;
  list-style-type: none;
  overflow: hidden;
  background-color: black;    
}

footer div ul li {  
  float: left; 
  display: block;
  padding: 10px 10px;
  flex: 1;

  color: white;
  text-align: center;
  text-decoration: none;
}