<style>
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root {
--heading-font: 'League Spartan', sans-serif;
--body-font: 'League Spartan', Noto, sans-serif;
--code-font: 'JetBrains Mono', 'Ubuntu Mono', 'IBM Plex Mono', monospace;
--font-size-base: 4rem;
--text-color: #fff;

/* yellow */

--primary-color: #ffb000;
--primary-color-light:#fff3d9;
--body-bg: #1c1200;

/* red */

/*
--primary-color: #ff4545;
--primary-color-light:#ffe5e2;
--body-bg: #21000d;
*/

/* blue */
/*
--primary-color: #00baff;
--primary-color-light:#ceecff;
--body-bg: #000021;
*/

/* green */
/*
--primary-color: #21ff42;
--primary-color-light:#d4ffda;
--body-bg: #000021;
*/
/* Valentýnská oslava 10 let {F}*/
/*
--body-bg: #fffdc9;
--primary-color: #ff2994;
--text-color: #101010;
*/
}

/* Valentýnská oslava 10 let {F}*/
/* @keyframes heartbeat {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10% {
transform: scale(0.88);
animation-timing-function: ease-in;
}
17% {
transform: scale(1.05);
animation-timing-function: ease-out;
}
33% {
transform: scale(0.96);
animation-timing-function: ease-in;
}
45% {
transform: scale(1);
animation-timing-function: ease-out;
}
}

@keyframes vibrate {
0% {
transform: translate(0);
}
20% {
transform: translate(-4px, 4px);
}
40% {
transform: translate(-4px, -4px);
}
60% {
transform: translate(4px, 4px);
}
80% {
transform: translate(4px, -4px);
}
100% {
transform: translate(0);
}
}*/

body .reveal {
background-color: var(--body-bg) !important;
color: var(--text-color);
font-family: var(--body-font);
font-weight: 400;
/* rohové logo F */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"> <path fill="%23ffb000" d="M100 33.4V0H0v100h33.3V66.8h33.4V33.4H100Z"/> </svg>');
background-repeat: no-repeat;
background-size: 100px;

/* Valentýnská oslava 10 let {F}*/
/*
&::before,
&::after {
position: absolute;
font-style: normal;
}

&::before {
content: '💞';
top: .25em;
right: .25em;
animation: heartbeat 10s ease-in-out 14s infinite both;
}

&::after {
content: '🎂';
bottom: .25em;
left: .25em;
animation: vibrate 10s linear 14s infinite both;
}*
*/
}

.reveal {
font-size: var(--font-size-base);
line-height: 1.1;

[id="frontendisti-logo"] {
display: block;
width: 40vw;
height: auto;
margin: 0 auto 4rem;
color: var(--primary-color);
}
}

.reveal .slides {
text-align: left;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
margin-bottom: var(--font-size-base);
line-height: 1;
color: var(--primary-color);
font-size: calc(2*var(--font-size-base));
font-family: var(--heading-font);
font-weight: 600;
text-wrap: pretty;
}

.reveal h3 {
font-size: calc(3/2*var(--font-size-base));
}

.reveal h4 {
margin-bottom: 3.5rem;
font-size: calc(3/4*var(--font-size-base));
text-align: right;
}

.reveal h5 {
font-size: calc(1/2*var(--font-size-base));
}

.reveal a {
color: var(--text-color);
text-decoration: underline;
}

.reveal :is(h1,h2,h3,h4) a {
color: inherit;
}

.reveal:is(h1, h2, h3, h4, h5, h6, p, li):not(.text-center) {
text-align: left;
}

.reveal p,
.reveal li {
color: var(--text-color);
}

.reveal ul {
display: block;
list-style-type: square;
}

.reveal li {
margin-bottom: 2rem;
}

.reveal em {
font-style: normal;
font-weight: 300;
}

.reveal pre, .reveal code, .reveal kbd{
font-family: var(--code-font);
}

.reveal pre {
-moz-tab-size: 4; /* Firefox 4+ */
tab-size: 4; /* Chrome 21+, Safari 6.1+, Opera 15+ */
white-space: pre-wrap;
width: 100%;
box-shadow: none;
}

.reveal pre code {
line-height: 1.1;
overflow: hidden;
padding: 2rem 1rem 2rem var(--font-size-base);
max-height: 80vh;
}

.reveal pre code,
.reveal .c-text-md,
.reveal .c-text-md code { font-size: var(--font-size-base); }

.reveal .c-text-xl,
.reveal .c-text-xl code { font-size: calc(4*var(--font-size-base)); }

.reveal .c-text-lg,
.reveal .c-text-lg code { font-size: calc(2*var(--font-size-base)); }

.reveal .c-text-sm,
.reveal .c-text-sm code { font-size: calc(3/4*var(--font-size-base)); }

.reveal .c-text-xs,
.reveal .c-text-xs code { font-size: calc(1/2*var(--font-size-base)); }

.reveal code:before {
writing-mode: vertical-lr;
transform: rotate(-180deg);
display: block;
position: absolute;
top: 0;
left: 0;
font-size: 3rem;
letter-spacing: 0;
line-height: 1;
color: white;
background-color: transparent;
color: #666;
padding: 0.2em 0 0 0.1em;

}

.reveal code.css:before, .reveal code.sass:before { content: "CSS"; }
.reveal code.html:before { content: "HTML"; }
.reveal code.js:before { content: "js"; }

.reveal p code,
.reveal li code
{
padding: 0 0.2em;
background-color: var(--text-color);
border-radius: 0.1em;
color: var(--body-bg);
}

.c-slide-task .slide-background { background-color: lime; }
.c-slide-task * { color: black !important; }
.c-slide-break .slide-background { background-color: green; }
.c-slide-inter .slide-background { background: blue; }
.c-slide-white .slide-background { background: white; }

.reveal .c-sr-only { display: none; }

.reveal .c-text-left { text-align: left; }

.reveal .c-text-right { text-align: right; }

.reveal .c-text-center { text-align: center; }

.reveal a:hover > b {
display: inline-block;
text-transform: capitalize;
text-decoration-line: underline;
text-decoration-color: var(--r-link-color-hover);
color: var(--primary-color);
}

.reveal sub {
vertical-align: sub;

}

.reveal dl.tk-props {
margin-left: 0;

dt {
font-weight: 400;
font-size: .8em;
}

dd {
margin-inline-start: 0;
margin-block-end: .2em;
font-weight: 700;

&:has(img) {
display: flex;
align-items: center;
gap: .5em;
}

strong {
font-weight: 400;
color: #ff4545;
}
}
}
</style>