html {
  background-color: rgba(220,224,219,255);
}

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

.container {
  font-family: 'helmet';
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 100px 0.5fr 1fr 0.5fr 100px;
  justify-content: center;  
  height: 90vh;
  padding: 0;
}

.logo {
  justify-content: center;
  grid-row: 3 / span 1;
  grid-column: 3 / span 1;
  perspective: 100px;
 }

.logo img {
    width: 300px;
    margin: auto;
    display: block;
}

.logo img {
  transition: transform .1s ease-in-out;
}

.logo img:hover {
  transform: rotate(-20deg);
}

.link {
  background-color: #303832;
  color: rgba(249,247,240,255);
  padding: 3px 3px 1px 3px;
  font-family: monospace;
}

.link:hover {
  background-color: #d96132;
  color: rgba(249,247,240,255);
  padding: 3px 3px 1px 3px;
  font-family: monospace;
  font-style: italic;
}

a {
  text-decoration: none;
}

.tabletop {
  grid-row: 2 / span 1;
  grid-column: 3 / span 1;
   margin: auto;
  
}

.tablebottom {
  grid-row: 4 / span 1;
  grid-column: 3 / span 1;
   margin: auto;
  
}

.tableleft{
  grid-row: 3 / span 1;
  grid-column: 2 / span 1; 
  margin-left: 50%;
  text-align:right;
}

.tableright {
  grid-row: 3 / span 1;
  grid-column: 4 / span 1;
  margin-top: 50%;
  
}

.tablemoving {
  grid-row: 2 / span 3;
  grid-column: 2 / span 3;
}

.nav {
  grid-row: 4 / span 1;
  grid-column: 5 / span 1;
}

th,td {
    padding: 15px;
}

table {
    border-collapse: collapse;
    
    
}

table,th,td {
    border: none;
}