/* CSS files add styling rules to your content */
* {
  box-sizing:border-box;
}

@font-face {
  font-family: 'Sequel Semi';
  src: url('glitch-assets/Sequel 100 Wide 65.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sequel Bold';
  src: url('glitch-assets/Sequel 100 Wide 75.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sequel Regular';
  src: url('glitch-assets/Sequel 100 Wide 45.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sequel Medium';
  src: url('glitch-assets/Sequel 100 Wide 55.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hoves Regular';
  src: url('glitch-assets/TT Hoves Regular.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hoves Medium';
  src: url('glitch-assets/TT Hoves Medium.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hoves Semi';
  src: url('glitch-assets/TT Hoves DemiBold.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hoves Bold';
  src: url('glitch-assets/TT Hoves Bold.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta Regular';
  src: url('glitch-assets/Recoleta Regular.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta Medium';
  src: url('glitch-assets/Recoleta Medium.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta Semi';
  src: url('glitch-assets/Recoleta SemiBold.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta Alt Semi';
  src: url('glitch-assets/Recoleta Alt SemiBold.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta Bold';
  src: url('glitch-assets/Recoleta Bold.WOFF') format('woff');
  font-weight: normal;
  font-style: normal;
}



body {
  font-family: helvetica, arial, sans-serif;
  margin: 0 auto;
  background:#f3bfbb;

}

/* @media screen and (max-width: 600px) {
body {
   overflow-x:hidden;
  overflow-y:scroll;
  }
  } */

h1, h2, h3, h4, h5, h6, a, p, strong, ul, li, blockquote {
  -webkit-font-smoothing:antialiased;
  font-weight:normal;
}

h1 {
  font-style: italic;
/*   color: #373fff; */
  margin:0rem;
}

p, ul, li {
  font-family:'Hoves Regular';
}

h3, h4 {
  font-family:'Hoves Medium';
}

h2 {
  font-family:'Recoleta Medium';
}

.content p {
    line-height: 145%;
}

.main-content {
/*     background: #f3bfbb; */
    width: 75vw;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto;
  box-sizing:border-box;
      height: 100%;
    padding-bottom: 3rem;
}


@media screen and (max-width: 600px) {
.main-content {
      padding-left: .8rem;
    padding-right: .8rem;
  }
  }

@media screen and (max-width: 1200px) {
.main-content {
    width: 90vw;
}
}

@media screen and (max-width: 1024px) {
.main-content {
    width: 100%;
}
}

.content {
  margin-bottom:3rem;
}

.content.recipe-content {
    width: 40vw;
}

@media screen and (max-width: 1400px) {
  .content.recipe-content {
    width: 45vw;
}
}

@media screen and (max-width: 1200px) {
  .content.recipe-content {
    width: 65vw;
}
}

@media screen and (max-width: 1024px) {
  .content.recipe-content {
    width: 75vw;
}
}

@media screen and (max-width: 700px) {
  .content.recipe-content {
    width: 100%;
}
}

.content h5 {
    width: 2rem;
    height: 2rem;
    background: red;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    font-family: 'Recoleta Semi';
    color: #f3bfbb;
    font-size: 1.2rem;
      margin: 0rem;
    margin-bottom: 1rem;
    margin-top: 1.85rem;
}

.content h2 {
  color:red;
}

.deets {
    display: flex;
    /* border: 2px solid black; */
    width: 32vw;
    min-height: 6rem;
    height: auto;
    margin-top: 2rem;
}

@media screen and (max-width: 1200px) {
  .deets {
    width: 55vw;
}
}

@media screen and (max-width: 1024px) {
  .deets {
    width: 65vw;
}
}

@media screen and (max-width: 700px) {
  .deets {
    width: 100%;
}
}

.deet-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: center;
    flex-direction: column;
    width: 50%;
    border: 2px solid red;
    height: auto;
    padding: 1rem;
    /* margin-top: 2rem; */
}

@media screen and (max-width: 600px) {
  .deet-wrap {
    padding: 0rem;
  }
}

.deet-wrap:nth-of-type(1), .deet-wrap:nth-of-type(2) {
    border-right: 0px;
}

.deet-wrap  h4 {
    margin: .5rem;
    color:red;
}

.deet-wrap p {
    margin: 0rem;
}

.title.recipe-title {
    font-family: 'Sequel Medium';
    font-size: 2.7rem;
    padding-top: 2rem;
    color: red;
    width: 100%;
    margin-bottom: 3rem;
}

@media screen and (max-width: 1200px) {
 .title.recipe-title {
    font-size: 2.4rem;
}
}

@media screen and (max-width: 1024px) {
 .title.recipe-title {
    font-size: 2rem;
}
}

@media screen and (max-width: 800px) {
 .title.recipe-title {
    font-size: 1.8rem;
}
}

@media screen and (max-width: 600px) {
 .title.recipe-title {
    font-size: 1.4rem;
}
}

.ingredients {
/*     background: green; */
    width: 40vw;
    /* display: flex; */
    height: auto;
    margin-top: 2rem;
}

@media screen and (max-width: 1400px) {
.ingredients {
    width: 45vw;
}
}

@media screen and (max-width: 1200px) {
.ingredients {
    width: 65vw;
}
}

@media screen and (max-width: 1024px) {
.ingredients {
    width: 75vw;
}
}

@media screen and (max-width: 700px) {
.ingredients {
    width: 100%;
}
}



.ingredients h2 {
  color:red;
}

.ingredients-list-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 700px) {
  
  .ingredients-list-wrap {
    grid-template-columns: 1fr;
  }
   
}

.ingredients-category {
    padding: .5rem;
    margin-top: 1rem;
}

@media screen and (max-width: 600px) {
.ingredients-category {
  padding:.5rem;
  }
}

.ingredients h2 {
    margin: 0rem;
}

.ingredients h4 {
    margin: 0rem;
}

ul.ingredients-list {
    padding-left: 1.2rem;
    line-height: 152%;
    margin-top: .4rem;
}

.image-content.recipe-hero {
    width: 40vw;
    height: auto;
    transform: rotate(-2deg);
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
}


@media screen and (max-width: 1400px) {
  .image-content.recipe-hero {
    width: 45vw;
}
}

@media screen and (max-width: 1200px) {
  .image-content.recipe-hero {
    width: 65vw;
}
}

@media screen and (max-width: 1024px) {
  .image-content.recipe-hero {
    width: 75vw;
}
}

@media screen and (max-width: 700px) {
  .image-content.recipe-hero {
    width: 100%;
    overflow:hidden;
}
}

.image-content.recipe-hero img {
    width: 100%;
}

img.tags {
    position: absolute;
    top: 2vw;
    right: -5vw;
    width: 17rem !important;
    transform: rotate(7deg);
}

@media screen and (max-width: 700px) {
  img.tags {
    width: 12rem !important;
    right: 2vw;
}
}

.instructions {
    display: grid;
    border: 2px solid red;
    padding: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media screen and (max-width: 800px) {
.instructions {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
}

.instructions-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.2rem;
}

@media screen and (max-width: 800px) {
  .instructions-wrap {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.2rem;
}
}

.step {
    display: grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: center;
}

.step-image {
    width: 100%;
    padding: 0.6rem;
    box-sizing: border-box;
    padding-bottom: .7rem;
}
@media screen and (max-width: 800px) {
.step-image {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    padding-bottom: 1.2rem;
}
}



.step-image img {
    width: 100%;
  transform: rotate(0deg) !important;
}

p.step-instructions {
    font-size: .8rem;
    padding: .2rem;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

@media screen and (max-width: 800px) {
  p.step-instructions {
    font-size: 1rem;
    padding: .4rem;
}
}

.instructions h2 {
    align-self: center;
    justify-self: center;
    margin-top: 0rem;
    margin-bottom: .5rem;
    font-size: 1.4rem;
}

.products-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* grid-auto-rows: 1fr; */
    width: 100%;
    /* flex-wrap: wrap; */
    justify-content: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    align-items: flex-start;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

@media screen and (max-width: 1200px) {
.products-wrap {
    grid-template-columns: 1fr 1fr 1fr;
}
}

@media screen and (max-width: 800px) {
.products-wrap {
    grid-template-columns: 1fr 1fr;
}
}

.product-image {
    width: 100%;
    height: 15rem;
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    transform: rotate(-3deg);
    position: relative;
}

.product:nth-of-type(2) .product-image {
  transform: rotate(3deg);
}

.product:nth-of-type(3) .product-image {
  transform: rotate(-3deg);
}

.product:nth-of-type(4) .product-image {
  transform: rotate(1deg);
}

.ephemera {
    position: absolute;
    z-index: 0 !important;
    width: 70% !important;
    height: auto !important;
  align-self: center;
    justify-self: center;
}

.product-image img {
    width: auto;
    height: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    z-index: 1;
}

.product {
    width: 100%;
    /* background: red; */
    margin-right: 2rem;
    /* margin-top: 2rem; */
    position: relative;
}

.product-info {
    display: grid;
    grid-template-columns: 3fr 1fr;
    background: red;
    position: absolute;
    width: 100%;
    bottom: 1rem;
    transform: rotate(-2deg);
    padding: .3rem;
}

.product:nth-of-type(2) .product-info {
  transform: rotate(1deg);
}

.product:nth-of-type(3) .product-info {
  transform: rotate(-1deg);
}

.product:nth-of-type(4) .product-info {
  transform: rotate(2deg);
}



p.product-name {
    padding: 1rem;
    margin: 0rem;
    font-family: 'Recoleta Medium';
    color: #fff;
}

p.product-price {
    margin: 0rem;
    padding: 1.4rem;
    justify-self: center;
    justify-items: center;
    font-family: 'Recoleta Medium';
    color: red;
    /* grid-area: product-price; */
    justify-content: center;
    justify-self: center;
    align-self: center;
    background: #f3bfbb;
    border-radius: 2rem;
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
      font-size: 1.125rem;
}

.products-header {
  color:red;
}

a {
    color: red;
    font-family: 'Hoves Medium';
  transition:all .5s ease;
}

a:hover {
    color: #d01010;
    font-family: 'Hoves Medium';
  transition:all .5s ease;
}

hr {
    border: 1px solid red;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.recipe-content img:nth-of-type(1) {
    transform: rotate(-2deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(2) {
    transform: rotate(1deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(3) {
    transform: rotate(3deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(4) {
    transform: rotate(-3deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(5) {
    transform: rotate(1deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(5) {
    transform: rotate(-3deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(7) {
    transform: rotate(2deg);
  width:100%;
  padding:.4rem;
}

.recipe-content img:nth-of-type(8) {
    transform: rotate(-1deg);
  width:100%;
  padding:.4rem;
}