@charset "UTF-8";

:root {
  /* Preto absoluto "#000" e branco absoluto "#fff" são cores duras */
  --soft-white: #efefef;
  --soft-black: #333;
}

/* Os demais resets estão no arquivo "reset.css" */
* {
  font-family: system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to bottom, skyblue, white);
  color: var(--soft-black);
  height: 100vh; /* Declaração é necessária para que a centralização funcione */
  /* Centralização */
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
}

#title {
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
}

#container {
  padding: 20px;
  box-shadow: 5px 7px 15px rgba(0, 0, 0, .39);
  border-radius: 15px;
  width: 408px;
  background-color: var(--soft-white);
}

input,
select {
  border: none;
  border-bottom: 1px solid #33333383;
  outline: none;
  background-color: inherit;
  margin-left: 7px;
}

#input-container {
  margin-top: 35px;
}

#password-type-container,
#generated-password-container,
#generate-button {
  margin-top: 15px;
}

button {
  border: none;
  cursor: pointer;
  background-color: #0050ff;
  color: #fff;
}

button:active {
  /* O botão diminui 5% de seu tamanho | efeito de pressionamento */
  transform: scale(.95);
}

#copy-button {
  padding: 3px 10px;
  border-radius: 5px;
  margin-left: 7px;
}

#generate-button {
  padding: 7px 19px;
  border-radius: 5px;
}

.hide {
  display: none;
}