@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  html {
    overflow-x: hidden !important;
    font-size: 14px;
  }

  .hljs,
  pre {
    max-width: 90vw;
  }
}

@media only screen and (min-width: 600px) {
  /* For normal screens: */
  html {
    overflow-x: hidden !important;
    font-size: 16px;
  }
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.2;
  }
}

.gradient-border-box {
  --borderWidth: 2px;
  background: #1d1f20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border-box:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(
    60deg,
    var(--theme-ui-colors-muted),
    var(--theme-ui-colors-muted),
    #008837cc,
    var(--theme-ui-colors-muted),
    var(--theme-ui-colors-muted)
  );
  border-radius: calc(10 * var(--borderWidth));
  z-index: 0;
  animation: animatedgradient 7s ease reverse infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.my-masonry-grid {
  display: -webkit-box; /* Not needed if autoprefixing */
  display: -ms-flexbox; /* Not needed if autoprefixing */
  display: flex;
  margin-left: -15px; /* gutter size offset */
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 15px; /* gutter size */
  background-clip: padding-box;
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/open-sans-v28-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('./fonts/open-sans-v28-latin-300.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/open-sans-v28-latin-300.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./fonts/open-sans-v28-latin-300.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/open-sans-v28-latin-300.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/open-sans-v28-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('./fonts/open-sans-v28-latin-regular.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/open-sans-v28-latin-regular.woff2')
      format('woff2'),
    /* Super Modern Browsers */ url('./fonts/open-sans-v28-latin-regular.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/open-sans-v28-latin-regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/open-sans-v28-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/open-sans-v28-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('./fonts/open-sans-v28-latin-500.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/open-sans-v28-latin-500.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./fonts/open-sans-v28-latin-500.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/open-sans-v28-latin-500.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/open-sans-v28-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/open-sans-v28-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('./fonts/open-sans-v28-latin-600.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/open-sans-v28-latin-600.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./fonts/open-sans-v28-latin-600.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/open-sans-v28-latin-600.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/open-sans-v28-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/open-sans-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('./fonts/open-sans-v28-latin-700.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('./fonts/open-sans-v28-latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./fonts/open-sans-v28-latin-700.woff')
      format('woff'),
    /* Modern Browsers */ url('./fonts/open-sans-v28-latin-700.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('./fonts/open-sans-v28-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}