/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* vars */
/*********************/
:root {
  --nav-height: 8vh;
  --footer-height: 6vh;
  --content-height: calc( 100vh - var(--nav-height) - var(--footer-height));
  --content-padding: 2rem;

  --loading-spinner: 200px;

  --colour-blue: hsl(215, 64%, 48%);
  --colour-green: hsl(91, 66%, 32%);

  --colour-backdrop: hsl(186 27.8% 92.9%);
  --colour-backdrop-darker: hsl(186 37.8% 72.9%);
  --colour-headings: hsl(211 35.2% 41.8%);
  --colour-bright-accent: hsl(0 100% 62.9%);
  --colour-second-accent: hsl(39 100% 62.9%);
  --colour-body-text: hsl(45 22.2% 3.5%);
  --colour-body-text-light: hsl(45 22.2% 33.5%);
  /*above colours from source 11 in Obsidian colour tracker*/

}

.wrapper {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

.main-head {
  grid-area: header;
  background: url('./img/bracelet-background.jpg') center;
  background-size: cover;
}

.logo {
  max-height: 20vh;
  margin-left: 2rem;
  padding: 1rem;
}

.content {
  grid-area: content;
  background-color: var(--colour-backdrop);
  color: var(--colour-blue);
  font-family: "carlmarx", sans-serif;
}

.content p{
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  padding: 1rem;
}

h2 {
  color: var(--colour-green);
  padding-left: 1rem;
  margin-top: .5rem;
  font-size: 2rem;
}

.main-nav {
  grid-area: nav;
}

.side {
  grid-area: sidebar;
}

.ad {
  grid-area: ad;
}

.main-footer {
  grid-area: footer;
  background-color: var(--colour-backdrop);
  color: var(--colour-blue);
  font-family: "carlmarx", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  padding: 1rem;
}

.main-footer a {
  text-decoration: none;
  color: var(--colour-green);
}

@media (width >= 500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    gap: 2rem;
    grid-template-areas:
      "header  header"
      "sidebar content"
      ".      footer";

      background-color: var(--colour-backdrop);
      min-height: 100vh;
  }

  .side {
    margin-right: 2rem;
  }

  .main-footer {
    margin-right: 2rem;
    text-align: right;
  }

}

@media (width >= 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr 1fr;
    grid-template-areas:
      "header header  header header"
      ".    content sidebar sidebar"
      ".    content sidebar sidebar"
      ". .  footer footer";

      background-color: var(--colour-backdrop);
  }

  .logo {
    max-height: 25vh;
  }


}