.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}

.resp-sharing-button--whatsapp {
  background-color: #25D366;
  border-color: #25D366;
}

.resp-sharing-button--whatsapp:hover,
.resp-sharing-button--whatsapp:active {
  background-color: #1DA851;
  border-color: #1DA851;
}


.share-container {
  display : flex;
  align-items : center;
  justify-content : center;
  margin : 50px;
}

.share {
  fill : var(--darkRed);
  height : 40px;
  width : 40px;
  margin : 5px;
}

mark {
  background-color : var(--colonyRed);
  color : white;
  font-weight : normal;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Josefin Sans:wght@700&display=swap');

body {
  background-color : #F5F5F5;
}
h1, h2, h3, h4, h5, h6 {
  font-family : "Josefin Sans"!important;
  font-weight : bold;
}

.blog-info {
  margin : 2px 0!important;
}

h2 {
  font-size : 20px;
}
h3 {
  font-size : 20px;
  margin : 5px 0!important;
  font-family : "Josefin Sans"!important;
}

section > p, section > h2, section > h3, section > ol, section > ul, section > h1 {
  width : 50%;
  text-align : left!important;
  margin : 20px 0;
  font-weight : bold;
}

strong {
  font-family : "Josefin Sans";
  font-weight : bold;
  margin : 5px 0;
}

a > b {
  text-decoration: underline;
  color : var(--colonyRed);
}

section > p, li {
  font-size : 20px;
  font-weight : bold;
}

li {
  text-align : left;
  font-family : var(--bodyFont);
  margin : 10px 0;
}


section > img {
  width : 40%;
  margin : 20px;
}

h1 {
  font-family : var(--bodyFont);
  text-align : center!important;
  font-size : 26px;
}

h2 {
  letter-spacing : normal!important;
  font-size : 22px;
}

.blog-card {
  width : 300px;
  height : 400px;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : space-around;
  overflow: hidden;
  text-overflow: ellipsis;
  padding : 20px;
  border-radius : 20px;
  margin : 0 10px;
  background-color : white;
}

.blog-card > * {
  margin : 5px;
}

.flex-container {
  display : flex;
  flex-direction: row;
  align-items : center;
  justify-content : space-around;
  width : auto;
  height : auto;
}

.blog-container {
  display : flex;
  flex-direction: row;
  align-items : center;
  justify-content : space-around;
  width : 60vw;
  overflow : none;
  padding : 60px;
}

.blog-post-container {
  width : 80vw;
  display : flex;
  flex-direction: row;
  align-items : center;
  justify-content : space-around;
  padding : 60px;
  overflow : hidden;
}

.archive-blog-container {
  display: block;
  width: 20vw;
  height : 60vh;
  overflow : auto; /* Use "auto" instead of "scroll" to show scrollbar only when necessary */
  padding : 10px 0;
  overflow-y : scroll;
  overflow-x : hidden;
}

.archive-blog-container > .blog-card {
  width : 90%;
  height : 80px!important;
  display : flex;
  flex-direction: row;
  align-items : center;
  justify-content : center;
  padding : 10px!important;
  min-height: 0;
  margin : 10px 0;
}

.archive-blog-container > .blog-card > img {
  display : none;
}



.archive-blog-container > .blog-card > h3 {
  width : 50%;
  text-align: left;
}

.archive-blog-container > .blog-card > p {
  display : none;
}

p, li {
  font-size : 20px;
  font-weight : normal!important;
}

.blog-card > img {
  width : 80%;
  height : 150px;
  object-fit : cover;
  border-radius : 20px!important;
  border : 3px solid white;
  overflow : hidden;
}

.blog-card > p {
  width : 80%!important;
  text-overflow : ellipsis;
  overflow : hidden;
  white-space:nowrap

}

button {
  padding : 5px 10px;
  background-color : var(--black);
  color : white;
  border-radius : 50px;
  border : 3px solid var(--black);
  font-family : var(--bodyFont);
  cursor : pointer;
  text-align : center;
}

@media screen and (max-width: 980px) {
  section > p, section > h2, section > h3, section > ol, section > ul, section > h1 {
    width : 85vw;
  }

  section > img {
    width : 80vw;
  }

  .blog-container {
    flex-direction: column;
    width : 100vw;
    padding : 30px 50px 30px 50px;
    height : auto;
    overflow : hidden;
  }

  .blog-card {
    width : 70vw;
    margin : 10px 0;
  }

  .archive-blog-container {
    flex-direction: column;
    align-items : center;
    justify-content : center;
    width : 90vw;
  }

  .archive-blog-container > .blog-card {
    width : 100%;
  }

  .flex-container {
    flex-direction: column;
    width : 100vw;
    height : auto;
    align-items : center;
    justify-content: center;
    margin : 0;
    padding : 0;
  }

  .blog-post-container {
    width : 70vw;
    flex-direction: column;
    padding : 40px;
  }
}