/* Hero section */
.hero {
  text-align: center;
  padding: 6rem 2rem 5rem;
  margin: -0.8rem -0.8rem 2rem;
  background-image: url('../assets/hero.jpg');
  background-size: cover;
  background-position: center 30%;
  position: relative;
  border-radius: 0.4rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4rem;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 540px;
  margin: 0 auto 2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.hero .md-button {
  border-color: #ffffff;
  color: #ffffff;
}

.hero .md-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.hero .md-button--primary {
  background-color: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.hero .md-button--primary:hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* Subject / Object — green */
.keys kbd.key-subject,
.keys kbd.key-object {
  background-color: #e8f5e9;
  border-color: #4caf50;
  color: #1b5e20;
  box-shadow: 0 1px 0 #4caf50, 0 0 0 1px #4caf50;
}

/* Verb forms V1 V2 V3 V1-ing — pink */
.keys kbd.key-v1,
.keys kbd.key-v2,
.keys kbd.key-v3,
.keys kbd.key-v1-ing {
  background-color: #fce4ec;
  border-color: #e91e63;
  color: #880e4f;
  box-shadow: 0 1px 0 #e91e63, 0 0 0 1px #e91e63;
}

/* Auxiliaries — blue */
.keys kbd.key-did,
.keys kbd.key-did-not,
.keys kbd.key-was-were,
.keys kbd.key-was-were-not,
.keys kbd.key-were,
.keys kbd.key-were-not,
.keys kbd.key-will,
.keys kbd.key-will-not,
.keys kbd.key-be,
.keys kbd.key-being,
.keys kbd.key-been,
.keys kbd.key-had,
.keys kbd.key-had-not,
.keys kbd.key-had-been,
.keys kbd.key-had-not-been,
.keys kbd.key-had-been-being,
.keys kbd.key-had-not-been-being,
.keys kbd.key-have-has,
.keys kbd.key-have-has-not,
.keys kbd.key-have-has-been,
.keys kbd.key-have-has-not-been,
.keys kbd.key-have-has-been-being,
.keys kbd.key-have-has-not-been-being,
.keys kbd.key-do-does,
.keys kbd.key-do-does-not,
.keys kbd.key-is-am-are,
.keys kbd.key-is-am-are-not,
.keys kbd.key-am-is-are,
.keys kbd.key-am-is-are-not,
.keys kbd.key-would,
.keys kbd.key-would-not,
.keys kbd.key-would-have,
.keys kbd.key-would-not-have,
.keys kbd.key-would-have-been,
.keys kbd.key-would-not-have-been,
.keys kbd.key-if,
.keys kbd.key-have,
.keys kbd.key-been-being {
  background-color: #e3f2fd;
  border-color: #2196f3;
  color: #0d47a1;
  box-shadow: 0 1px 0 #2196f3, 0 0 0 1px #2196f3;
}

/* Dark mode */
[data-md-color-scheme="slate"] .keys kbd.key-subject,
[data-md-color-scheme="slate"] .keys kbd.key-object {
  background-color: #1b5e20;
  border-color: #4caf50;
  color: #c8e6c9;
  box-shadow: 0 1px 0 #4caf50, 0 0 0 1px #4caf50;
}

[data-md-color-scheme="slate"] .keys kbd.key-v1,
[data-md-color-scheme="slate"] .keys kbd.key-v2,
[data-md-color-scheme="slate"] .keys kbd.key-v3,
[data-md-color-scheme="slate"] .keys kbd.key-v1-ing {
  background-color: #880e4f;
  border-color: #e91e63;
  color: #fce4ec;
  box-shadow: 0 1px 0 #e91e63, 0 0 0 1px #e91e63;
}

[data-md-color-scheme="slate"] .keys kbd.key-did,
[data-md-color-scheme="slate"] .keys kbd.key-did-not,
[data-md-color-scheme="slate"] .keys kbd.key-was-were,
[data-md-color-scheme="slate"] .keys kbd.key-was-were-not,
[data-md-color-scheme="slate"] .keys kbd.key-were,
[data-md-color-scheme="slate"] .keys kbd.key-were-not,
[data-md-color-scheme="slate"] .keys kbd.key-will,
[data-md-color-scheme="slate"] .keys kbd.key-will-not,
[data-md-color-scheme="slate"] .keys kbd.key-be,
[data-md-color-scheme="slate"] .keys kbd.key-being,
[data-md-color-scheme="slate"] .keys kbd.key-been,
[data-md-color-scheme="slate"] .keys kbd.key-had,
[data-md-color-scheme="slate"] .keys kbd.key-had-not,
[data-md-color-scheme="slate"] .keys kbd.key-had-been,
[data-md-color-scheme="slate"] .keys kbd.key-had-not-been,
[data-md-color-scheme="slate"] .keys kbd.key-had-been-being,
[data-md-color-scheme="slate"] .keys kbd.key-had-not-been-being,
[data-md-color-scheme="slate"] .keys kbd.key-have-has,
[data-md-color-scheme="slate"] .keys kbd.key-have-has-not,
[data-md-color-scheme="slate"] .keys kbd.key-have-has-been,
[data-md-color-scheme="slate"] .keys kbd.key-have-has-not-been,
[data-md-color-scheme="slate"] .keys kbd.key-have-has-been-being,
[data-md-color-scheme="slate"] .keys kbd.key-have-has-not-been-being,
[data-md-color-scheme="slate"] .keys kbd.key-do-does,
[data-md-color-scheme="slate"] .keys kbd.key-do-does-not,
[data-md-color-scheme="slate"] .keys kbd.key-is-am-are,
[data-md-color-scheme="slate"] .keys kbd.key-is-am-are-not,
[data-md-color-scheme="slate"] .keys kbd.key-am-is-are,
[data-md-color-scheme="slate"] .keys kbd.key-am-is-are-not,
[data-md-color-scheme="slate"] .keys kbd.key-would,
[data-md-color-scheme="slate"] .keys kbd.key-would-not,
[data-md-color-scheme="slate"] .keys kbd.key-would-have,
[data-md-color-scheme="slate"] .keys kbd.key-would-not-have,
[data-md-color-scheme="slate"] .keys kbd.key-would-have-been,
[data-md-color-scheme="slate"] .keys kbd.key-would-not-have-been,
[data-md-color-scheme="slate"] .keys kbd.key-if,
[data-md-color-scheme="slate"] .keys kbd.key-have,
[data-md-color-scheme="slate"] .keys kbd.key-been-being {
  background-color: #0d47a1;
  border-color: #2196f3;
  color: #bbdefb;
  box-shadow: 0 1px 0 #2196f3, 0 0 0 1px #2196f3;
}