:root {
  --font-size-xs: 1.4rem; 
  --font-size-sm: 2.4rem;
  --font-size-md: 3rem;
  --font-size-lg: 4rem;
  --font-size-xl: 5rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Libre Baskerville', serif;
  font-size: var(--font-size-sm);
  background-color: #FFFFFF;
  letter-spacing: 1px;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  /* display: block; */
}

.header {
  position: sticky;
  top: 0;
  background: #000000;
  color: #FFFFFF;
  font-size: var(--font-size-xs);
  min-width: 415px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 3%;
  margin-left: 3%;
}

.logo {
  width: 5rem;
  height: 5rem;
  display: flex;
  margin: 10px 0px;
}


.title {
  margin-left: 10px;
}

.list .list-item {
  display: inline-block;
  list-style: none;
}

.bg-image {
  position: absolute;
  z-index: -1;
  width: 100vw;
  min-width: 415px;
  min-height: 50rem;
}

.bg-image-article {
  position: absolute;
  top: 20px;
  z-index: -1;
  width: 100vw;
  min-width: 415px;
  height: 20vh; 
}

.banner {
  color: #FFFFFF;
  background-image: url(/images/blog-bw-1.jpg);
  background-size: cover;
  width: 80vw;
  height: 25vh;
  display: block;
  margin: auto;
}

.banner-two {
  background-image: url(/images/blog-bw-7.jpg);
  height: auto;
}

.banner-three {
  background-image: url(/images/blog-bw-8.jpg);
  height: auto;
}

.banner-four {
  background-image: url(/images/blog-bw-9.jpg);
  height: auto;
}

.banner-five {
  background-image: url(/images/blog-bw-10.jpg);
  height: auto;
}

.banner-six {
  background-image: url(/images/blog-bw-11.jpg);
  height: auto;
}

.banner-seven {
  background-image: url(/images/blog-bw-12.jpg);
  height: auto;
}

.banner-eight {
  background-image: url(/images/blog-bw-13.jpg);
  height: auto;
}

.banner-eight {
  background-image: url(/images/blog-bw-14.jpg);
  height: auto;
}

.banner-nine {
  background-image: url(/images/blog-bw-15.jpg);
  height: auto;
}

.banner-ten {
  background-image: url(/images/blog-bw-16.jpg);
  height: auto;
}

.banner-eleven {
  background-image: url(/images/blog-bw-17.jpg);
  height: auto;  
}

#blog {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.article-heading {
  padding: 20px 0px 0px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: left;
  flex-direction: inherit;
  color: #FFFFFF;
}

.black {
  color: #000000 !important;
}

.article-heading h3 {
  font-size: var(--font-size-md);
}

.blog-heading {
  padding: 80px 0px 0px 30px;
  display: flex;
  justify-content: flex-start;
  align-items: left;
  flex-direction: inherit;
  color: #FFFFFF;
}

.blog-heading h3 {
  font-size: var(--font-size-lg);
}

#blog-hero {
  max-width: 600px;
  min-width: 350px;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px;
}

.theme-one {
  background-color: #84BE84;
  border: 2px solid #84BE84;
  color: #FFFFFF;
}

.theme-two {
  background-color: #90C5FB;
  border: 2px solid #90C5FB;
  color: #FFFFFF;
}

.theme-three {
  background-color: #C680B8;
  border: 2px solid #C680B8;
  color: #FFFFFF;
}

.theme-four {
  background-color: #F7CF60;
  border: 2px solid #F7CF60;
  color: #FFFFFF;
}

.theme-five {
  background-color: #F0A04D;
  border: 2px solid #F0A04D;
  color: #FFFFFF;
}

.blog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0px;
  flex-wrap: wrap;
}

.blog-box {
  width: 350px;
  margin: 20px;
}

.blog-img {
  width: 100%;
  height: auto;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-text {
  padding: 10px 30px 10px 30px;
  display: flex;
  flex-direction: column;
}

.blog-text span {
  font-size: var(--font-size-xs);
}

.blog-text .blog-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.blog-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.blog-text .blog-title:hover {
  color: #FFFFFF;
}

.blog-text p {
  font-size: var(--font-size-xs);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 20px 0px;
}

.blog-text a {
  color: #000000;
}

.blog-text a:hover {
  color: #FFFFFF;
}

.article-text {
  margin: 100px 0;
}

.article-text a {
  text-decoration: underline;
}

.article-text a:hover {
  color: #A8A8A8;
}

.subtitle, 
.date,
.paragraph {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  margin-top: 10%;
}

.quote {
  width: 60%;
}

.code {
  overflow: scroll;
  font-family: monospace;
  color: #FFFFFF;
  background-color: #000000;
  width: 60%;
}

.snippet {
  font-family: monospace;
  color: #FFFFFF;
  background-color: #000000;
}

.paragraph-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  margin-top: 10%;  
}

@media (max-width: 2561px) {
  .article-heading {padding: 30px 0px 0px 30px;}
  .article-heading h3 {font-size: var(--font-size-xl);}
  .blog-text span {font-size: var(--font-size-md);}
  /* .subtitle, 
  .date,
  .paragraph {width: 50%;}
  .quote {width: 40%;}
  .code {width: 30%;} */
}

@media (max-width: 1441px) {
  .article-heading h3 {font-size: var(--font-size-md);}
  .blog-text span {font-size: var(--font-size-sm);}
}

@media (max-width: 769px) {
  .code {font-size: var(--font-size-xs);}
  .article-heading {padding: 10px 0px 0px 10px;}
  .blog-text {padding: 30px 0px 0px 10px;}
  /* .blog-text span {display: none;} */
  .code {width: 450px;}
}

@media (max-width: 426px) {
  .title {display: none;}
  .article-heading {padding: 0px 0px 0px 3px;}
  .blog-text {padding: 20px 0px 0px 3px;}
  .article-heading h3 {font-size: var(--font-size-sm);}
  .subtitle h2 {font-size: var(--font-size-sm);}
  .blog-text span {font-size: var(--font-size-xs)}
  .code {width: 375px;}
}

@media (max-width: 376px) {
  .bg-image,
  .bg-image-article,
  .header {min-width: 375px;}
  .blog-box {width: 335px;}
  #blog-hero {min-width: 335px;}
  .code {width: 320px;}
}

@media (max-width: 321px) {
  .bg-image,
  .bg-image-article,
  .header {min-width: 320px;}
  .blog-box {
    width: 280px;
    margin: 20px, 0px;
  }
  #blog-hero {min-width: 280px;}
  .code {width: 300px;
  font-size: var(--font-size-xs);}
}