@import url("https://fonts.googleapis.com/css2?family=Quintessential&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

/* CSS variables */

:root {
  --font-heading: "Quintessential", Georgia, "Times New Roman", Times, serif;
  --font-body: "Nunito", Arial, Helvetica, sans-serif;
  --colour-first: #a15355;
  --colour-second: #4a764b;
  --colour-white: #fff;
  --colour-black: #000;
  --colour-grey: #ddd;
  --bold: 700;
}

/* Global styles */

html {
  min-height: 100vh;
}

body {
  background: center/cover no-repeat
    url(/media/scentifique-homepage-candles.jpg);
  font-family: var(--font-body);
}

footer a {
  color: var(--colour-white);
  text-decoration: underline;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

.content-heading {
  color: var(--colour-black);
}

.nav-active {
  font-weight: var(--bold);
}

.overlay {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background: white;
  z-index: -1;
}

#hero-message {
  background-color: var(--colour-second);
  color: var(--colour-white);
  margin-bottom: 20rem;
}

#main-nav {
  background-color: var(--colour-first);
}

#main-nav *,
#contact-details {
  color: var(--colour-white);
}

#main-nav *:hover,
#site-header *:hover {
  color: var(--colour-grey);
}

#site-header,
#contact-details {
  background-color: var(--colour-first);
}

#site-header * {
  color: var(--colour-white);
}

#account-dropdown *,
#account-dropdown *:hover {
  color: var(--colour-black);
}

.social-link {
  color: var(--colour-white);
  padding: 0.5rem;
}

/* AllAuth styles */

.allauth-form {
  margin-top: 1.5rem;
}

.allauth-form label:not([for="id_remember"]) {
  display: none;
}

@media (max-width: 320px) {
  #header-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) {
  footer {
    font-size: 0.8rem;
  }
}