html {
  width: 100%;
  min-height: 100vh;
  height: auto;
  overflow: auto;
}

body {
    margin: 0;
    background-color: lightblue;
    text-align: center;
    font-family: monospace;
    width: 100%;
    min-height: 100vh;
    height:auto;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  height:auto;
  margin: 0;
  margin-left: 0;
}



/* sticky doesnt work for some ungodly reason */
.side {
  /* position: -webkit-sticky; /*Safari*/
  position: absolute;
  top: 50;
  float: left;
  min-width: 100px;
  max-width: 7%;
  margin-left: 7%;
}

/* CSS for button https://getcssscan.com/css-buttons-examples*/
.sideBtn {
  background-color: #fbeee0;
  border: 2px solid #422800;
  border-radius: 30px;
  box-shadow: #422800 4px 4px 0 0;
  color: #422800;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  transition: all 0.2s ease-in-out;
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));

  font-size: 16px;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  margin-bottom: 10px;
}

.sideBtn:hover {
  background-color: #fff;
  transform: translate(5px, 5px);
  box-shadow: 0px 0px 0 0;
  animation: ease-in 0.2s;
}

.sideBtn:active {
  box-shadow: #422800 2px 2px 0 0;
  transform: translate(2px, 2px);
}

.sideBtn:active {
  background: var(--color);
  color: #fff;
}

.footer {
  position: absolute;
  margin-bottom: 0;
  background-color: #000;
  color: #fff;
  width: 100%;
}

.menu{
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #373B44;

  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:#fbeee0;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 2px solid #422800;
  border-radius: 30px;
  display: inline-block;


  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 50%;
  margin: auto;
  margin-bottom: 50px;

  animation: ease-in-out 10s;

}
.menu:hover{
  border: 2.5px solid #422800;

}

.menutbl {
  margin: auto;
}
.cmt {
  margin: auto;
}
.cst {
  margin: auto;
}
.pkt {
  margin: auto;
}
.nlt {
  margin: auto;
}

.banner-container {
  max-width: 50%;
  position: relative;
  margin: auto;
  margin-top: 50px;
}
.banner-container:hover{
}

.mealTimes {
  font-size: 24px;
}

#time {
  background-color: #fbeee0;
  border: 2px solid #422800;
  border-radius: 30px;
  box-shadow: #422800 4px 4px 0 0;
  color: #422800;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  padding: 0 18px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  transition: all 0.2s ease-in-out;
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));

  font-size: 16px;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 50%;
  margin-bottom: 10px;
}
#time:hover {
  background-color: #fff;
  transform: translate(5px, 5px);
  box-shadow: 0px 0px 0 0;
  animation: ease-in 0.2s;
}