.font-display {
  font-family: "Playfair Display", serif;
}
.font-red-hat-display {
  font-family: "Red Hat Display", sans-serif;
}
.font-handwriting {
  font-family: "Caveat", cursive;
}
body {
  font-family: "Red Hat Display", sans-serif;
}
.brown-color {
  color: #bc7847;
}
.navbar-toggler {
  border: none;
}
.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus {
  box-shadow: none;
}

.header-gradient-bg {
  background: linear-gradient(273deg, #ffedb4, #ffcf86);
  background-size: 400% 400%;
  min-height: 640px;
  animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.header-contacts-img {
  max-height: 320px;
}
.recipe-img {
  max-height: 500px;
}
@media screen and (max-width: 576px) {
  .recipe-img {
    max-height: 300px;
    display: block;
    margin: 0 auto;
  }
}
.header-home {
  background-image: url("/images/croissants-line-big.jpg");
  animation: animation-pattern 200s linear infinite;
  background-size: cover;
  min-height: 640px;
}
@keyframes animation-pattern {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.custom-gradient {
  background: linear-gradient(273deg, #d2e3fc, #fdfdff);
  background-size: 400% 400%;
  animation: blue-bg 5s ease infinite;
}

@keyframes blue-bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.wave-separator {
  height: 73px;
  margin: 25px 0px;
  position: relative;
  overflow: hidden;
}

.wave-1 {
  width: 100%;
  height: 71px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/images/wave-1.svg) 0 0 no-repeat;
  -webkit-animation: waverevert 40s cubic-bezier(0.36, 0.45, 0.63, 0.53)
    infinite;
  animation: waverevert 40s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  background-size: 4184px 71px;
}
.wave-2 {
  width: 100%;
  height: 71px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(/images/wave-2.svg) 0 0 no-repeat;
  -webkit-animation: wave 20s linear infinite;
  animation: wave 20s linear infinite;
  background-size: 4184px 71px;
}

@keyframes waverevert {
  0% {
    background-position: -2092px 0;
  }
  100% {
    background-position: 0px 0;
  }
}
.banner-wave-bottom {
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 55px;
  background: url(/images/white-wave-bottom.svg) 0 0 no-repeat;
  background-size: 4326px 55px;
  -webkit-animation: waveHeader 25s linear infinite;
  animation: waveHeader 25s linear infinite;
  z-index: 10;
  overflow: hidden;
}
.banner-wave-top {
  position: absolute;
  top: -15px;
  width: 100%;
  height: 55px;
  background: url(/images/white-wave-top.svg) 0 0 no-repeat;
  background-size: 4326px 55px;
  -webkit-animation: waveHeader 25s linear infinite;
  animation: waveHeader 25s linear infinite;
  z-index: 10;
}
@keyframes waveHeader {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2163px 0;
  }
}

.list-group-item {
  border: none !important;
}
.link {
  text-decoration: none;
  color: inherit;
  transition: color 250ms ease-in-out;
}
.link:hover {
  color: #bc7847;
}