@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

:root {
    --blue-color: #025196;
    --yellow-color: #fdb338;
}

/* Example usage
#foo {
    color: var(--main-color);
}*/

body {
    font-family: 'Fira Sans';
    font-weight: 300;
}

h1,h2,h3 {
    font-family: 'Fira Sans Condensed';
    font-weight: 700;
    color: var(--blue-color);
}

b, strong {
    font-weight: 700;
    colour: var(--blue-color);
}

.massive-subsection h1 {
    font-size: 400px;
    color: var(--yellow-color);
}

.huge-subsection h1 {
    font-size: 250px;
    color: var(--yellow-color);
}

.big-subsection h1 {
    font-size: 175px;
    color: var(--yellow-color);
}

.large-subsection h1 {
    font-size: 135px;
    color: var(--yellow-color);
}

.inverse {
    background-color: var(--blue-color);
}

.subsection h1 {
    font-size: 75px;
    color: var(--yellow-color);
}

.remark-code, .remark-inline-code {
    font-family: 'Fira Code';
    font-weight: 400;
}

.small .remark-code-line,
.small .remark-code-line  {
    font-size: 10px;
}

.small .mjx-chtml {
    font-size: 115% !important;
}

.mjx-chtml{
    font-size: 110% !important;
}

.large-subsection .mjx-chtml{
    font-size: 150% !important;
}

.big .mjx-chtml{
    font-size: 150% !important;
}

.bigger .mjx-chtml{
    font-size: 175% !important;
}

.smaller .remark-code-line,
.smaller .remark-code-line  {
    font-size: 13px;
}

.remark-code {
    font-size: 16px;
}

.remark-slide-content {
    font-size: 30px;
}

.alpha {
    background-color: rgba(0,0,0,0.6);
    padding: 10px;
    border-radius: 10px;
}

.my-title-slide {
    /*background-image: url('./resources/franki-chamaki-682112-unsplash.jpg');*/
    background-position: bottom;
    background-size: cover;
}

.my-title-slide h1 {
    color: var(--yellow-color);
}

.my-title-slide h2 {
    margin-left: 1em;
    margin-bottom: 0.5em;
    margin-top: 0.1em;
}

.my-title-slide .remark-slide-number {
  display: none;
}

.smallcaps {
    font-variant: small-caps;
}

.small {
    font-size: 0.75em;
}

.smaller {
    font-size: 0.5em;
}

.big {
    font-size: 1.5em;
}

.bigger {
    font-size: 2em;
}

.footnote {
    bottom: 0.5em;
    left: 0.5em;
}

.references {
    position: absolute;
    padding-right: 4em;
    bottom: 0.5em;
    left: 3em;
    font-size: 0.75em;
}


.remark-slide-number {
    color: var(--blue-color);
    font-size: 0.75em;
}

/*
.remark-slide-number .progress-bar-container {
    position: absolute;
    bottom: 0;
    height: 6px;
    display: block;
    left: 0;
    right: 0;
    text-shadow: none;
}

.remark-slide-number .progress-bar {
    height: 100%;
    background-color: var(--yellow-color);
    text-shadow: none;
    color: var(--yellow-color);
}

.remark-slide-number .inverse .progress-bar {
    height: 100%;
    background-color: var(--yellow-color);
    text-shadow: none;
    color: var(--yellow-color);
} */

.center-fig {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-highlight {
    color: var(--blue-color);
}

a {
    color: var(--yellow-color);
}

a:hover {
    color: var(--yellow-color);
}

a:focus {
    color: var(--yellow-color);
}

a:visited {
    color: var(--yellow-color);
}