html, body {
  margin: 0;
  padding: 0;
  color: white;
  background: hsl(179, 28%, 51%);
}

:root {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 130%;
  box-sizing: border-box;
  min-height: 100%;
  position: relative;
  --notice-hue: 56;
  --notice-saturation: 83%;
  --notice-lightness: 93%;
  --notice-hsl: hsl(var(--notice-hue), var(--notice-saturation), var(--notice-lightness));
  --error-hue: 0;
  --error-saturation: 83%;
  --error-lightness: 93%;
  --error-hsl: hsl(var(--error-hue), var(--error-saturation), var(--error-lightness));
}

@media screen and (max-width: 470px) {
  html {
  font-size: 14px;
  }
}
@media screen and (max-width: 400px) {
  html {
  font-size: 12px;
  }
}

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

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

input:focus, a:focus {
  outline: 1px dotted #333;
}

body > article, body > main {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

body::before {
  content: "";
  display: block;
  position: absolute;
  height: 0.3rem;
  width: 100%;
  top: 0;
  background-image: repeating-linear-gradient(
      300deg,
      transparent, transparent 1.6rem,
      hsla(0, 0%, 37%, 0.3) 1.65rem,
      hsla(0, 0%, 37%, 0.3) 3.35rem,
      transparent 3.4rem
  );
}

body.neutral::before {
  background-image: repeating-linear-gradient(
      300deg,
      transparent, transparent 1.6rem,
      hsla(185, 40%, 37%, 0.3) 1.65rem,
      hsla(185, 40%, 37%, 0.3) 3.35rem,
      transparent 3.4rem
  );
}

body>header {
  margin-top: 5rem;
}

body>header h1 {
  color: white;
  font-size: 1.6rem;
  font-weight: lighter;
  width: 100%;
  text-align: center;
  margin: 0 0 1rem;
  text-shadow: 0 0 0.25rem #666;
  position: relative;
}

body>header h1::before {
  content: "";
  font-size: 4rem;
  font-family: "Lable Icon";
  position: absolute;
  top: -3rem;
  width: 100%;
  text-align: center;
  left: 0;
}

body>header h2 {
  color: white;
  font-size: 1.24rem;
  width: 100%;
  text-align: center;
  margin: 0 0 1rem;
  font-weight: lighter;
  text-shadow: 0 0 0.25rem #666;
}

.dialogue-block {
  width: 100%;
  max-width: 31.25rem;
  min-width: 20rem;
  margin: 0 auto;
  min-height: 30rem;
}

.dialogue-block-feedback-space {
  width: 100%;
  max-width: 48rem;
  min-width: 20rem;
  margin: 0 auto;
  min-height: 40rem;
}

.notice-area, .error-area {
  width: 100%;
  max-width: 46.25rem;
  min-width: 20rem;
  margin: 0 auto;
}

@media screen and (max-width: 550px) {
  .dialogue-block {
  width: 100vw;
  }
}

.dialogue-block>* + * {
  margin-top: 2rem;
}

.dialogue-block p, .notice-area>section, .error-area>section {
  text-align: left;
  font-size: 1rem;
  color: white;
  margin: 0 1.25rem 1rem;
}

.form-row-with-feedback-space {
  display: flex;
  justify-content: space-between;
}

.form-row-with-feedback-space > *:first-child {
  width: 28rem;
}

.form-row-with-feedback-space > aside:last-child {
  width: 16rem;
}

@media screen and (max-width: 800px) {
  .form-row-with-feedback-space {
    flex-direction: column;
  }
}

.break-out-feedback  {
  background-color: gold;
  padding: .2rem .4rem;
  border-radius: .4rem;
  margin-top: .6rem;
}

.break-out-feedback p, .break-out-feedback li, .break-out-feedback h3 {
  color: black;
  font-size: 0.8rem;
}

.break-out-feedback li {
  list-style-position: inside;
}

@media screen and (max-width: 800px) {
  .break-out-feedback {
    align-self: flex-end;
  }
}


@media screen and (min-width: 1001px) {
  .break-out-feedback {
    /*position: absolute;*/
    width: 24rem;
    
  }
}

.notice-area>section p, .error-area>section p {
    color: black;
    margin: 0;
}

.notice-area>section p + p, .error-area>section p + p {
    margin-top: .8rem;
}

.notice-area>section, .error-area>section {
  text-align: left;
  font-size: 1rem;
  color: black;
  padding: .4rem .8rem .4rem 2.8rem;
  border-radius: .25rem;
  background-image: linear-gradient(var(--notice-hsl), var(--notice-hsl));
  background-position: 2rem 0;
  background-repeat: no-repeat;
  position: relative;
}

.error-area>section {
  background-image: linear-gradient(var(--error-hsl), var(--error-hsl));
}

.notice-area>section::before, .error-area>section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2rem;
  border-radius: .25rem 0 0 .25rem;
}

