@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

body {
  font-family: "Montserrat", sans-serif;
  background-color: white;
}

/* styling for nav-bar section */
.xboard-title {
  color: #292b2e;
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 2px;
}
#xboard-title-top-style-line {
  background-image: linear-gradient(to right, #e537b9 0%, #c040df 100%);
  height: 9px;
  width: 27px;
  border-radius: 4.5px;
}
#line-after-navbar {
  margin: 0rem;
  margin-bottom: 1.5rem;
  border: 0;
  border-bottom: 1px solid #e1e4e8;
}

/* styling for page-header section */
#page-header-heading {
  color: #252b42;
  font-weight: 600;
  font-size: 24px;
}

#page-header-description {
  color: #858585;
  font-weight: 400;
  font-size: 18px;
}

/*styling for accordion (Remove border. Remove border and highlight on click)*/
/* !!!!  */
.accordion{
  margin-bottom: 5rem;
}
.accordion > * {
  border: 0;
}


/* removed the .accordion-body class given div to remove unnecessary padding*/

button.accordion-button {
  padding: 0.5rem 0;

  /* modify accordion header font properties: */
  font-weight: bold;
  font-size: 16px;
  color: #737373;
}
.accordion-button:focus {
  box-shadow: none; /* this removes the highlight blue border on focus */
}
.accordion-button:not(.collapsed) {
  background-color: inherit; /* this removes the highlight blue background-color on focus */
  box-shadow: none;

  /* color: #737373; */
  /* shall modify the color of the font once I figure out how to change the toggle button as well*/
}

/* style the article section:  */
.card{ /*article card*/
  border: none;
  cursor: pointer;
}
.card-img-top{
  max-height: 60vh;
  object-fit: cover;
  object-position: center 30%;
}

.article-card-title {
  color: #292b2e;
  font-weight: 700;
  font-size: 24px;
}

.partitioning-ellipse {
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background-color: #586069;
  margin: 0 0.5rem;
}
.article-card-metadata {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #586069;
}

/* article navigation buttons css */
.article-slide-button{
  background-color: #f8f9fa;
  opacity: 1;
  margin: 0;
  padding: 0;
  width: 20px;
  border-radius: 10px;
}



/* to be taken care in the end to align all content into a centralised block
.page-content-default-padding {
  padding-left: 1rem;
}

@media (min-width: 640px) {
  .page-content-default-padding {
    padding-left: 7vw;
  }
} */