/* Global CSS variables */
:root {
  --spacing-company: 12rem;
  --font-weight: 400;
  --border-radius: 0;
  }

[data-theme="light"] {
  --primary: #3298DE;
}

/* Typography */
h2,
h3,
hgroup > :last-child {
  font-weight: 200;
}

.single {
  padding-top:8rem;
}

footer {
  text-align:center;
}

.footer-grid {
  grid-row-gap:1rem;
}

/* Font in footer */
small {
  color: var(--muted-color);
}

.h-rule {
  margin-bottom:1rem;
  border: 1px solid darkgrey;
}

/* Navbar */
nav {
  background-color: white;
/*  opacity: 0.8;*/
  position: fixed;
  /* Bottom Border option 1) */
/*  border-bottom: 2px solid #3C4856;*/

  /* Bottom Border option 2) */
  border: 1rem solid transparent;
  border-width: 0 0 1rem 0;
  border-image: url("/assets/bar.png") 20% repeat;
}

/* Logo in navbar */
.logo {
/*    display: inline-block;*/
  height: auto;
  max-height: 2rem;
}


header {
  padding: var(--spacing-company) 0;
}

header hgroup > :last-child {
  color: var(--h3-color);
}

header hgroup {
  margin-bottom: var(--spacing-company);
}

/* Nav */
summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) {
  background-color: transparent;
  color: var(--contrast-hover);
}

/* Main */
@media (min-width: 992px) {
  main .grid {
    grid-column-gap: var(--spacing-company);
    grid-template-columns: auto 25%;
  }
}