.error-area>section::before {
  border-right: .2rem solid hsl(var(--error-hue), 100%, 60%);
}

.notice-area-general>section::before {
  background-position: top left;
  background-image: repeating-linear-gradient(
    120deg,
    hsla(var(--notice-hue), var(--notice-saturation), var(--notice-lightness), .76) .35rem,
    transparent .4rem,
    transparent .8rem,
    hsla(var(--notice-hue), var(--notice-saturation), var(--notice-lightness), .76) .85rem,
    hsla(var(--notice-hue), var(--notice-saturation), var(--notice-lightness), .76) 1.25rem
  );
}

.error-area-general>section::before {
  background-position: top left;
  background-image: repeating-linear-gradient(
    120deg,
    hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), .76) .35rem,
    transparent .4rem,
    transparent .8rem,
    hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), .76) .85rem,
    hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), .76) 1.25rem
  );
}

.notice-area-info>section::before {
  background-position: top left;
  background-color: hsla(var(--notice-hue), var(--notice-saturation), var(--notice-lightness), .76);
}

.notice-area-info>section::after {
  content: "?";
  display: block;
  line-height: 1rem;
  font-size: .7rem;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  left: .5rem;
  width: 1rem;
  height: 1rem;
  top: calc(50% - .5rem);
  background-color: hsl(var(--notice-hue), 60%, 40%);
  border-radius: .5rem;
}

.dialogue-block.information p {
  display: flex;
  align-items: center;
  padding: .6rem 1rem;
  margin: 0 1.25rem 1rem;
  background-color: hsl(var(--notice-hue), 50%, 96%);
  font-size: 1rem;
  color: #333;
}

.information p::before {
  margin-right: 0.5rem;
  content: '';
  font-family: 'Lable Small Icon';
  color: #53B2B1;
  font-size: 1.5rem;
}

p.big-focus {
  text-align: center;
  font-weight: 600;
  font-size: 160%;
  margin-bottom: 1.6rem;
}

p.username-focus {
  text-align: center;
  font-size: 120%;
  opacity: 0.8;
  margin: 1.3rem 0;
}

p.username-focus * {
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px 1px rgba(98, 108, 107, 0.4);
  padding: 0.4rem 1rem 0.4rem 1rem;
  height: 2.625rem;
}

@media screen and (max-width: 550px) {

  .dialogue-block.information p {
  font-size: 0.8rem;
  }

  .dialogue-block.information p::before {
  font-size: 1.3rem;
  }
}

.form-row {
  position: relative;
  margin: 0 1.25rem 1.3rem;
}

.form-row--input {
  margin-bottom: 0;
}

.form-row--input:last-of-type {
  margin-bottom: 1.3rem;
}

.form-row label, .form-row .label-like {
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  line-height: 2rem;
  margin: 0;
}

.form-buttons, .button-div {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin-top: 1rem;
}

.form-buttons * {
  margin-right: 1rem;
}

@media screen and (max-width: 800px) {
  form .form-row label {
  position: static;
  display: block;
  text-align: inherit;
  width: unset;
  top: unset;
  left: unset;
  margin-bottom: .3rem;
  }
}

.pin-entry-widgets {
  display: flex;
  justify-content: space-evenly;
}

input[type=text], input[type=password] {
  border: none;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  color: #333;
  background-color: #fbfdfd;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px 1px rgba(98, 108, 107, 0.4);
  width: 100%;
  padding: 0.4rem 3rem 0.4rem 1rem;
  height: 2.625rem;
}

