@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Poppins:wght@400;700&display=swap');
* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Oswald' ,sans-serif;
}
body{
    background-color: black ;
}

h1{
    font-size:56px;
    font-weight:700;
    text-align: center;
    color:#fff
}
#parent{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#input-field{
    padding:1rem;
    padding-left:1rem;
    font-weight: 700;
    font-size:16px;
    width:300px;
    border:3px solid #0096FF;
    border-radius: 10px;
}
#input-field:focus-visible {
    border-color:black;
}
#copy-password{
    height:0
}
svg{
    color:white;
}
#generator {
    display:inline-flex;
    width:500px;
    justify-content: center;
    align-items: center;
    margin-top:3rem;
}
/*styles of button copies from cssbuttons.io */
button {
    /* Variables */
   --button_radius: 0.75em;
   --button_color: #e8e8e8;
   --button_outline_color: #000000;
   font-size: 17px;
   font-weight: bold;
   border: none;
   border-radius: var(--button_radius);
   background: var(--button_outline_color);
   margin-left: 2rem;
  }
  
  .button_top {
   display: block;
   box-sizing: border-box;
   border: 2px solid var(--button_outline_color);
   border-radius: var(--button_radius);
   padding: 0.8em 2em;
   background: var(--button_color);
   color: var(--button_outline_color);
   transform: translateY(-0.2em);
   transition: transform 0.1s ease;
   border: 3px solid #0096FF;
  }
  
  button:hover .button_top {
    /* Pull the button upwards when hovered */
   transform: translateY(-0.33em);
  }
  
  button:active .button_top {
    /* Push the button downwards when pressed */
   transform: translateY(0);
  }

  #pass {
    color:white;
    padding-top:3rem;
    font-size : 32px;
  }