@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");

body {
  background-color: #ffff;
}

.main-card {
/*  max-width: 640px;*/
  background-color: #4e45466c;
  padding: 26px;
  border-radius: 8px;
  margin: 0px auto;
  font-family: "Lato", sans-serif;
  box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%),
    0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%),
    0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;

}
.main-card h3 {
  color: rgba(143, 1, 1, 0.941);
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 3px;
  text-align: center;
}
.main-card h3 span {
  color: #fff;
}
.main-card p {
  font-weight: 600;
}
.main-card hr {
  margin-top: 4px;
  border-color: #228af5;
}
.main-card input[type="range"] {
  width: 100%;
}

.input-copy .password {
  /* border: solid 2px #228AF5; */
  padding: 13px 10px;
  border-radius: 4px;
  font-size: 20px;
  margin-bottom: 9px;
  margin-top: 25px;
  background-color: aliceblue;
  display: flex;
  justify-content: space-between;
}
.input-copy .password a img {
  width: 22px;
}

.select-option {
  margin-bottom: 5px;
}
.select-option label {
  font-size: 17px;
}

.main-card .generate {
  border: solid 2px aliceblue;
  padding: 10px 23px;
  color: #e1e1e1;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-size: 14px;
  border-radius: 3px;
  background-color: rgb(108, 109, 117);
  margin-top: 14px;
  text-transform: uppercase;
  width: 100%;
}
.main-card .generate:hover {
  background-color: rgba(143, 1, 1, 0.941);
  color: #fff;
}

footer {
  text-align: center;
  margin-top: 5px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

footer a {
  color: rgba(143, 1, 1, 0.941);
  text-decoration: none;
}