input[type=text].codelike {
  font-family: "Hack", monospace;
}

input:invalid, input:focus {
  box-shadow: none;
}
input[type=text]:invalid, input[type=password]:invalid {
  border-bottom-color: red;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: hsl(0, 0%, 90%);
  color: #111;
  outline: 1px dotted hsla(0, 0%, 0%, 0.8);
}
.neutral input[type=text], .neutral input[type=password] {
  border-bottom-color: hsl(185, 40%, 45%);
}
.neutral input[type=text]:focus, .neutral input[type=password]:focus {
  border-bottom-color: hsl(185, 90%, 40%);
  background-color: hsl(185, 40%, 90%);
}

p.disabled-input-like {
  background-color: hsla(0, 0%, 0%, 0.1);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px 1px hsla(174, 4.9%, 40.4%, 0.4);
  padding: 0.4rem 3rem 0.4rem 1rem;
  height: 2.625rem;
  margin: 0;
  line-height: 2rem;
}

/*
  We provide a button to toggle password-hiding for all browsers. Edge provides its own 'eye' though, which
  clashes with our own. This disables Edge's eye. There doesn't seem to be a more generic way to do this yet.
  (March 2022)
*/
input::-ms-clear, input::-ms-reveal {
  display: none;
}

input:disabled, input.disabled {
  background-color: #ccc;
}

input#alias, input#pin-entry {
  background-image: url('login.svg');
  background-position: right 0.4rem center;
  background-repeat: no-repeat;
}
input#alias {
  background-image: url('user.svg');
}

input#pin-entry {
  width: 16rem;
  font-size: 3rem;
  letter-spacing: 1rem;
  text-align: center;
}

/* Combining these does not seem to work… */
::placeholder {
  color: #999;
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
}
:focus::placeholder {
  color: hsl(185, 90%, 25%);
}
::-moz-placeholder {
  color: #999;
  font-style: italic;
}
:focus::-moz-placeholder {
  color: hsl(185, 90%, 25%);
}
:-ms-input-placeholder {
  color: #999;
  font-style: italic;
}
:focus:-ms-input-placeholder {
  color: hsl(185, 90%, 25%);
}
::-webkit-input-placeholder {
  color: #999;
  font-style: italic;
}
:focus::-webkit-input-placeholder {
  color: hsl(185, 90%, 25%);
}

input[type=submit], button, .button-like {
  border-radius: 1.625rem;
  border: 0.05rem solid hsla(185, 80%, 35%, 0.8);
  box-shadow: 0.05rem 0.05rem 0.05rem 0 hsla(0, 0%, 0%, 0.2);
  color: white;
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  padding: .375rem 1.25rem;
  display: block;
  background-color: #c34143;
  cursor: pointer;
  text-shadow: 0 0.05rem 0 hsla(185, 20%, 40%, 0.8);
  min-width: 8rem;
  user-select: none;
}

