@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

* {
  margin:0;
  padding:0;
  font-family: "IBM Plex Serif";
}

.canvas {
  background-color: white;
  display: flex;
}

.backsheet {
  position:absolute;
  width:100%;
  height: 100%;
  background-position: center;
  background-image: linear-gradient(0deg,
      rgba(255, 224, 201, 0.6) 0% 12.5%, rgba(255, 255, 255, 0.6) 12.5% 37.5%, rgba(188, 232, 245, 0.6) 37.5% 62.5%, rgba(255, 255, 255, 0.6) 62.5% 87.5%, rgba(255, 224, 201, 0.6) 87.5% 100%),
      linear-gradient(90deg,
        rgba(255, 224, 201, 0.6) 0% 12.5%, rgba(255, 255, 255, 0.6) 12.5% 37.5%, rgba(188, 232, 245, 0.6) 37.5% 62.5%, rgba(255, 255, 255, 0.6) 62.5% 87.5%, rgba(255, 224, 201, 0.6) 87.5% 100%
        );
  background-size: 80px 80px,80px 80px,80px 80px,80px 80px;
  z-index: 0;
}

.topsheet {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  height: auto;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color:white;
  display:flex;
  overflow: visible;
  flex-direction:column;
  border: 2px rgb(183, 229, 250) solid;
  padding-bottom: 70px;
}

.container {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}

.dailyspecial img {
  width: 280px;
  border: rgb(255, 198, 169) 6px solid;
  border-radius: 10px;
}

.dailyspecial {
  margin-left: 50px;
  margin-top: 30px;
  width:350px;
}

.dailyspecial h1 {
  font-size: 30px;
  padding-bottom: 10px;
  color: rgb(253, 173, 107);
  text-shadow: -0.7px 0.7px 0px rgb(225, 122, 81);
}

.dailyspecial h2 {
  font-size: 20px;
  font-weight:400;
  padding-top: 10px;
  padding-bottom: 10px;
}

.menutitle {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
  color: rgb(108, 195, 233);
  text-shadow: -0.7px 0.7px 0px rgb(87, 169, 201);
  letter-spacing: 5px;
  word-spacing: 10px;
  border-bottom: 2px dotted rgb(135, 198, 243);
  background-color:rgb(239, 251, 255);
  overflow: visible;
}

.dailyspecial h2 {
  color: rgb(152, 91, 45);
}

.menu {
  margin-top: 30px;
  margin-left: 50px;
  margin-right: 50px;
  width:300px;
  min-width: 200px;
}

.menu h1 {
  font-size: 25px;
  padding-bottom: 10px;
  text-align:center;
  color: rgb(109, 193, 226);
  border-bottom: 2px solid rgb(69, 152, 193);
}

.menu ul {
  margin-left: 40px;
  padding-top: 20px;
  color: rgb(125, 173, 203);
}

.tab1 {
  z-index:0;
  position:absolute;
  top: 64px;
  left: calc(40vw - 80px);
  padding-top:12px;
  padding-bottom:15px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px 10px 0 0;
  border-style:none;
  color:rgb(239, 49, 115);
  background-color: rgb(255, 212, 227);
  border-top: rgb(222, 130, 162) 1px solid;
  border-left:rgb(219, 128, 159) 1px solid;
  opacity: 0.6;
}

.tab1:hover {
  background-color: rgb(255, 200, 218);
  cursor:pointer;
}

.tab1:active {
  background-color: rgb(255, 183, 208);
}

.tab2 {
  z-index:0;
  position:absolute;
  top: 64px;
  left: calc(40vw + 40px);
  padding-top:12px;
  padding-bottom:15px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px 10px 0 0;
  border-style:none;
  color:rgb(71, 157, 28);
  background-color: rgb(213, 255, 186);
  border-top: rgb(158, 219, 122) 1px solid;
  border-left:rgb(158, 219, 122) 1px solid;
  opacity:0.6;
}

.tab2:hover {
  background-color: rgb(200, 246, 173);
  cursor:pointer;
}

.tab2:active {
  background-color: rgb(185, 255, 147);
}

button {
  font-weight:600;
  letter-spacing:0.6px;
}

button p {
  font-size: 11px;
}