custom.css

/**
 * 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.
 */
@import url(./fonts.css);
@import url(./footer.css);
@import url(./blog.css);
/* You can override the default Infima variables here. */
:root {
  --ifm-navbar-height: 90px;
  --ifm-color-primary: #f15a22;
  --ifm-color-primary-dark: #e94a0f;
  --ifm-color-primary-darker: #dc460e;
  --ifm-color-primary-darkest: #b5390b;
  --ifm-color-primary-light: #f36d3c;
  --ifm-color-primary-lighter: #f37749;
  --ifm-color-primary-lightest: #f69470;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --ifm-color-secondary: #806b64;
  --ifm-color-success: #90b03e;
  --ifm-pastel-success: #b4c791;
  --ifm-color-info: #00a3b4;
  --ifm-pastel-info: #88bfca;
  --ifm-color-highlight: #c6168d;
  --ifm-pastel-highlight: #d689b2;
  --ifm-color-highlight-dark: #a81279;
  --ifm-footer-background-color: var(--ifm-color-primary-darker) !important;
  --ifm-footer-color: #ffffff;
  --alterning-bkg: #70707011; 
/* FONTS */
  --ifm-font-family-base: 'asap_regular';
  --ifm-font-family-bold: 'asap_semi';
  --ifm-font-family-italic: 'asap_italic';
  --ifm-heading-font-family: 'warsaw_gothic';
  --ifm-heading-font-weight: '700';
  --ifm-h1-font-size: 4rem;
  --ifm-h2-font-size: 3rem;
  --ifm-h3-font-size: 2.5rem;
  --ifm-h4-font-size: 2rem;
  --ifm-h5-font-size: 1.75rem;
  --ifm-h6-font-size: 1.5rem;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #f15a22;
  --ifm-color-primary-dark: #e94a0f;
  --ifm-color-primary-darker: #dc460e;
  --ifm-color-primary-darkest: #b5390b;
  --ifm-color-primary-light: #f36d3c;
  --ifm-color-primary-lighter: #f37749;
  --ifm-color-primary-lightest: #f69470;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);

}

[class*=iconExternalLink] {
  display: none;
}

h1, h2, h3 {
  letter-spacing: .1rem;
}

.navbar__logo img {
  height: 290%;
  margin-top: -30px;
}

.button--highlight {
  background-color: var(--ifm-color-highlight);
}

.button--highlight:hover {
  background-color: var(--ifm-color-highlight-dark);
}

b, strong {
  font-family: var(--ifm-font-family-bold) ;
}

i, em {
  font-family: var(--ifm-font-family-italic) ;
}

.navbar__item {
  text-transform: uppercase;
  font-size: 1.2rem;
}

.main-wrapper {
  margin-top: 90px;
}

.navbar {
  position: fixed;
  width: 100%;
  box-shadow: none;
} 

.slick-dots li button::before {
  color: var(--ifm-color-primary) !important;
}

section:nth-child(even) {
  background-color: var(--alterning-bkg);
  padding: 2rem 0;
}

.linkedin-button {
  font-size: 3rem;
  position: absolute;
  bottom: -1rem;
  left: 0;
  color: #0e76a8;
}

.linkedin-button:hover {
  color: #5da8d0;
}

.team .feature:nth-child(4n+1) img {
  background-color: var(--ifm-pastel-success)
}

.team .feature:nth-child(4n+1) h3 {
  color: var(--ifm-color-success);
}

.team .feature:nth-child(4n+2) img {
  background-color: var(--ifm-pastel-info);
}

.team .feature:nth-child(4n+2) h3 {
  color: var(--ifm-color-info);
}

.team .feature:nth-child(4n+3) img, .team .feature:nth-child(4n+4) img {
  background-color: var(--ifm-pastel-highlight);
}

.team .feature:nth-child(4n+3) h3, .team .feature:nth-child(4n+4) h3 {
  color: var(--ifm-color-highlight);
}

.pagination-nav__label {
  font-size: 1rem;
}

.center {
  text-align: center;
}

.notFound {
  position: absolute;
  top: -75px;
  z-index: -1;
  left: 10%;
  margin: 0 15px;
  color: var(--ifm-color-primary-dark);
  font-size: 8rem;
  font-family: var(--ifm-heading-font-family);
  opacity: 30%;
}

.tags-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1440px) {
  .tags-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tags-list li {
  white-space: nowrap;
  text-align: center;
  margin: 0.7rem 0;
}