body {
       background-color: var(--ok);
   }

   .container {
       max-width: 600px;
       margin: 40px auto;
       background: #fff;
       padding: 30px;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }

   .second {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;

   }

   .second div {
       max-width: 700px;
   }

   .second h1 {
       color: var(--design);
       font-family: Arial, sans-serif;
       font-size: 30px;
       margin: 12px;

   }

   .second h3 {
       color: var(--design);
       font-family: sans-serif;
       font-size: 20px;
       margin: 12px;


   }

   .second p {
       color: var(--design);
       font-family: 'M PLUS Rounded 1c', sans-serif;
       font-size: 16px;
       margin: 12px;
       margin-bottom: 42px;
       text-align: left;
   }

   .toggle-comments {
       margin: 5px;
       padding: 1em 3em;
       color: var(--ok);
       margin: 5px;
       border: none;
       width: 25em;
       height: 3em;
       border-radius: 1000px;
       font-weight: 900;
       font-size: 12px;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-image: linear-gradient(to bottom right, rgb(255, 98, 124), rgba(0, 0, 255, 0.868));
       display: flex;
       align-items: center;
       justify-content: center;

       transition: all 0.1s ease;

   }

   .toggle-comments:hover {
       z-index: 0;
       box-shadow: 10px 0 100px rgba(0, 0, 255, 0.749),
           -10px 0 100px rgb(255, 98, 124);
   }

   .head h1 {
       font-size: 24px;
       margin-bottom: 10px;
   }

   .text,
   .policy,
   .date {
       font-size: 12px;
       color: #666;
   }

   .commentbox {
       display: flex;
       gap: 15px;
       margin-top: 20px;
   }

   .commentbox img {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       object-fit: cover;
   }

   .content input,
   .commentinput input {
       width: 100%;
       padding: 10px;
       margin-bottom: 10px;
       border: 1px solid #ccc;
       border-radius: 5px;
   }

   .buttons {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .buttons button {
       padding: 8px 16px;
       border: none;
       border-radius: 5px;
       background-color: #007BFF;
       color: white;
       cursor: pointer;
       transition: all 0.3s;
   }

   .buttons button:disabled {
       background-color: #aaa;
       cursor: not-allowed;
   }

   .comments-section {
       margin-top: 40px;
   }

   .comments .parents {
       display: flex;
       align-items: flex-start;
       margin-top: 20px;
       background-color: #f9f9f9;
       padding: 15px;
       border-radius: 8px;
   }

   .parents img {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       margin-right: 15px;
   }

   .comments .parents h1 {
       font-size: 16px;
       margin: 0;
   }

   .comments .parents p {
       margin: 10px 0;
   }

   .engagements {
       display: flex;
       gap: 5px;
       margin-top: 10px;
   }

   .engagements img {
       width: 16px;
       height: 16px;
       cursor: pointer;
       border: none;
       border-radius: 0;
   }

   .upload-label {
       display: inline-block;
       background-color: #007BFF;
       color: #fff;
       padding: 8px 12px;
       border-radius: 5px;
       cursor: pointer;
       margin-bottom: 10px;
   }

   .upload-label:hover {
       background-color: #0056b3;
   }

   #userImage {
       display: none;
   }

   .first {
       display: none;
   }




   @media screen and (max-width:1300px) {
       body {
           background-color: var(--ok);
       }

       .second div {
           max-width: 100%;

       }

       .second h1 {

           display: none;
       }

       .second h3 {

           display: none;
       }

       .second p {

           display: none;
       }

       .toggle-comments {

           width: 17em;
           height: 2.7em;
       }

       .head h1 {
           font-size: 22px;
       }

       .upload-label {

           font-size: xx-small;
       }

       .buttons button {
           padding: 4px 14px;
       }

       .comments .parents h1 {
           font-size: 14px;
       }

       .engagements img {
           width: 11px;
           height: 11px;
       }

       .first {
           margin: 15px;

       }

       .comments-section {
           margin-top: 40px;
           margin: 15px;
       }

   }