body {
  --font-color: #7f8084;
  --color-primary: #7f8084;
  --color-secondary: #fcc35f;
  --color-error: #e51845;
  --font-family-sans: 'Comfortaa', sans-serif;
  --font-size: 1.4rem;
  --font-weight: 300;
}

body > .container {
  max-width: 720px;
}

strong {
  font-weight:300;
}

dl dt {
  font-weight:300;
}

dl dt strong {
  font-weight:bold;
}

dl dd {
  margin:0;
}

p a {
  text-decoration:underline;  
}

nav.tabs a:hover {
  border-color:var(--color-secondary);
}

.hero {
  display: flex;
  flex-direction: column;
}

.logo {
  flex: 1;
  flex-direction: column;
}

.logo img {
  width: 100%;
  max-width: 360px;
  margin-bottom:5rem;
}

.logo h3 {
  font-weight: 300;
  font-size:2rem;
}

section {
  margin: 10rem auto;
}

h2 {
  font-weight:300;
}

hr {
  margin: 3rem 0;
}

details.nav-mobile {
  position:fixed;
  top:2rem;
  right:4.5vw;
}

.button.outline {
  border: 1px solid var(--color-lightGrey);  
  border-radius:0;
  background-color:rgba(255,255,255,0.9);  
}

summary.nav-mobile {
  padding:1rem 1.5rem; 
}

details.nav-mobile .card {
  background-color:rgba(255,255,255,0.9);
}

details.nav-mobile > :last-child {
  border-radius:0;  
  position: fixed;
  left: 5vw;
  top: 8rem;
  width: 80vw;
  box-shadow:none;
  -webkit-box-shadow:none;
  border: 1px solid var(--color-lightGrey);  
  border-radius:0;
  padding-top:3rem;  
  padding-bottom:3rem;  
}



@media (max-width: 600px) {
  
  body {
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .logo img {
    max-width:60%;
    margin-top:-5rem;    
  }  

  .mobile-invisible {
    display:none;
  }
  
}

@media (min-width: 600px) {
  .mobile-only {
    display:none !important;
  }
}