body {
       margin: 0;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background: linear-gradient(135deg, #f0f4ff, #e0f7fa);
       color: #333;
   }

   .header-area {
       background-color: #293a4a;
   }

   .level {
       display: flex;
       justify-content: space-between;
       font-weight: 900;
   }

   .NewXML {
       text-align: center;
       flex: 1;
   }

   .OldXML {
       text-align: center;
       flex: 1;
   }

   h1 {
       text-align: center;
       font-size: 25px;
       font-weight: bold;
   }

   .texasss {
       margin: 0 auto;
       padding: 30px 30px 0 30px;
       box-sizing: border-box;
       display: flex;
   }


   #newXML::placeholder {
       color: black;
   }

   #oldXML::placeholder {
       color: black;
   }

   #newXML {
       margin-left: 10px;
   }

   textarea {
       width: 100%;
       height: 60vh;
       border: 1px solid #ccc;
       border-radius: 5px;
       box-sizing: border-box;
   }

   textarea:focus {
       outline: none;
       border-color: #007bff;
       box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
   }

   button {
       display: inline-block;
       font-size: 35px;
       border: none;
   }

   .error {
       color: red;
       font-weight: 600;
       margin-left: 20px;
       font-size: 20px;
   }

   .success {
       color: green;
       font-weight: 600;
       margin-left: 20px;
       font-size: 20px;
   }

   .button {
       height: 50px;
       width: 150px;
       border: none;
       border-radius: 10px;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       transition: all 0.5s ease-in-out;
   }

   .button:hover {
       box-shadow: .5px .5px 150px #252525;
   }

   .btnn {
       text-align: center;
       padding: 10px;
   }

   .type1::after {
       content: "Thanks";
       height: 50px;
       width: 150px;
       background-color: blue-700;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(50px);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type1::before {
       content: "Compare XML";
       height: 50px;
       width: 150px;
       background-color: blue-500;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(0px) scale(1.2);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type1:hover::after {
       transform: translateY(0) scale(1.2);
   }

   .type1:hover::before {
       transform: translateY(-50px) scale(0) rotate(120deg);
   }

   .type2::after {
       content: "Deleted";
       height: 50px;
       width: 150px;
       background-color: blue-700;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(50px);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type2::before {
       content: "Clear";
       height: 50px;
       width: 150px;
       background-color: blue-500;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(0px) scale(1.2);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type2:hover::after {
       transform: translateY(0) scale(1.2);
   }

   .type2:hover::before {
       transform: translateY(-50px) scale(0) rotate(120deg);
   }

   .type3::after {
       content: "Cleared";
       height: 50px;
       width: 150px;
       background-color: blue-700;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(50px);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type3::before {
       content: "Clear Rule";
       height: 50px;
       width: 150px;
       background-color: blue-500;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(0px) scale(1.2);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type3:hover::after {
       transform: translateY(0) scale(1.2);
   }

   .type3:hover::before {
       transform: translateY(-50px) scale(0) rotate(120deg);
   }

   .type4::after {
       content: "Copied";
       height: 50px;
       width: 150px;
       background-color: blue-700;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(50px);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type4::before {
       content: "Copy";
       height: 50px;
       width: 150px;
       background-color: blue-500;
       position: absolute;
       top: 0%;
       left: 0%;
       transform: translateY(0px) scale(1.2);
       font-size: 15px;
       font-weight: 600;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.5s ease-in-out;
   }

   .type4:hover::after {
       transform: translateY(0) scale(1.2);
   }

   .type4:hover::before {
       transform: translateY(-50px) scale(0) rotate(120deg);
   }

   #downloadReport {
       font-size: 15px;
       font-weight: 600;
       color: red;
   }

   .blink_me {
       color: green;
       font-weight: 900;
   }

   .youthink {
       animation: blinkings 1s infinite;
       text-transform: capitalize;
   }

   @keyframes blinkings {
       0% {
           color: white;
       }

       50% {
           color: green;
       }

       100% {
           color: white;
       }
   }

   .youthink2 {
       animation: blinkings2 1s infinite;
       text-transform: capitalize;
   }

   @keyframes blinkings2 {
       0% {
           color: red;
       }

       50% {
           color: white;
       }

       100% {
           color: red;
       }
   }