body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
}
td{
  border-width: 2px;
  border-style: dashed;
  width: 20%;
  position: center;
  text-align: center;
}
h2{
  font-style: normal;
}
tr {
  border-width: 2px;
  border-style: dashed;
}
img{
  width: 400px;
  height: 500px;
  position: center;
  text-align: center;
}

h1 {
  margin-top: 0px;
  text-align: center;
  position: center;
  font-size: 200px;
}
.parallax {
    background-image: url(foodWorld.png);
    height: 250px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: transparent;
  overflow: hidden;
  font-family: "Lucida Console", "Courier New", monospace;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  color: black;
  background-color: #3F5871;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #BDE2D9;
  color: black;
}
.parabg {
    background-color: transparent;
    transform: scale(1);
    background-size: cover;
    background-position: center;
    height: 130vh;
    color: black;
    background-color: #E3D883;
    height: 3000px
}
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

.bg {
  animation:slide 2s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, rgb(252, 68, 68) 50%, rgb(252, 156, 71) 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
html, body, canvas
  width 100%
  height 100%
  background #ddd

html, body
  display flex