.css> 
 * {
   margin: 0;
   padding: 0;
 }
 
 body {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #24edca;
 }
 
 .container {
   background:#fff;
   padding: 20px;
   font-family: monospace;
   width: 500px;
   box-shadow: 0 0 5px #000;
 }
 
 .head {
   text-transform: uppercase;
   margin-bottom: 20px;
 }
 
 .text {
   margin: 10px 0;
   font-family: sans-serif;
   font-size: 0.9em;
 }
 
 .commentbox {
   display: flex;
   justify-content: space-around;
   padding: 10px;
 }
   .commentbox > img {
     width: 40px; 
     height: 40px;
     border-radius: 50%;
     margin-right: 20px;
     object-fit: cover;
     object-position: center;
   }
   
   
   .content {
     width: 100%;
   }
   
   .user {
     border: none; 
     outline: none; 
     margin: 5px 0;
     color: #24edca;
     margin-left: 20px;
     padding: 10px;
   }
     .commentinput > input { 
       border: none;
       padding: 10px;
       padding-left: 0;
       outline: none;
       border-bottom: 2px solid black;
       margin-bottom: 10px; 
       width: 95%;
       
      }
   .buttons { 
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #000000
     }
   
   .buttons button { 
     padding: 5px 10px;
     background: lightgrey;
     color: #000000;
     text-transform: uppercase;
     border: none;
     outline: none;
     border-radius: 3px;
     cursor: pointer;
     }
   
   .buttons button.abled{ 
     background: grey;
     color: #fff;
     }