*{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-transform: uppercase;
      color: #fff;
}

html, body{
      width: 100%;
      height: 100%;
      font-size: 10px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
      background-color: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background-image: url("https://t3.ftcdn.net/jpg/02/49/93/98/360_F_249939831_ghwNg5QDUNXXfYYnP7d63c2fy4RyQspw.jpg");
      background-size: cover;
      background-repeat: no-repeat;
}

#container{
      padding: 20px;
      width: 40%;
      height: 60vh;
      border-radius: 20px;
      box-shadow: 0px 0px 10px 2px #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      background-image: url("https://us.123rf.com/450wm/maxkabakov/maxkabakov1310/maxkabakov131000964/22738817-security-concept-black-key-on-grunge-textured-concrete-wall-background-3d-render.jpg?ver=6");
      background-size: cover;
      background-repeat: no-repeat;
}

h1{
      text-shadow: 1px 2px 10px #000;
      text-align: center;
      font-size: 1.7vw;
      margin-bottom: 5vh;
}

#passwordfield{
      width: 80%;
      height: 8vh;
      border: none;
      background-color: white;
      color: #000;
      font-size: 1.7rem;
      padding: 8px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0px 0px 10px 0px #fff;
      text-transform: none;
}
#passwordfield:focus{
      outline: none;
}

#showpassword{
      width: 15vw;
      height: 6vh;
      background-color: rgb(0, 132, 255);
      border-radius: 5px;
      font-size: 1.7rem;
      color: #fff;
      font-weight: 800;
      transition: .1s all linear;
}
#showpassword:hover{
      background-color: rgb(6, 54, 213);
      font-size: 1.8rem;
}
#showpassword:active{
      background-color: rgb(213, 106, 6);
      font-size: 1.8rem;
}

#output{
      width: 75%;
      height: 5vh;
      padding: 10px;
      font-size: 1.3rem;
      font-weight: 700;
}

#clrbtn{
      width: 11vw;
      height: 5vh;
      background-color: transparent;
      border: none;
      border: 2px solid #ff0000;
      border-radius: 10px;
      font-size: 1.5rem;
      color: #fff;
      font-weight: 700;
      transition: .1s all linear;
      box-shadow: 0px 0px 10px 2px red;
}
#clrbtn:hover{
      background-color: #ff5500;
      font-size: 1.7rem;
}
#clrbtn:active{
      background-color: red;
      font-size: 1.7rem;
}


@media (max-width:600px){
      #container{
            width: 90vw;
            height: 60vh;
      }
      h1{
            font-size: 5.1vw;
      }
      #showpassword{
            width: 50vw;
            border-radius: 20px;
      }
      #clrbtn{
            width: 30vw;
      }
}