:root {
  --green: rgb(108, 175, 118);
  --accent: rgb(128, 128, 190);
  --accent-dark: rgb(98, 98, 160);
  --text: #333;
}
body {
  font-family: Lato, system-ui, sans-serif;
  color: var(--text);
  background: #f4f2ee url('/images/mat.jpg') fixed;
}
h1, h2, h3, .navbar-brand { font-family: Montserrat, system-ui, sans-serif; }
.site-nav { background: var(--green); letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.site-nav .nav-link, .site-nav .navbar-brand { color: #fff !important; }
.site-nav .nav-link:hover { background: rgba(255, 255, 255, .2); border-radius: 4px; }

.hero {
  background-size: cover;
  background-position: center;
}
.hero-inner {
  background: rgba(255, 255, 255, .6);
  padding: 4.5rem 1rem;
  text-align: center;
}
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; color: #111; }

main.container { background: #fff; padding-bottom: 1rem; box-shadow: 0 0 30px rgba(0, 0, 0, .08); }
.content-block { padding: 2rem .5rem; border-bottom: 1px solid #eee; }
.content-block:last-child { border-bottom: 0; }
.content-block img { max-width: 100%; height: auto; }
.section-title, .content-block h2 {
  font-size: 1.4rem; text-transform: uppercase; font-weight: 700; color: #303030; margin-bottom: 1.2rem;
}
/* Organisers' text was written for Bootstrap 3 */
.content-block .container-fluid { padding: 0; }
.content-block .bg-grey { background: transparent; }
.content-block .alert-info, .content-block .alert-success { padding: .75rem 1rem; border-radius: .375rem; }

.reg-form { max-width: 560px; }
.btn-accent { background: var(--accent); color: #fff; border: 0; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.players td, .players th { white-space: nowrap; }
.event-card { border-left: 4px solid var(--accent); transition: box-shadow .2s; }
.event-card:hover { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12); }
.site-footer { color: #666; }
.site-footer a { color: inherit; }

/* Admin */
.admin-table td { font-size: .85rem; vertical-align: middle; }
.admin-table td.wrap { white-space: normal; max-width: 18rem; }