@font-face {
  font-family: "League Spartan Bold";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/league-spartan-bold.woff") format("woff");
}

:root {
  --cream: #FBF7F1;
  --black: #121212;
  --coral: #EA6C74;
  --white: #FFFFFF;
  --purple: #AE7EAA;
  --teal: #56C1BC;
  --blue: #005499;
  --sans: "League Spartan Bold", sans-serif;
  --serif: "Archer SSm A", "Archer SSm B", serif;
  --transition: 400ms ease;
}

body {
  background: var(--cream);
  color: var(--black);
  font-family: var(--serif);
  font-size: 0.875rem;
}

#login {
  width: 640px;
  max-width: 100%;
}

#login > * {
  max-width: 320px;
  margin-inline: auto;
}

#login h1 a {
  width: 5rem;
  height: 5rem;
  transition: background-color var(--transition);
  background: var(--coral);
  mask: url('svg/logo.svg') center / contain no-repeat;
}

#login h1 a:hover {
  background: var(--blue);
}

#login form {
  padding: 1.5rem;
  border: 0.5rem solid var(--black);
  border-radius: 1rem;
}

#nav {
  display: none;
}

#backtoblog {
  display: none;
}

.login .message,
.login .notice,
.login .success {
  padding: 1.5rem;
  border: 0.5rem solid var(--coral);
  border-radius: 1rem;
  box-shadow: none;
}

.intro {
  max-width: 640px !important;
  margin-bottom: 2rem;
  padding-inline: 1.5rem;
  text-align: center;
}

.intro h1 {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: 2.5rem;
  font-weight: normal;
  text-transform: lowercase;
}

.footer {
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
}