Password-Generator/styles.css

* {
    box-sizing: border-box;
  }
  
  body {
    background-color: #fa8096;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
  }
  
  #title {
    font-size: 28px;
    color: #2f3542;
    border: 3px solid #fa8096;
    padding: .2em;
    border-radius: 5px;
    background-color: #68ffb6;
    text-align: center;
    margin-top: 0;
  }
  
  #wrapper {
    position: relative;
  }
  
  aside {
    width: 33.5%;
    position: absolute;
    height: 85vh;
    right: 0;
  }
  
  #instructions {
    border: 2px solid rgb(60, 255, 118);
    margin-bottom: 15px;
    border-radius: 5px;
    color: #2f3542;
    background-color: #68ffb6;
    max-height: 55px;
    overflow: hidden;
    transition: max-height 0.3s ease-out
  }
  
  #instructions.active {
    height: auto;
    max-height: 500px;
  }
  
  #instructions__header {
    padding: 1em;
    cursor: pointer;
    border-bottom: 1px solid #2f3542;
    display: flex;
    justify-content: space-between;
  }
  
  #instructions__content {
    padding: 0 2em 1em 2em;
  }
  
  #instructions__content ul {
    padding: 0;
  }
  
  #how {
    margin: 0;
  }
  
  #instructions li {
    margin-bottom: 1em
  }
  
  main {
    width: 65%;
  }
  
  main div {
    margin: 0.5em 0;
  }
  
  #password-length {
    width: 5em;
    padding: .2rem;
    text-align: center;
    font-size: .8em;
    border: none;
    border-radius: 5px;
  }
  
  .button{
    font-size: 1rem;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
  }
  
  .button.generate {
    background-color: #70A1FF;
    color: #fff;
  }
  .button.generate:hover{
    background-color: #91b6fb;
  }
  .button.copy {
    background-color: powderblue;
    color: black;
  }
  .button.copy:hover{
    background-color: #b6e4eb;
  }
  
  #random-password-container {
    border: 2px solid #68ffb6;
    border-radius: 5px;
    background-color: #68ffb6;
    padding: 1em;
  }
  
  #random-password {
    background-color: powderblue;
    padding: 1em;
    word-break: break-all;
  }
  
  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type="number"] {
    -moz-appearance: textfield;
  }
  
  #error-message{
    opacity: 0;
    animation: fadeIn 1s forwards;
    color: #D8000C;
  }
  
  #password-strength-container {
    border: 2px solid #68ffb6;
    border-radius: 5px;
    background-color: #dfe4ea;
    padding: 1em;
  }
  
  #password-strength-container .input-container {
    position: relative;
  }
  
  #password-test {
    width: 100%;
    border-radius: 5px;
    border: 2px solid #68ffb6;
    padding: 0.5em;
    outline: none;
  }
  
  #password-indicator {
    width: 100%;
    padding: 2px;
    border-radius: 5px;
    background: white;
  }
  
  #password-indicator.weak {
    background: linear-gradient(to right, #ff0000 25%, #fff 25%);
  }
  
  #password-indicator.average {
    background: linear-gradient(to right,#ff9900 50%,#fff 50%);
  }
  
  #password-indicator.good {
    background: linear-gradient(to right,#70A1FF 75%, #fff 75%);
  }
  
  #password-indicator.strong {
    background: linear-gradient(to right, #43f04c 100%, #43f04c 100%);
  }
  
  #password-toggle {
    font-size: .8em;
    float: right;
    position: absolute;
    right: 0.5em;
    top: 0.75em;
    color: #70A1FF;
    cursor: pointer;
  }
  
  @keyframes octocat-wave {
      0%, 100% {
          transform:rotate(0)
      }
      20%, 60% {
          transform:rotate(-25deg)
      }
      40%, 80% {
          transform:rotate(10deg)
      }
  }
  
  @keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
  }
  
  @media only screen and (max-width: 768px) {
      aside {
      position: relative;
      height: auto;
      width: 100%;
    }
  
    main {
      width: 100%;
    }
  }