@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@700&family=Lora:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@700;900&display=swap');
/* Import the fonts */
body {font-family: 'Lora', serif;}
.font-fair { font-family: 'Playfair Display', serif;font-weight: 900;letter-spacing: -1px;}

.main-nav {padding: 12px 0;display: flex;justify-content: space-between;align-items: center;background-color: #fff;}
.main-nav .logo {height: 30px;}
header.nav {border-bottom: 1px solid #aaa;}

.links {display: flex;justify-content: center;align-items: center;height: 100%;list-style: none;margin-bottom: 0;}
.links > div:hover {background-color: #f8f8f8;border-bottom: 1px solid #333;}
.links a {text-decoration: none;color: #222;padding: 10px 5px;}

.item-blog {display: flex;gap: 15px;align-items: center;margin: 15px 0;}
.item-blog img {width: 250px;}
.item-blog .details p {color: #555;}


.single-article h1 {font-weight: bold;font-size: 2rem;margin: 10px 0;margin-top: 20px;}
.single-article .thumbanil {margin-bottom: 20px;}
.single-article .thumbanil img {width: 100%;}
.single-article .thumbanil .description {font-style: oblique;margin-bottom: 5px;font-size: .8rem;margin-top: 3px;}
.single-article .content > p:first-of-type::first-letter {font-size: 3rem;float: left;line-height: 1;margin-right: 4px;}
.single-article h2 {font-size: 1.4rem;font-weight: bold;}
.single-article h3 {font-size: 1.2rem;font-weight: bold;}

.item-aside .aside-blog {display: flex;align-items: center;gap: 10px;margin-bottom: 10px;}
.item-aside .aside-blog img {width: 20%;}
.item-aside .aside-blog h4 {font-size: 1.1rem;font-weight: bold;}

.login {display: flex;justify-content: center;margin: 20px 0;}
.login h1 {font-weight: bold;font-size: 1.7rem;margin-bottom: 10px;}
.login form {width: 400px;}
.login .item {display: block;}
.login .item label {display: block;}
.login .item input {width: 100%;padding: 7px 10px;margin-bottom: 5px;margin-top: 3px;border: 1px solid #000;border-radius: 3px;}
.login input[type="submit"] {background: #000;color: #fff;width: 100%;padding: 9px;border-radius: 3px;border: none;margin-top: 15px;font-weight: bold;}






footer {text-align: center;padding: 10px;border-top: 1px solid #ddd;}


.title-line {display: flex;align-items: center;gap: 10px;font-weight: bold;margin-bottom: 7px;}
.title-line h2 {font-weight: bold;font-size: 1.4rem;}
.title-line .line {flex: 1;height: 1px; background: #bbb;}


.recipes .recipe img {width: 100%;aspect-ratio: .8;object-fit: cover;}
.recipes .recipe {text-align: center;margin-bottom: 15px;}
.recipes .recipe .name {font-weight: bold;font-family: 'Playfair Display', serif;margin-top: 10px;}
.breadcrumbs a {text-decoration: none;color: #000;}
.recipe a {text-decoration: none;color: #000;}

.recipe-card .second-card {position: relative;background-color: #fff;padding: 15px;margin-left: 50px;}
.recipe-card .second-card .details {margin-left: 50px;}
.recipe-card img.cover {position: absolute;left: -50px;width: 100px;height: 100px;border-radius: 50%;border: 3px solid #e9e9e9;object-fit: cover;}
.recipe-card .details .items {display: flex;justify-content: space-between;text-align: center;margin-bottom: 20px;}
.recipe-card .details .items img {width: 40px;}
.recipe-card .details .items h4 {font-size: .9rem;font-weight: bold;margin: 5px 0;}
.recipe-card .details .items p {margin: 0;}
.author-info {padding: 20px;background: #f5f4f0;text-align: center;border: 1px solid #e9e9e9;margin-bottom: 20px;position: relative;margin-top: 50px;}
.author-info img {width: 110px;aspect-ratio: .8;object-fit: cover;position: absolute;left: 15px;top: -50px;}
.author-info h4 {font-size: 1.1rem;font-weight: bold;margin-top: 5px;}
.author-info span {font-size: .9rem;color: #777;}
.author-info p {font-size: .95rem;margin-top: 90px;margin-bottom: 0;}
.author-info .author-details {position: absolute;left: calc(15px + 110px + 15px);text-align: left;}

.reader img {width: 100%;aspect-ratio: 0.9;object-fit: cover;}
.reader a {text-decoration: none;color: #000;}
.reader h4 {font-size: .9rem;font-weight: bold;margin-top: 7px;margin-bottom: 12px;text-align: center;}

.post-header {background-color: #f5f4f0;padding: 20px 0;margin-bottom: 30px;}
.post-header .breadcrumbs {font-weight: bold;color: #666;}
.post-header i {font-size: .7rem;}
.post-header h1 {margin: 10px 0;}
.post-header .publish {display: flex;align-items: center;gap: 10px;margin-top: 10px;}
.post-header .publish img {width: 39px;height: 38px;border-radius: 50%;border: 1px solid #eee;}
.post-header .date {font-size: .9rem;}
.post-header p {font-size: .8rem;font-style: italic;margin: 0;color: #666;}
.post-header .top-item {display: flex;text-align: center;margin-bottom: 10px;margin-top: 20px;}
.post-header .top-item > div:first-child {border-right: 1px solid #777;}
.post-header .top-item > div {width: 100%;}
.post-header .top-item .text {font-weight: bold;}
.post-header .btn-action {display: flex;align-items: center;gap: 5px;}
.post-header .btn-action button, .btn-action a  {all: unset; width: 100%;background-color: #e5cd6d;padding: 8px 10px;color: #000;white-space: nowrap;text-align: center;font-size: .8rem;line-height: 1.7;text-transform: uppercase;}
.post-header .btn-action a {background-color: #000;color: #fff;cursor: pointer;}
.post-header .btn-action button i {font-size: .8rem;margin-right: 4px;}

.also-like {margin: 10px 0;}
.also-like img {width: 100%;object-fit: cover;aspect-ratio: 1;}
.also-like .title {text-align: center;font-weight: bold;margin-top: 8px;font-size: .9rem;}
.also-like a {text-decoration: none;color: #000;}

.section-title {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  text-transform: uppercase;
}

.section-title span {
  padding: 0 10px;
  font-weight: bold;
  letter-spacing: 1px;
}

.section-title::before,
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #000;
}

.badges {
  width: 180px;
  height: 180px;
  background: #f4c542; /* yellow */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  right: 15px;top: 5px;
  clip-path: polygon(
    50% 0%, 60% 10%, 75% 5%, 80% 20%, 95% 25%, 90% 40%,
    100% 50%, 90% 60%, 95% 75%, 80% 80%, 75% 95%, 60% 90%,
    50% 100%, 40% 90%, 25% 95%, 20% 80%, 5% 75%, 10% 60%,
    0% 50%, 10% 40%, 5% 25%, 20% 20%, 25% 5%, 40% 10%
  );
}

.badges span {
  font-family: 'Georgia', serif;
  font-weight: bold;
  font-size: 12px;
  color: #333;
  line-height: 1.1;
}

.badges {
  width: 60px;
  height: 60px;
  background: #f4c542;
  border-radius: 50%;
  position: absolute;
}

.nav-top {background: #000;color: #fff;padding: 10px;width: 100%;font-size: .9rem;}
.nav-top > div {display: flex;justify-content: space-between;}
.nav-top .icons {display: flex;gap:15px}


.comments {margin-bottom: 30px;}
.comments textarea, .comments input {width: 100%;background-color: #f9f9f9;border: 1px solid #ccc;padding: 6px 10px;margin-top: 3px;margin-bottom: 15px;}
.comments button {background-color: #000;color: #fff;padding: 7px 30px;border: none;}

.category header {background-image: url(https://c8.alamy.com/comp/W74H7D/seamless-pattern-with-candies-cakes-sweets-ice-cream-and-desserts-in-doodle-style-hand-drawn-vector-illustrations-sweet-background-candies-background-W74H7D.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;}
.category header .bg {background-color: rgba(0, 0, 0, .7);padding: 40px 0;color: #fff;}
.category h1 {font-weight: bold;text-align: center;font-size: 1.8rem;}


@media (max-width: 768px) {

  .item-blog {display: block;;}
  .item-blog img {width: 100%;margin-bottom: 10px;}
  .single-article h1 {font-size: 1.7rem;}

  .recipe-card {margin-top: 50px;}
  .recipe-card .second-card {margin-left: 0;}
  .recipe-card img.cover {left: 50%;transform: translateX(-50%);top: -30px;}
  .recipe-card .second-card .details {margin: 0;padding-top: 60px;}
}

footer {margin-top: 50px;background: #f5f4f0;}