* {
  margin: 0;
  padding: 0;
  font-family: 'Nunito Sans', sans-serif;
}
.main {
  height: 100vh;
  width: 100vw;
  background-color: blueviolet;
  display: flex;
  justify-content: center;
}
.pass {
  width: 80vw;
  background-color: white;
  height: 40vh;
  /* border: 2px solid red; */
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10vh;
  align-items: center;
  margin: auto;
  border-radius: 10px;
}
#sp {
  height: 4vh;
  text-align: center;
  font-size: 60%;

  display: block;
  background-color: black;
  color: white;
  padding: 1vh 2vw;
  border-radius: 10px;
}
.bts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1vh;
  background-color: black;
  width: 100%;
  padding: 1vh 0;
  justify-content: center;
  border-radius: 0px 0px 10px 10px;
}
.bts button {
  cursor: pointer;
  background-color: white;
  border-radius: 10px;
  padding: 2px;
}
.bts button:hover {
  transform: scale(1.05);
}

h2 {
  font-size: 5vw;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 10px 10px 0px 0px;
}
.cop {
  display: flex;
}
i {
  background-color: white;
  border: none;
}
#copy {
  display: inline;
  border: none;
  background-color: white;
  cursor: pointer;
  margin-left: 2vw;
}
#copy:hover {
  transform: scale(1.2);
  transition: 200ms ease-in-out;
}
.bts button:hover{
    transform: scale(1.1);
  transition: 300ms ease-in-out;
}
#copy:active {
  transform: scale(0.8);
}
@media screen and (max-width: 800px) {
  .pass {
    width: 80vw;

  }
  h2 {
    font-size: 5vw;
    color: black;
    background-color: white;
    border-bottom: 2px solid black;
  }
  #sp{
    font-size: 0.3em;
    height: 2em;
  }
  .bts button{
    font-size: 20%;
    font-weight: bolder;
    background-color: black;
    color: white;
  }
  .bts{
    background-color: white;
    color: black;
    border-top: 2px solid black;
  }
  
}