#toast {
  visibility: hidden;
  min-width: 250px;
  background-color: hsl(0, 0%, 87%);
  color: hsl(0, 0%, 0%);
  text-align: center;
  border-radius: 15px;
  padding: 16px;
  position: fixed;
  top: 20px;
  right: -300px;
  z-index: 1;
  transition: right 0.2s ease, visibility 0.1s;
}

#toast.show {
  visibility: visible;
  right: 20px;
}

body {
    display: flex;
    text-align: center;
    justify-content: center;
    font-family:Arial, Helvetica, sans-serif;
}

#copyButton {
    margin-bottom: 15px;
    background-color: hsl(240, 79%, 59%);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    padding: 5px 10px;
}

#copyButton:hover {
    background-color: hsl(240, 79%, 50%);
}

#generateButton {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    background-color: hsl(84, 100%, 59%);
}

#generateButton:hover {
    background-color: hsl(84, 100%, 47%);
}

#myInput {
    font-size: 1em;
    border: none;
    background-color: rgb(255, 247, 216);
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
}