/* Fonts used:
      "Archivo Black" Headings
      "Playfair Display" Body */


/* Colour Palette */

:root {
  --primary-text-clr: #352208;
  --secondary-text-clr: #7B6B43;
  --main-bg-clr: #E1BB80;
  --link-clr: #031D44;
  --link-hvr: #052F5F;
}


/* Scrollbar */

html {
  --sb-track-color: #352208;
  --sb-thumb-color: linear-gradient(nulldeg,rgba(250, 235, 210, 1) 0%, rgba(225, 187, 128, 1) 100%);
  --sb-size: 14px;
}

html::-webkit-scrollbar {
  width: var(--sb-size);
}

html::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 2px;
}

html::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 2px;
  border: 1px solid #352208;
}

@supports not selector(::-webkit-scrollbar) {
  html {
      scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

/* Main Code */

html {
  background-image: url('bg-tile.png');
  background-attachment: fixed;
}

.blog-posts {
  background-color: white;
  margin: 10px auto 0;
  border-radius: 2px;
  font-family: "Playfair Display";
  color: var(--primary-text-clr);
  width: 300px;
  border-color: var(--primary-text-clr);
  border-style: solid;
  border-width: 1px;
  height: 300px;
  margin: 10px;
  overflow: auto;
    float: left;
}

::selection {
  color: white;
  background-color: var(--link-hvr);
}

.main {
  position: relative;
  background-color: var(--main-bg-clr);
  margin: 10px auto 0;
  border-radius: 2px;
  font-family: "Playfair Display";
  color: var(--primary-text-clr);
  width: 70%;
  border-color: var(--primary-text-clr);
  border-style: solid;
  border-width: 1px;
  outline-style: solid;
  outline-width: 1px;
  outline-color: white;
}

a {
  color: var(--link-clr);
}
a:hover {
  color: var(--link-hvr);
  text-decoration: none;
}

.nav {
  background: linear-gradient(180deg,rgba(53, 34, 8, 1) 0%, rgba(84, 58, 25, 1) 100%);
  color: white;
  padding: 10px;
  font-size: 18px;
  font-weight: 400;
  border-radius-top-left: 2px;
  border-radius-top-right: 2px;
  height: 24px;
}
hr {
  border-color: var(--primary-text-clr);
  border-style: solid;
  }
  
.question {
  font-family: 'Archivo Black';
}
.question::before {
  content: 'Q. ';
}
.answer::before {
  content: 'A. ';
  font-family: 'Archivo Black';
}
.nav-button {
  display: inline-block;
  margin-right: 10px;
}
.nav a {
  transition:.2s;
  color: white;
  text-decoration: none;
}
.nav a:hover {
  font-size: 19px;
  color: white;
  text-decoration: none;
  text-shadow: 1px 1px 2px #000000;
}

.inner-padding {
  padding: 10px;
}