.button-like {
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

button.in-field-icon-button {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  border-radius: unset;
  border: none;
  box-shadow: unset;
  color: black;
  font-size: 1.3rem;
  font-family: 'Lable Icon';
  font-weight: 400;
  padding: 0;
  display: block;
  background-color: transparent;
  text-shadow: unset;
  min-width: unset;
}

input[type=submit]:active, button:active {
  background-color: #922f31;
}

button.in-field-icon-button:active {
  background-color: transparent;
  color: hsla(185, 20%, 40%, 0.8);
}

input[type=submit]:disabled, button:disabled {
  background-color: #aaaaaa;
  color: #dddddd;
  cursor: not-allowed;
}

button.in-field-icon-button:disabled {
  background-color: unset;
  color: #999;
}

input[type=submit].alternative, button.alternative {
  color: #555;
  padding: 6px 19px;
  background-color: #fbfdfd;
  border: 0.05rem solid hsla(185, 80%, 35%, 0.8);
  border-radius: 25px;
}

.note, .hint, p.note, p.hint {
  font-size: 0.775rem;
  color: white;
}

.hint, p.hint {
  font-style: italic;
  text-align: right;
}
.note a, .hint a {
  color: white;
}
.hint em {
  font-style: normal;
  font-weight: 600;
}

.notice {
  font-weight: 600;
  text-align: center;
}

.error, p.error-inline {
  color: black;
  font-weight: 600;
  position: relative;
  padding: .25rem .5rem;
  background-color: #fadb0e;
  background-image: repeating-linear-gradient(
      300deg,
      transparent, transparent 1.6rem,
      rgba(0, 0, 0, 0.06) 1.65rem,
      rgba(0, 0, 0, 0.06) 3.35rem,
      transparent 3.4rem
  );
  background-position-x: -.3rem;
  margin-bottom: .5rem;
}

.error--top {
  margin-bottom: 0;
  margin-top: .5rem;
}
.error--top.error--centre {
  background-position-x: -.7rem;
}

.error::after {
  content: '';
  position: absolute;
  left: 2rem;
  bottom: -1.25rem;
  border: .625rem solid transparent;
  border-top-color: #fadb0e;
}

.error--top::after {
  top: -1.25rem;
  bottom: unset;
  border-bottom-color: #fadb0e;
  border-top-color: transparent;
}

.error--centre::after {
  left: calc(50% - .625rem);
}

.clue {
  text-align: left;
  font-size: 1rem;
  color: white;
  margin: 0 1.25rem 1rem;
}

.dialogue-block .dialogue-notice p {
  padding: 0 .5rem;
  margin: 2rem auto 0 auto;
  text-align: center;
  font-size: 0.775rem;
  color: #333;
}

.dialogue-block ul {
  margin: 0;
  padding: 0;
}

.sad-block {
  padding-left: 4rem;
  position: relative;
}

.sad-block::before {
  content: "🙁";
  display: block;
  top: 1rem;
  position: absolute;
  width: 3.6rem;
  left: 0;
  height: 3.6rem;
  text-indent: -9999rem;
  background-image: url('/ohno.svg');
  background-size: 100%;
}

.domain, .item {
  list-style-type: none;
  border: 0.05rem solid hsla(185, 80%, 35%, 0.8);
  background-color: #fbfdfd;
  color: #222;
  border-radius: .25rem;
  box-shadow: 0 2px 5px rgba(98, 108, 107, .25);
  margin: 0 1.25rem 1rem;
}

.item > a {
  padding: 1rem;
  width: 100%;
  display: inline-block;
}

.item.setting, .item.admin {
  background-color: #dddddd;

  /* For the 'settings/admin banner': */
  position: relative;
  overflow: hidden;
}

/* Display a suitable icon inside of a banner on top of the button (banner). */
.item.setting::before, .item.admin::before {
  content: "";
  top: 0.5rem;
  right: -2.5rem;
  height: 1.7rem;
  width: 6rem;
  display: inline-block;
  position: absolute;
  transform: rotate(45deg);
  transform-origin: top center;
  background-color: white;
}

/* Display a suitable icon inside of a banner on top of the button (icon). */
.item.setting::after, .item.admin::after {
  content: "";
  font-family: "Lable Small Icon";
  position: absolute;
  right: .5rem;
  top: .5rem;
  font-size: 1rem;
  color: #555;
}
.item.admin::after {
  content: "";
}

.item.logout {
  background-color: hsl(155, 51%, 61%);
  position: relative;
}

.item.logout a {
  font-weight: bold;
  position: relative;
  color: hsl(155, 100%, 19%);
}

.item.logout a::before {
  content: "";
  display: inline-block;
  position: absolute;
  font-family: "Lable Icon";
  font-size: 2rem;
  font-weight: normal;
  color: hsl(155, 100%, 19%);
  right: 1rem;
  top: 1rem;
}


.item.rp-item {
    padding: .6rem;
}


.domain a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
  text-decoration: none;
}

.domain a h2 {
    font-size: inherit;
    font-style: inherit;
    font-weight: 600;
    margin: 0;
}

.domain a p {
    color: #555;
    margin: .7rem 0 0 0;
}

.domain a::before {
  color: hsl(174.5, 5.4%, 90.8%);
  font-size: 2rem;
  content: '';
  font-family: "Lable Small Icon";
}

