:root {
  --flashy-orange: #ff601a;
  --dark: #1c1c1c;
  --white: #ffffff;
}

/* Login page bg */
body.login {
  background-color: var(--white);
}

/* Logo */
#login h1 a {
  background-image: url('../images/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 80px;
  display: block;
}

/* Links */
.login #login a,
.login #nav a,
.login #backtoblog a {
  font-size: 1rem;
  color: var(--dark);
  transition: color 0.3s ease-in-out;
}

.login #login a:hover,
.login #nav a:hover,
.login #backtoblog a:hover,
.login #login a:focus,
.login #nav a:focus,
.login #backtoblog a:focus {
  color: var(--flashy-orange);
}

/* Nav + privacy */
.login #backtoblog,
.login #nav {
  padding: 0;
}
.login .privacy-policy-page-link {
  text-align: left;
  margin: 0;
}

/* Form */
.login form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}

/* Messages */
.login .message { color: green; }
.login .error { color: red; }

/* Inputs */
.login input[type="text"],
.login input[type="password"] {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  border: 1px solid #ddd;
  font-size: 1rem;
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
}

.login input[type="text"]:focus-visible,
.login input[type="password"]:focus-visible {
  outline: 0.125rem solid var(--dark);
}

.login input[type="text"]::placeholder,
.login input[type="password"]::placeholder {
  color: var(--dark);
  opacity: 1;
}

/* Submit button → flashy orange */
.login .button-primary,
.login .button-primary:hover {
  --tw-border-opacity: 1;
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  border-color: rgba(255, 96, 26, var(--tw-border-opacity));
}

.login .button-primary {
  background-color: rgba(255, 96, 26, var(--tw-bg-opacity));
  border-radius: 9999px;
  border-width: 1px;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  transition-duration: .15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  text-align: center;
}

.login .button-primary:hover,
.login .button-primary:focus {
  background-color: var(--white);
  color: var(--flashy-orange);
}

/* Labels */
.login label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--dark);
  font-size: 1rem;
  text-align: right;
}
#language-switcher
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}