body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 90vh;
   background-color: rgb(73, 136, 117);
 }

 .container {
   width: 250px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 1.5rem;
   border-radius: 10px;
   font-size: 15px;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
     rgba(0, 0, 0, 0.12) 0px -12px 30px,
     rgba(0, 0, 0, 0.12) 0px 4px 6px,
     rgba(0, 0, 0, 0.17) 0px 12px 13px,
     rgba(0, 0, 0, 0.09) 0px -3px 5px;
   color: black;
 }

 .container p {
   font-size: 20px;
   margin-top: -0.7rem;
   text-align: center;
 }

 .buttons {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
   align-items: center;
   margin-left: 15px;
 }

 #copyIcon {
   border-radius: 50%;
   width: 40px;
   height: 40px;
   border: none;
   font-size: 16px;
   transition: 0.2s ease-in-out;
 }

 .btn {
   border: none;
   width: 11em;
   height: 3.5em;
   border-radius: 3em;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   background: #1C1A1C;
   cursor: pointer;
   transition: all 450ms ease-in-out;
 }

 .sparkle {
   fill: #ebe9e9;
   transition: all 800ms ease;
 }

 .text {
   font-weight: 600;
   color: #ebe9e9;
   font-size: medium;
 }

 .btn:hover {
   background: linear-gradient(0deg, #A47CF3, #683FEA);
   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
     inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
     0px 0px 0px 4px rgba(255, 255, 255, 0.2),
     0px 0px 180px 0px #ba61ff;
   transform: translateY(-2px);
 }

 .btn:hover .text {
   color: white;
 }

 .btn:hover .sparkle {
   fill: white;
   transform: scale(1.1);
 }