@font-face {
  font-family: "circular";
  src: url("../font/GT Flexa VAR Trial.woff2");
}

*,
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  cursor: pointer !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: red;
}

div {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  z-index: 10;
  text-align: center;
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%) rotate(0);
  width: auto;
  font-family: circular;
  hyphens: auto;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  margin: 15px;
  width: 98%;
  font-family: circular;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ////////////////////////Base Grid//////////////////////// */
.recipe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(0vw - 10px);
  height: calc(100vh - 20px);
  border: 10px solid white;
  transition: left 1s ease, width 1s ease;
}

.wrapper {
  height: 0;
  overflow: hidden;
  padding-top: 591.44px / 1127.34px * 100%;
}

@keyframes hoveranim {
  0% {
    filter: blur(9px);
  }

  50% {
    filter: blur(10px);
  }

  100% {
    filter: blur(9px);
  }
}
.c26:hover #s1,
.c26.hover #s1,
.c27:hover #s2,
.c27.hover #s2,
.c28:hover #s3,
.c28.hover #s3,
.c29:hover #s4,
.c29.hover #s4,
.c19:hover #t1,
.c19.hover #t1,
.c20:hover #t2,
.c20.hover #t2,
.c21:hover #t3,
.c21.hover #t3,
.c22:hover #t4,
.c22.hover #t4,
.c23:hover #t5,
.c23.hover #t5,
.c24:hover #t6,
.c24.hover #t6,
.c14:hover #ch1,
.c14.hover #ch1,
.c15:hover #ch2,
.c15.hover #ch2,
.c16:hover #ch3,
.c16.hover #ch3,
.c17:hover #ch4,
.c17.hover #ch4,
.c7:hover #m1,
.c7.hover #m1,
.c8:hover #m2,
.c8.hover #m2,
.c9:hover #m3,
.c9.hover #m3,
.c10:hover #m4,
.c10.hover #m4,
.c11:hover #m5,
.c11.hover #m5,
.c12:hover #m6,
.c12.hover #m6,
.c3:hover #small,
.c3.hover #small,
.c4:hover #medium,
.c4.hover #medium,
.c5:hover #large,
.c5.hover #large {
  filter: blur(10px);
  animation-name: hoveranim;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.recipeHalf {
  top: 0;
  width: 48%;
  margin-right: 1%;
  display: inline-grid;
}

.stick {
  position: sticky;
}

.col {
  background-color: red;
  color: white;
}

.colNeg {
  background-color: white;
  color: red;
}

.f {
  filter: contrast(10000000%);
}

.rNorm {
  font-size: 3vw;
  font-variation-settings: "wght" 200;
}
.rBig {
  font-size: 3vw;
  font-variation-settings: "wght" 600;
}

.rlargeN {
  font-size: 3vw;
  font-variation-settings: "wght" 200, "wdth" 200;
}

.rlargeB {
  font-size: 3vw;
  font-variation-settings: "wght" 600, "wdth" 200;
}

@keyframes recipe {
  0% {
    filter: blur(1px);
  }

  50% {
    filter: blur(2px);
  }

  100% {
    filter: blur(1px);
  }
}

@media screen and (max-width: 800px) {
  .tacosText {
    font-size: 4.2vw !important;
    text-align: left !important;
    width: 80% !important;
  }
}