@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

    * {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    .wrapper {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(-135deg, #c850c0, #4158d0);
      /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
      /* clip-path: circle(25px at calc(0% + 45px) 45px); */
      clip-path: circle(25px at calc(100% - 45px) 45px);
      transition: all 0.3s ease-in-out;
    }

    #active:checked~.wrapper {
      clip-path: circle(75%);
    }

    .menu-btn {
      position: absolute;
      z-index: 2;
      right: 20px;
      /* left: 20px; */
      top: 20px;
      height: 50px;
      width: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 50%;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
      background: linear-gradient(-135deg, #c850c0, #4158d0);
      /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
      transition: all 0.3s ease-in-out;
    }

    #active:checked~.menu-btn {
      background: #fff;
      color: #4158d0;
    }

    #active:checked~.menu-btn i:before {
      content: "\f00d";
    }

    .wrapper ul {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      list-style: none;
      text-align: center;
    }

    .wrapper ul li {
      margin: 15px 0;
    }

    .wrapper ul li a {
      color: none;
      text-decoration: none;
      font-size: 30px;
      font-weight: 500;
      padding: 5px 30px;
      color: #fff;
      position: relative;
      line-height: 50px;
      transition: all 0.3s ease;
    }

    .wrapper ul li a:after {
      position: absolute;
      content: "";
      background: #fff;
      width: 100%;
      height: 50px;
      left: 0;
      border-radius: 50px;
      transform: scaleY(0);
      z-index: -1;
      transition: transform 0.3s ease;
    }

    .wrapper ul li a:hover:after {
      transform: scaleY(1);
    }

    .wrapper ul li a:hover {
      color: #4158d0;
    }

    input[type="checkbox"] {
      display: none;
    }

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      text-align: center;
      width: 100%;
      color: #202020;
    }

    .content .title {
      font-size: 40px;
      font-weight: 700;
    }

    .content p {
      font-size: 35px;
      font-weight: 600;
    }


    .div {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: -10;
}

    @media screen and (min-width: 768px) {
      .like {
        height: 3vh;
        margin-left: 2%;

      }

      .view {
        font-size: 14px;
      }

      .uid {
        margin-left: 40%;
      }
    }
    
     @media screen and (max-width: 768px) {
      .like {
        height: 3vh;
        margin-right: 2%;
      }
    }
    @media screen and (min-width: 768px) {
      .user-profile_3 {
    position: absolute;
    top: 6.5%;
  left: 86%;
  transform: translate(-50%, -50%);
  
      /* Adjust as needed */
      display: flex;
      align-items: center;
      
      /* Spacing between image and username */
      background-color: rgba(255, 255, 255, 0.8);
      /* Optional: Background for better visibility */
      padding: 5px 10px;
      border-radius: 25px;
      /* Optional: Rounded corners for the container */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Optional: Subtle shadow */
    }
  }
    @media screen and (max-width: 768px) {
    
       .user-profile_3 {
      display: none;
     
    }
  }
    
@media screen and (min-width: 768px) {
     .user-profile_2 {
      display: none;
    }
  }
    @media screen and (max-width: 768px) {
    
      .user-profile_2 {
      position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
      /* Adjust as needed */
      margin-right: 10%;
      /* Adjust as needed */
      display: flex;
      align-items: center;
      
      /* Spacing between image and username */
      background-color: rgba(255, 255, 255, 0.8);
      /* Optional: Background for better visibility */
      padding: 5px 10px;
      border-radius: 25px;
      /* Optional: Rounded corners for the container */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Optional: Subtle shadow */
    }
  }
    

    .user-profile {
      position: absolute;
      top: 20px;
      /* Adjust as needed */
      left: 20px;
      /* Adjust as needed */
      display: flex;
      align-items: center;
       gap: 10px; 
      /* Spacing between image and username */
      background-color: rgba(255, 255, 255, 0.8);
      /* Optional: Background for better visibility */
      padding: 5px 10px;
      border-radius: 25px;
      /* Optional: Rounded corners for the container */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Optional: Subtle shadow */
    }

    .user-profile img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      /* Ensures the image covers the circle */
      border: 2px solid #fff;
      /* Optional: Border around the image */
    }

    .user-profile .user-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      /* Adjust text color */
      white-space: nowrap;
      /* Prevents wrapping of the username */
    }

    .user-profile_4 {
      display: flex;
      align-items: center;
      gap: 10px;
      /* Spacing between image and username */
      background-color: rgba(255, 255, 255, 0.8);
      /* Optional: Background for better visibility */
      padding: 5px 10px;
      /*border-radius: 25px;*/
      /* Optional: Rounded corners for the container */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Optional: Subtle shadow */
    }

    

    .user-profile_4 img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      /* Ensures the image covers the circle */
      border: 2px solid #fff;
      /* Optional: Border around the image */
    }

    .user-profile_4 .user-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      /* Adjust text color */
      white-space: nowrap;
      /* Prevents wrapping of the username */
    }

    .follow-btn {
      padding: 8px 16px;
      font-size: 14px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 20px;
      cursor: pointer;
    }

    .follow-btn:hover {
      background-color: #0056b3;
      /* Darker shade on hover */
    }
  
/* Loader styles */
#loader {
    position: fixed;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
.article-card {
  flex: 1 1 320px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}