@import "../_global.css";
@import "../_header.css";

@media screen and (min-width: 70rem) {
  body > div {
    flex-direction: column;
  }
}
main {
  flex: 1;
}
.intro {
}
  .intro h1 {
    font-size: var(--font-size-huge);
    text-align: center;
    margin: var(--spacing-larger);
  }
  @media screen and (max-width: 60rem) {
    .intro p {
      margin: var(--spacing-large);
    }
    .intro h1 {
      font-size: var(--font-size-large);
    }
  }

nav.katas {
  order: -1;
  align-self: center;
  margin-bottom: var(--spacing-medium);
}
@media screen and (max-width: 60rem) {
  nav.katas {
    text-align: center;
  }
}
  nav.katas a {
    text-decoration: none;
    font-size: var(--font-size-large);
    padding: var(--spacing-small);
    padding-bottom: 0;
  }
  nav.katas a:hover {
    color: var(--color-foreground-main);
  }
  .page-home nav.katas a.groups,
  .page-kata.versions nav.katas a.versions,
  .page-kata.groups nav.katas a.groups {
    box-shadow: inset 0 -30px 0 var(--color-foreground-highlight-3rd), 0 2px 0 var(--color-foreground-highlight-3rd);
    font-weight: bold;
  }
  nav.katas a.random {
    color: var(--color-foreground-highlight);
  }
  nav.katas ~ nav.katas.sublevel a {
    font-size: var(--font-size-medium);
  }
  .page-home nav.katas ~ nav.katas.sublevel a.all,
  .page-kata.groups.all nav.katas ~ nav.katas.sublevel a.all,
  .page-kata.groups.hard nav.katas ~ nav.katas.sublevel a.hard,
  .page-kata.groups.medium nav.katas ~ nav.katas.sublevel a.medium,
  .page-kata.groups.easy nav.katas ~ nav.katas.sublevel a.easy,
  .page-kata.versions.popular nav.katas ~ nav.katas.sublevel a.popular,
  .page-kata.versions.chronological nav.katas ~ nav.katas.sublevel a.chronological
  {
    box-shadow: inset 0 -30px 0 var(--color-foreground-highlight-3rd), 0 2px 0 var(--color-foreground-highlight-3rd);
    font-weight: bold;
  }

h2 .stats {
  display: block;
  color: var(--color-secondary);
  font-size: small;
  font-weight: normal;
  text-decoration: none;
}
h2 a {
  color: var(--color-foreground-main);
  font-size: var(--font-size-larger);
  text-decoration: none;
}

.group {
  display: inline-block;
  vertical-align: top;
  margin: 0 var(--spacing-small) var(--spacing-small) 0;
  padding: var(--spacing-small) var(--spacing-medium);
  border: 1px solid var(--color-foreground-highlight-3rd);
  background-image: linear-gradient(121deg, var(--color-background-main) 80%, var(--color-foreground-highlight-4th));
  /* Make all kata groups visible on first sight. */
  max-height: 6em;
  overflow: hidden;
  transition: 2s;
}
  .group:hover {
    max-height: 100em; /* 100em seems to animate, 100% does not */
    transition-delay: 0.5s; /* delay the "opening" of the group, so one can just move the mouse over it without a lot of jumping boxes */
  }
  .group a {
    display: block;
  }
  .group h3 {
    margin: 0.2em 0;
    font-size: 1.1em;
  }
  @media screen and (max-width: 600px) {
    .group {
      display: block;
      margin-left: 0;
    }
  }

.group .kata {
  display: flex;
  margin-top: var(--distance-small);
}
  .kata:hover .notification-bubble {
    opacity: 0.3;
  }

.notification-bubble {
  color: var(--color-foreground-highlight-2nd);
  margin-left: var(--spacing-small);
  padding: 0 var(--spacing-small);
  font-weight: bold;
}
.notification-bubble.new {
  color: white;
  background: red;
  transform: rotate(-10deg);
  transform-origin: -100% 0;
  margin-left: 0;
}