@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
   box-sizing: border-box;
}

body {
   background-color: rgb(50, 74, 24);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Poppins", sans-serif;
   margin: 0;
   min-height: 100vh;
}

.pw-container {
   background-color: rgb(12, 80, 21);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   min-width: 400px;
}

.pw-header {
   padding: 1rem;
}

.pw {
   background-color: rgb(59, 109, 28);
   display: flex;
   font-size: 1.5rem;
   align-items: center;
   height: 70px;
   width: 100%;
   padding: 1rem;
   overflow: auto;
   position: relative;
}
.pw button {
   background-color: white;
   border: none;
   color: rgb(29, 2, 56);
   cursor: pointer;
   font-family: inherit;
   font-weight: bold;
   padding: 0.25rem;
   position: absolute;
   top: 30%;
   left: 45%;
   transform: translate(-50%, -50%);
   transition: opacity 0.2s ease, transform 0.2s ease;
   opacity: 0;
}

.pw:hover button {
   opacity: 1;
   transform: translate(0, 0%);
}

.pw-body {
   padding: 0 1rem 1rem;
}

.form-control {
   color: #eee;
   display: flex;
   justify-content: space-between;
   margin: 0.75rem 0;
}

.generate {
   background-color: #02ec48;
   border: none;
   color: rebeccapurple;
   cursor: pointer;
   display: block;
   font-size: 1.5rem;
   font-weight: bold;
   padding: 0.75rem;
   margin-top: 1rem;
   width: 100%;
}