/* font-family: 'Open Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');

/* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* font-family: 'JetBrains Mono', monospace; */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap');

:root {

  --scroll-bar-size: 15px;

  --color-theme: #336094;
  --color-anchor: #cfcfcf;
  --color-link: #0969da;
  --color-default-font: #24292f;
  --color-footer-bg: #e8e8e8;

  --shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

  --font-mono: 'JetBrains Mono', monospace;
}

/*****************************************************************************/
/* GLOBAL                                                                    */
/*****************************************************************************/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  color: inherit;
}

pre:first-line {
  line-height: 0;
}

code, code span,
.code, .code span {
  font-family: var(--font-mono);
}

a {
  text-decoration: none;
}

ul li {
  list-style-type: none;
}

.anchor {
  text-decoration: none;
  color: var(--color-anchor);
  transition: .3s;
}
.anchor:hover {
  color: var(--color-theme);
}

.link:not(.anchor) {
  color: var(--color-link);
}

.link:not(.anchor):hover {
  text-decoration: underline;
}

/*****************************************************************************/
/* INLINE                                                                    */
/*****************************************************************************/

.space-bottom { /* Add margin to have a space after that element. */
  margin-bottom: 30px;
}

.flex { display: flex; }
.flac { align-items: center; }
.fljc { justify-content: center; }
.flsb { justify-content: space-between; }

.relative { position: relative; }

/*****************************************************************************/
/* BUTTON                                                                    */
/*****************************************************************************/

.button {
  display: inline-block;
  padding: 10px 20px;
  color: var(--color-theme);
  border: 2px solid var(--color-theme);
  border-radius: 5px;
  transition: .2s;
  font-weight: bolder;
  height: 100%;
  cursor: pointer;
}

.button:hover {
  background-color: var(--color-theme);
  color: white;
}