/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

 @font-face {
  font-family: SegoeUISemi;
  src:
      local("Segoe UI Semilight"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
  font-weight: 200;
}

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #08B4B2;
  --ifm-color-primary-dark: #05817f;
  --ifm-color-primary-darker: #046766;
  --ifm-color-primary-darkest: #023433;
  --ifm-color-primary-light: #46c7c5;
  --ifm-color-primary-lighter: #84dad9;
  --ifm-color-primary-lightest: #c1eceb;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

  --ifm-font-family-base: SegoeUISemi;
  /* --ifm-background-color: #eef0f2; */

}

body {
  min-height: 100vh;
}


#__docusaurus {
  min-height: 100%;
}

.no-margin{
  margin-bottom: 0px;
}

h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #82e09b;
  --ifm-color-primary-dark: #64ad77;
  --ifm-color-primary-darker: #467a53;
  --ifm-color-primary-darkest: #284730;
  --ifm-color-primary-light: #a1e8b4;
  --ifm-color-primary-lighter: #c1f0cd;
  --ifm-color-primary-lightest: #dff7e6;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);

}


.main-header{
  margin-top: 60px;
  margin-bottom: 40px;
}

.main-title{
  font-size: 72px;
}

.main-subtitle{
  font-size: 32px;
  width: 60%;
}

.component-heading{
  font-size: 32px;
}

.main-card{
  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
  border: 1px solid var(--ifm-color-emphasis-200);
  background-size: cover;
  color: #3B4E70;
}

.article {
  color: #3B4E70;
  border-bottom-style: solid;
}

article {
  margin-bottom: 20px;

}


.article:hover {
  text-decoration: none;
}

.card-title {
  color: white;
  text-decoration: white;
}
.card-title:hover {
  color: white;
  text-decoration: white;
}

.hero-card {
  background-image : url('/img/card-images/grad.svg');
  text-decoration: white;
}

.hero-card:hover {
  text-decoration: white;
}

.card-image{
  border-radius: 10px;
  margin-top: 30px;
  width: 120px;
  margin-right: 10px;
  margin-left: auto;
  margin-bottom: auto;
  height: 120px;
  padding: auto;
 
}

.card-image > * {
  fill: white;
  stroke-width: 2;
}

.navbar{
  box-shadow: none;
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

.main-wrapper, .navbar__inner{
  margin-left: auto;
  margin-right: auto;
}



@media (min-width: 640px){
.main-wrapper, .navbar__inner {
    width: 640px;
}
}

@media (min-width: 768px){
  .main-wrapper, .navbar__inner {
      width: 768px;
  }
  }

@media (min-width: 1024px){
  .main-wrapper, .navbar__inner {
      width: 1024px;
      padding-left: 2rem;
      padding-right: 2rem;
  }
  }

@media (min-width: 1240px) {
    .main-wrapper, .navbar__inner {
      width: 1240px;
    } 
}

@media (min-width: 1440px) {
  .main-wrapper, .navbar__inner {
    width: 1440px;
  } 
}