/** @format */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   border: 0;
}

body {
   /* background-color: aquamarine; */
   /* display: flex; */
   /* justify-content: center; */
   /* align-items: center; */
   /* height: 100dvh; */
   font-family: "Courier New", Courier, monospace;
}

.title-div {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   display: flex;
   justify-content: center;
   font-size: 1.8rem;
   text-transform: uppercase;
   background-color: #2d98ad;
   color: white;
   padding-top: 2rem;
   padding-bottom: 2rem;
   user-select: none;
}
.file-div {
   margin-top: 2rem;
   margin-bottom: 2rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   row-gap: 1.5rem;
}
.file-div input {
   display: none;
}

.lien-div {
   width: 95%;
   text-align: center;
   background-image: linear-gradient(180deg, rgb(252, 88, 88), rgb(202, 0, 0));
   color: white;
   font-weight: 600;
   padding-left: 1.8rem;
   padding-right: 1.8rem;
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
   font-size: 1.2rem;
   border-radius: 15rem;
   transition: padding 0.6s ease-in-out;
   display: flex;
   justify-content: center;
   user-select: none;
}

.lien-div a {
   text-decoration: none;
   color: white;
}

.lien-div:hover {
   background-image: linear-gradient(0deg, rgb(252, 88, 88), rgb(202, 0, 0));
   /* padding-left: 4.5rem;
   padding-right: 4.5rem; */
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
}

.file-div label {
   background-image: linear-gradient(180deg, #2d98ad, #1d7688);
   color: white;
   font-weight: 600;
   padding-left: 1.8rem;
   padding-right: 1.8rem;
   padding-top: 0.4rem;
   padding-bottom: 0.4rem;
   font-size: 1.2rem;
   border-radius: 15rem;
   transition: padding 0.6s ease-in-out;
   display: flex;
   align-items: center;
   user-select: none;
}

.file-div label svg {
   height: 1.7rem;
   margin-left: 1rem;
}

.file-div label:hover {
   background-image: linear-gradient(0deg, #2d98ad, #1d7688);
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
}

.output-div {
   display: none;
   flex-direction: column;
   align-items: center;
}
.output-div h3 {
   font-size: 1.2rem;
   text-transform: uppercase;
   user-select: none;
}
.output-div div {
   margin-top: 1rem;
   border: 2px gray solid;
   border-radius: 0.5rem;
   width: 95%;
   padding: 1rem;
   padding-right: 1.2rem;
   padding-left: 1.2rem;
   box-shadow: 4px 6px 6px -1px rgb(0 0 0 /0.2);
   position: relative;
}

.output-div div p {
   font-size: 0.9rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
}

.output-div div svg {
   position: absolute;
   top: 1rem;
   right: 3.8rem;
   height: 1.5rem;
   user-select: none;
   cursor: pointer;
   color: rgb(116, 116, 116);
}

.output-div div .down-btn {
   right: 1rem;
}

.loader-div {
   margin-top: 4rem;
   display: none;
   flex-direction: column;
   align-items: center;
   /* opacity: 0%; */
}

.loader-div p {
   margin-top: 1.5rem;
   font-family: cursive;
   font-size: 1.5rem;
   font-weight: 700;
   color: #2d98ad;
   animation: come-go 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes come-go {
   0% {
      opacity: 0%;
   }
   50% {
      opacity: 100%;
   }
   100% {
      opacity: 0%;
   }
}

.loader {
   width: 44.8px;
   height: 44.8px;
   color: #2d98ad;
   position: relative;
   background: radial-gradient(11.2px, currentColor 94%, #0000);
}

.loader:before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(10.08px at bottom right, #0000 94%, currentColor) top left, radial-gradient(10.08px at bottom left, #0000 94%, currentColor) top right, radial-gradient(10.08px at top right, #0000 94%, currentColor) bottom left, radial-gradient(10.08px at top left, #0000 94%, currentColor) bottom right;
   background-size: 22.4px 22.4px;
   background-repeat: no-repeat;
   animation: loader 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes loader {
   33% {
      inset: -11.2px;
      transform: rotate(0deg);
   }

   66% {
      inset: -11.2px;
      transform: rotate(90deg);
   }

   100% {
      inset: 0;
      transform: rotate(90deg);
   }
}

.notif {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 10rem;
   color: white;
   display: none;
   justify-content: center;
   align-items: center;
   background-color: transparent;
}

.notif div {
   padding-left: 7rem;
   padding-right: 7rem;
   padding-top: 0.71rem;
   padding-bottom: 0.71rem;
   border-radius: 10rem;
   /* background-color: rgba(2, 143, 2, 0); */
   background-color: rgba(2, 143, 2, 0.7);
   font-size: 1.1rem;
   font-weight: 700;
   transition: all 4s ease-in-out;
}

.text-area {
   width: 95%;
   max-width: 400px;
   height: 400px;
   padding: 0.8rem 1.2rem;
   box-sizing: border-box;
   border: 2px solid #ccc;
   border-radius: 10px;
   background-color: #f8f8f8;
   font-size: 16px;
   resize: none;
}

/* .notif div :active {
} */