styles.scss

/*-- scss:defaults --*/
$web-font-path: false;  // disable Google Fonts
$font-family-sans-serif: "Latin Modern";
$font-family-monospace: monospace;
$bs-body-font-family: "Latin Modern";
$link-color: #2f3f8b;

/*-- scss:rules --*/
.quarto-category,
.breadcrumb,
.pagination-link,
.quarto-title-meta-heading,
#listing-listing-sort,
.toc-actions,
.quarto-listing-filter,
.listing-category,
.code-tools-button,
#quarto-embedded-source-code-modal-label,
.listing-author,
.listing-date,
.sourceCode,
summary,
.about-link-text {
  font-family: monospace;
  font-weight: 400;
}

.listing-title {
  font-weight: 600;
  font-size: 1.5em;
  margin-bottom: 0.5em !important;
}

.cell-output {
  background-color: #d5d5d5;
  padding: 1.5em 1.5em 0.1em 1.5em;
  filter: invert(1);
  margin-bottom: 1.2em;
}

.content p {
  text-align: justify;
}

.text-black a {
  color: black !important;
}

.text-center p {
  text-align: center !important;
}

.quarto-title {
  margin-bottom: 0.75em !important;
}

#about-me {
  margin-bottom: 0.5em;
}

.float-right {
  float: right;
}

.no-underline {
  a {
    text-decoration: none !important;
  }
}

.animate__duration-400ms {
  --animate-duration: 400ms;
}

.animate__delay-400ms {
  --animate-delay: 400ms;
}

.animate__duration-800ms {
  --animate-duration: 800ms;
}

.animate__delay-800ms {
  --animate-delay: 800ms;
}

#quarto-margin-sidebar {
  top: 70px !important;
}

#quarto-back-to-top {
  font-family: monospace;
  font-weight: 400;
  border-radius: 32px;
}

.about-sep {
  display: none;
}

.quarto-float-fig {
  display: flex;
  justify-content: center;
}

@keyframes myFadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0,10%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes myFadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-10%,0);
        transform: translate3d(0,-10%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.animate-in {
  animation-fill-mode: both;
  animation-duration: 1000ms;
}

.animate-in-up {
  @extend .animate-in;
  animation-name: myFadeInUp;
}

.animate-in-down {
  @extend .animate-in;
  animation-name: myFadeInDown;
}


.quarto-about-jolla > img {
  @extend .animate-in-down;
}

#about-me,
.about-links,
#latest-postsblog,
#quarto-document-content > *,
.quarto-listing-container-grid {
  @extend .animate-in-up;
}

@font-face {
  font-family: 'Latin Modern';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('./fonts/LM-regular.woff2') format('woff2'),
    url('./fonts/LM-regular.woff') format('woff'),
    url('./fonts/LM-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Latin Modern';
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: url('./fonts/LM-italic.woff2') format('woff2'),
    url('./fonts/LM-italic.woff') format('woff'),
    url('./fonts/LM-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Latin Modern';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('./fonts/LM-bold.woff2') format('woff2'),
    url('./fonts/LM-bold.woff') format('woff'),
    url('./fonts/LM-bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Latin Modern';
  font-style: italic;
  font-weight: bold;
  font-display: swap;
  src: url('./fonts/LM-bold-italic.woff2') format('woff2'),
    url('./fonts/LM-bold-italic.woff') format('woff'),
    url('./fonts/LM-bold-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Libertinus';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('./fonts/Libertinus-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Libertinus';
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: url('./fonts/Libertinus-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Libertinus';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('./fonts/Libertinus-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Libertinus';
  font-style: italic;
  font-weight: bold;
  font-display: swap;
  src: url('./fonts/Libertinus-bold-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Libertinus';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/Libertinus-semibold.woff2') format('woff2');
}

@font-face {
  font-family: 'Libertinus';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/Libertinus-semibold-italic.woff2') format('woff2');
}