<style>
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Itim', cursive;
  background-position: 10% 75%;
  background-size: cover;
}

header.boxed, #footer { background-color: rgba(244, 235, 218, 1); }
#sidebar-second { background-color: rgba(244, 235, 218, 1); }

.section { margin: 1rem auto; }

@media (min-width: 920px)
{
	#sidebar-second { margin-top: 5rem !important; }
}

#commentable,
.field--type-comment .comment,
.comment-form__title a {
  background-color: #F4EBDA;
}

.card {
  background-color: #F4EBDA;
  margin-top: 6rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: 30px;
  background: repeating-linear-gradient(#0000 0 calc(1.2rem - 1px),#78BAF3 0 1.2rem) right bottom /100% 100%,linear-gradient(#FFCECD 0 0) 30px 0/2px 100% #F4EBDA;
  background-repeat: no-repeat;
  font-size: 1.2rem;
  line-height: 1.2rem;
  transform: rotate(-4deg);
  padding: 1rem;
  clip-path: polygon(
            1% 2%,
            3.5% 0.1%,
            8.9% 2.7%,
            16.2% 1.2%,
            19.7% 0.8%,
            24.7% 2%,
            31.2% 0%,
            35.9% 2.3%,
            40.6% 0.5%,
            47.1% 1.8%,
            49.9% 1%,
            53.8% 2.5%,
            62.2% 0.4%,
            67.3% 1.2%,
            70.3% 0.3%,
            75.8% 1.4%,
            78.5% 1.7%,
            84% 2.6%,
            91.1% 0.5%,
            93.6% 2.4%,
            97.3% 0.3%,
            98.9% 6%,
            98.1% 11.4%,
            98.6% 15.5%,
            97.3% 17.8%,
            97.7% 27.4%,
            98.3% 28.5%,
            99.7% 34.1%,
            98.8% 41.9%,
            98.3% 45.7%,
            98.4% 50.9%,
            98.7% 57.4%,
            99.6% 60.4%,
            99.4% 66.6%,
            99.2% 69.5%,
            97.4% 77.1%,
            98.1% 82.3%,
            99.9% 83.5%,
            98.2% 91.5%,
            99.3% 95.3%,
            98% 98.6%,
            93.6% 97.4%,
            90.3% 98.3%,
            86.8% 98.3%,
            78.6% 98.5%,
            76.4% 99.2%,
            69.7% 99.8%,
            64.2% 99.3%,
            61.8% 99.2%,
            57.2% 98.1%,
            48.7% 98.3%,
            46.8% 99%,
            39.6% 98.9%,
            33.8% 97.3%,
            28.2% 99.4%,
            27% 98.3%,
            22.1% 98.6%,
            13.1% 97.1%,
            8.7% 99.3%,
            2.7% 97.4%,
            2% 98.2%,
            2.1% 94.3%,
            0.7% 90.5%,
            0.9% 86.3%,
            2.2% 78.2%,
            0.4% 76.7%,
            1.2% 72.1%,
            2% 64%,
            1.4% 59.8%,
            0.4% 57.3%,
            0.3% 49.1%,
            2.9% 44.7%,
            1.9% 41.3%,
            0.8% 35.7%,
            2.9% 31.3%,
            0.8% 24.9%,
            2.7% 20.5%,
            0.8% 17.4%,
            2.5% 8.6%,
            1.1% 5.5%
        );
}

@media (max-width: 500px) 
{
	.card { transform: rotate(0deg); }
}

.card_image {
  height: calc(13*1.2rem);
  padding: 1.2rem 1.2rem 0;
  position:relative;
  margin-top: 1rem;
}
.card_image:before,
.card_image:after{
  content: "";
  position: absolute;
  width: 20px;
  left: 81%;
  top: 0;
  height: 45px;
  background: #E8BD3F;
  transform: rotate(45deg);
  opacity: 0.9;
}

.card_image:after{
  transform: rotate(-45deg);
  top:auto;
  bottom:-22px;
  left: 21%;
}

.card_image img {
	width:100%;
	object-fit: cover;
	object-position: top;
	height: calc(13*1.15rem);
	border: solid 2px currentcolor;
}

.card_content {
  padding: 1.2rem;
  color: black;
}
.field--name-recipe-ingredient
{
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-left: 4rem;
}
.card_text p { 
	margin-left: 2rem; 
	margin-bottom: 0;
	margin-top: revert; 
}

h1 {
  font-family: 'Itim', cursive !important;
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
}
h2 {
  font-family: 'Itim', cursive !important;
  margin-bottom: 2.5rem;
  font-size: 2rem;
  font-weight: 600;
}

h3, .field--label {
  font-family: 'Itim', cursive !important;
  text-decoration: underline;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.field--name-recipe-instructions .field--label 
{
	display: block;
	margin-left: 2rem;
}
.field--name-recipe-ingredient .field--label 
{
	display: block;
	margin-left: -2rem;
}
#sidebar-second .well { background-color: #F4EBDA; }

</style>