.domain a:focus::before {
  color: hsl(174.5, 66.4%, 42.8%);
}

.domain:hover {
  background-color: #e7ebeb;
}

.domain:active {
  background-color: #d8dada;
}

body>footer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: right;
  font-size: 0.775rem;
}

body>footer>ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  padding: 0 1rem 0 0;
}

body>footer>ul::before {
  content: "";
  display: inline-block;
  flex: 0 1 100%;
  background-image: repeating-linear-gradient(300deg,
    transparent, transparent 1.6rem,
    hsla(185, 40%, 37%, 0.3) 1.65rem, hsla(185, 40%, 37%, 0.3) 3.35rem,
    transparent 3.4rem);
}

body>footer>ul>li {
  list-style: none;
  display: inline-block;
  margin: 0;
  flex: 0 1 auto;
  padding: 0.2rem;
  margin-left: 0.2rem;
}
body>footer>ul>li + li {
  margin-left: 2rem;
}

a {
  /* text-decoration: none; */
  color: #222;
}

body>footer a {
  color: hsla(185, 40%, 40%, 0.9);
  font-weight: 600;
}

ul.keylist {
  padding: 0 3rem;
}

ul.keylist > li {
  list-style: none;
  margin-bottom: 1rem;
}

.key-block {
  border-radius: 1rem;
  background-color: rgba(0,0,0,0.3);
  padding: .3rem .8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.key-block .key-data {
  text-align: center;
}

.key-block span {
  display: block;
}

.key-registration-date {
  font-style: italic;
  font-size: .8rem;
}

span.codelike {
  font-family: "Hack", monospace;
  font-size: 1.3rem;
  line-height: 2.5rem;
}

button {
  cursor: pointer;
}

button.icon-button-remove {
  position: relative;
  text-indent: -9999rem;
  width: 2rem;
  height: 2rem;
  min-width: 1rem;
  padding: 0;
  border-radius: 0.2rem;
  border-width: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

button.icon-button-remove:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

button.icon-button-remove::after {
  content: "";
  text-indent: 0;
  font-family: "Lable Icon";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.4rem;
  line-height: 2rem;
  color: white;
  width: 100%;
  height: 100%;
}

button.button-key-add {
  margin-left: 3rem;
}

section.password-strength {
  margin: 0 1.25rem;
}

svg.strength-meter {
  display: block;
  height: 2rem;
  width: 100%;
  margin-top: 1rem;
}

svg.strength-meter > rect {
  stroke: beige;
  height: 1rem;
}

svg.strength-meter > rect#meter-background {
  fill: #CCC;
  width: 100%;
}

svg.strength-meter > rect#meter-foreground {
  fill: #62C15E;
  width: 0%;
}

/* locks */
#locks {
  display: flex;
  height: 11rem;
  justify-content: space-evenly;
}

/* lock */
.lock {
  width: 96px;
  fill: #333;
}
.lock > svg {
  width: 100%;
  height: auto;
}
.lock > svg:first-child {
  transform: translateY(40px);
}
.lock > svg:last-child {
  position: relative;
  z-index: 1;
}

/* open and failed */
.lock-open,
.lock-failed {
  animation: shake .6s cubic-bezier(.36,.07,.19,.97);
}
/* open */
.lock-open > svg {
  animation: success .2s .6s ease-in both;
}
.lock-open > svg:first-child {
  transform: translateY(20px);
  transition: transform .2s .6s ease-in;
}
/* failed */
.lock-failed > svg {
  fill: rgb(110, 24, 24);
  transition: fill .2s .6s ease-in;
}
.lock-failed > svg:first-child {
  animation: false-open .2s ease-in-out .6s;
}

@keyframes shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }
  40%,
  60% {
    transform: translateX(4px);
  }
}
@keyframes success {
  100% {
    fill: gold;
  }
}
@keyframes false-open {
  0% {
    transform: translateY(40px);
  }
  50% {
    transform: translateY(36px);
  }
  100% {
    transform: translateY(40px);
  }
}

.password-strength li {
  margin-left: 2rem;
}