*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --text-dark: #000;
  --text-light: #fbf2f2;
  --text-muted: #595959;

  --background-color: #fff;
  --background-color-blue: #5a9df0;
  --accent-colour: #6571f5;
  --accent-colour-2: #3bb54a;
  --tag-colour: #e5e5e5;
  --border: 3px solid grey;
  --border--black: 3px solid #000;
  --border--grey: 3px solid grey;
  --colour-blue: blue;
  --colour-black: black;
}

:root.dark-mode {
  --text-dark: #fbf2f2;
  --text-light: #000;
  --text-muted: #595959;

  --background-color: #1c2023;
  --accent-colour: #f56565;
  --accent-colour-2: #3bb54a;
  --tag-colour: var(--accent-colour-2);

  --border: 3px solid #fff;
}

h1 {
  color: black;
}

h3 {
  color: var(--colour-blue);
}

.form {
  margin: 0 auto;
  max-width: 30rem;
  border: var(--border);
  font-size: 1.2rem;

  /* An explicit background is required here, as it's actually transparent by default, and we
       don't want to see the shadow element behind */
  background: var(--background-color);

  /* This shadow is separated from the edges by 0.75rem, and shrunk by 0.2rem on the
  top and bottom. */
  box-shadow: 0.75rem 0.75rem 0 -0.2rem var(--accent-colour);
}

.form__container {
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}

/*.form__container__button {
  display: inline-block;
  margin: 0 auto;
  padding: 0.5em 1em;
  background-color: transparent;
  border: var(--border);
  border-color: blue;
  color: blue;
  text-align: center;
}*/

/* The following media queries allow for more padding inside the form as the window
   size increases */
@media screen and (min-width: 24.75em) {
  .form__container {
    padding-left: 2rem;
  }
}

@media screen and (min-width: 30em) {
  .form__container {
    padding-left: 2.5rem;
  }
}

.form__group {
  /* Surrounds the label and input fields, placing the label above the input */
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.form__label {
  margin-bottom: 0.5rem;
}

.form__field {
  /* Removes the border and the outline highlight when the text field is in focus */

  outline: none;
  border: none;

  /* Re-adds a bottom border which will be replaces when the field is in focus. This
       is going to prevent any jumping when we add the border later */
  border-bottom: 3px solid #fff;

  /* We have to be explicit about our text fields inheriting font properties */
  font-size: inherit;
  font-family: inherit;
  color: var(--colour-blue);
  font-weight: bold;
  padding: 0.75rem 0.5rem;
  background: var(--background-color);
}

/*.form__group>.form__field[name="enc_dec_text"] {
  width: 100%;
  height: 10rem;
}*/

/* When the field is in focus, we change the border colour at the bottom to the accent colour */
.form__field:focus {
  border-bottom: var(--border);
}

.form__small {
  font-size: 0.83rem;
  color: var(--text-muted);
}

.form__link {
  text-decoration: none;
  color: var(--accent-colour);
}

.form__link:hover {
  color: rgb(60, 7, 183);
}

.form__error {
  margin-top: 0.5rem;
}

.form__error,
.form__flash {
  display: block;
  padding: 0.5rem;
  color: var(--text);
}

.form__error,
.form__flash--danger {
  background: var(--accent-colour);
}

.form__flash {
  margin: 0.5rem;
}

.form__flash--success {
  background: var(--accent-colour-2);
}

/* Styles specific to the form buttons */
.button--form {
  margin: 2rem 0 0 auto;
  padding: 0.5em 1em;
  border: var(--border);
  border-color: --colour-black;
  background: var(--background-color);
  color: var(--colour-blue);
  font-weight: bold;
  text-align: center;
}

.button--form:hover {
  background: var(--background-color-hover);
}

/* .key__enc {
  height: 5rem;
  width: 10rem;
}

.area__enc {
  height: 20rem;
  width: 40rem;
}

.button__enc {
  bottom: 4rem;
  margin: auto;
  display: flex;
  height: 5rem;
  width: 5rem;
  background-color: var(--background-color-blue);
  border: var(--border--grey);
  border-radius: 50%;
  color: var(--text-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
} */