/* catppuccin theme for remark (https://github.com/gnab/remark) */
:root {
    --background: #1e1e2e;
    --color7:     #11111b; 
    --color1:     #cdd6f4;
    --color2:     #89b4fa;
}

@font-face {
    font-family: Aileron;
    src: url('fonts/Aileron-Regular.otf');
    font-weight: normal
}
@font-face {
    font-family: Aileron;
    src: url('fonts/Aileron-Bold.otf');
    font-weight: bold;
}
@font-face {
    font-family: Aileron;
    src: url('fonts/Aileron-UltraLight.otf');
    font-weight: 100;
}
img:not(.full img, .thumbnail img) {
    float: right;
    max-width: 40%;
    height: auto;
}
.thumbnail, .thumbnail * {
    padding: 0 0 0 0 !important;
    margin: 0;
}
.sources li {
    line-height: 1.3rem !important;
    font-size: small !important;
}
.thumbnail .remark-slide-number {
    display: none;
}
.thumbnail img {
    width: 100%;
    height: 100%;
}
.full img {
    position: absolute;
    height: 80%;
    width: auto;
    max-height: 80%;
    max-width: 80%;
}
.remark-slide-content {
    padding-right: 1rem;
    padding-bottom: 1rem;
}
.remark-slide li {
    line-height: 3rem;
    font-size: 1.5rem;
}
li p {
    margin: 0;
}
.remark-slide span,
.remark-slide li,
.remark-slide p {
    color: var(--color1);
}
.remark-container, h1, h2, h3, h4, h5, h6 {
    font-family: Aileron, Helvetica Neue, sans-serif;
    font-weight: normal;
}
.remark-slide-scaler {
    box-shadow: 0 0 30px var(--color2);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--color1);
    font-weight: bold;
}
.remark-slides-area {
    background-color: var(--color7);
}
.remark-slide-content {
    background-size: contain;
    background-color: var(--background);
    color: var(--color7);
}
.remark-slide-number {
    color: var(--color1);
}
.remark-inline-code, .remark-code-line {
    background-color: #6c7086;
    padding: 0.25rem;
    border-radius: 0.25rem;
}
a {
    color: var(--color2);
    text-decoration: none;
}
blockquote {
    border-left: 2px solid var(--color2);
    padding-left: 5px;
}
.bottom {
    position: absolute;
    bottom: 5%;
}
.remark-slide-number {
  position: inherit;
}
.remark-slide-number .slide-number-number {
  position: absolute;
  bottom: 15px;
  right: 15px;
}
.remark-slide-number .progress-bar-container {
  position: absolute;
  bottom: 0;
  height: 5px;
  display: block;
  left: 0;
  right: 0;
}
.remark-slide-number .progress-bar {
  height: 100%;
  background-color: var(--color2);
}