* {
    margin: 0;
    padding: 0;
  }
  .jokes-content {
   max-width: 1290px;
   margin-inline: auto;
}
  .jokes-section {
    height: 660px;
	background-image: url("../assets/jokes.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .joke-content-gray{
    background-color: transparent;
    display: flex;
    align-items: baseline;
    gap: 2rem;
    padding: 1rem;
  }
  .joke-content{
    background-color: rgba(20, 14, 62, 0.05);
    border-radius:10px;
  }
  .jokes-container {
    height: inherit;
    width: inherit;
    max-width: 1290px;
    margin-inline: auto;
    padding: 2rem 0rem;
  }
  .right-jokes-container-row{
  background:none;
  }
  .fa-heart{
    content: "\f004";
    font-family: FontAwesome;
    font-style: normal;
    padding: 1rem;
    margin-top: -0.1rem;
    color: rgb(168, 167, 167);
    font-size: 2rem;
  }
/* Red Icon */
.like-button.liked .like-icon {
  color: red;
}

/* Gray Icon */
.like-button .like-icon {
  color: gray;
}

.heart-like-icon > .like-button , .heart-like-icon > .like-button:hover .heart-like-icon > .like-button:active{
    background-color: transparent;
    box-shadow: none  ;
}
.heart-like-icon {
  display: none;
  align-items: center;
}
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: inherit;
  }
  .jokes-title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 4rem;
    color: white;
    padding-bottom: 4rem;
  }
span{
  color: rgba(0, 114, 198, 1);
}
/* /section 1 ended */
  p {
    color: rgba(0, 114, 198, 1);
    font-size: 1.25rem;
    font-family: 'Inter', sans-serif;
  }
  .jokes-content {
    padding: 4rem 2rem;
  }
  .column-jokes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  a{
    cursor: pointer;
    background-color:transparent;
  }
  .jokes-content-flex-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
   /* Tablet styles */
  @media screen and (max-width: 768px) {
    .jokes-content {
      padding: 1rem;
  }
    .joke-content-gray{
    gap:0.5rem;
}
    .jokes-section {
      height: 270px;
    }
    h4 {
      font-size: 3rem;
      padding-bottom: 3rem;
    }
  
    p {
      font-size: 1.125rem; 
    }
  
    .jokes-content {
      padding: 3rem; 
    }
  .jokes-title {
    font-size: 2rem;
    }
    .column-jokes {
      flex-direction: column; 
      gap: 1rem;
      padding: 1rem; 
    }
  }