/*
 * The holding page (index.html), until launch, and the preview login.
 * Moved out of index.html unchanged, because the site's Content Security
 * Policy doesn't allow styles written inside a page.
 */
  * {    margin: 0px;
    padding: 0px;
  }
  body {
    display: grid;
    place-items: center;
    background-color: #814b7a;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    height: 100vh;
	background:url(assets/1.jpg);

    background-image: radial-gradient(circle at 44% 13%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 98%,transparent 98%, transparent 100%),radial-gradient(circle at 87% 84%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 46%,transparent 46%, transparent 100%),radial-gradient(circle at 84% 60%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 40%,transparent 40%, transparent 100%),radial-gradient(circle at 21% 32%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 28%,transparent 28%, transparent 100%),radial-gradient(circle at 57% 12%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 34%,transparent 34%, transparent 100%),radial-gradient(circle at 33% 60%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 29%,transparent 29%, transparent 100%),radial-gradient(circle at 3% 11%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 60%,transparent 60%, transparent 100%),radial-gradient(circle at 0% 74%, hsla(237,0%,100%,0.05) 0%, hsla(237,0%,100%,0.05) 87%,transparent 87%, transparent 100%),linear-gradient(225deg, rgb(129,75,121),rgb(64,38,60));
  }
  body img {max-width:400px;    margin: 10vh;}
  body {

	background-size: 400% 400%;
	animation: gradient 45s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* The preview login (/login), in the holding page's colours. */
.login {
  font-family: system-ui, sans-serif;
  color: #fff;
}

.login main {
  display: grid;
  gap: 1rem;
  width: min(22rem, 88vw);
}

.login h1 {
  font-size: 1.75rem;
  font-weight: 300;
}

.login form {
  display: grid;
  gap: 0.6rem;
}

.login label {
  font-weight: 600;
}

.login input {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid #fff;
  background: #fff;
  color: #202430;
}

.login button {
  font: inherit;
  font-weight: 600;
  justify-self: start;
  padding: 0.65rem 1.4rem;
  border: 1px solid #fff;
  background: #202430;
  color: #fff;
  cursor: pointer;
}

.login :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.login .login-error {
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  background: #202430;
}