:root {
  --first-color: hsl(231, 44%, 56%);
  --first-color-alt: hsl(231, 44%, 51%);
  --text-color: hsl(231, 12%, 98%);
}

#body {
  width: 650px;
  display: inline-block;
  background-color: rgb(236 249 253);
  border-radius: 15px;
}

.hidden {
  display: none;
}

#result {
  margin: 1em;
  /*background-color: rgb(243, 244, 246);*/
  background-color: white;
  border-radius: 8px;
}

#result_url {
  margin: 0.5em;
  padding: 1em;
  font-size: 12pt;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: blue;
}

#result_url_link {
  text-decoration: none;
  color: black;
  font-weight: normal;
}

form {
  margin: 1em;
}

#get_shorturl {
  width: 100%;
  margin-top: 1em;
  height: 40px;
  background-color: rgb(234, 88, 12);
  color: white;
  border: 0;
  border-radius: 8px;
  font-size: 16pt;
  font-weight: bold;
  font-family: serif;
}

#get_shorturl:disabled {
  background-color: rgb(249 161 115);
  /*background-color: rgb(19 81 148);*/
}

#secret:disabled {
  background-color: rgb(244 244 244);
}

#container {
  margin-top: 50px;
  text-align: center;
}

.tailer {
  font-size: 12pt;
  font-style: italic;
  color: grey;
}

#copy_button {
  border: 0;
  float: right;
  margin-right: -10px;
  margin-top: -2px;
  vertical-align: middle;
  background: none;
  color: rgb(107, 114, 128);
}

#copy_button:hover {
  color: rgb(55, 65, 81);
}

#error_message {
  margin: 1em;
  padding: .5em 1em;
  display: none;
  background-color: rgb(243, 244, 246);
  color: rgb(234, 88, 12);
  border: 0;
  border-radius: 8px;
  font-size: 16pt;
  font-weight: bold;
  font-family: serif;
}

#secret {
  width: 100%;
  height: 100px;
  float: left;
  color: grey;
  font-size: 12pt;
  padding: 1em;
  border-radius: 8px;
  border: 2px solid rgb(220 220 220);
}

#expiration {
  padding: 0 .5em;
  height: 40px;
  border-radius: 8px;
  border: 2px solid rgb(220 220 220);
  margin-top: 1.5em;
  width: 300px;
  float: right;
}

#password {
  padding: 0 .8em;
  height: 40px;
  border-radius: 8px;
  border: 2px solid rgb(220 220 220);
  margin-top: 1.5em;
  width: 300px;
  float: left;
}

#section_message_saved {
  display: none;
}