@font-face {
    font-family: 'FiraSans';
    font-style: normal;
    font-weight: normal;
    src: local('Fira Sans'), url('https://proffieconfig.kafrenetrading.com/assets/fonts/FiraSans-Regular.ttf');
    font-display: block;
}

@font-face {
    font-family: 'FiraSans';
    font-style: normal;
    font-weight: bold;

    src: local('Fira Sans Bold'), local('Fira Sans-Bold'),
    url('https://proffieconfig.kafrenetrading.com/assets/fonts/FiraSans-Bold.ttf');
    font-display: block;
}

@font-face {
    font-family: 'FiraSans';
    font-style: italic;
    font-weight: normal;

    src: local('Fira Sans Italic'), local('Fira Sans-Italic'), 
    url('https://proffieconfig.kafrenetrading.com/assets/fonts/FiraSans-Italic.ttf');
    font-display: block;
}

:root {
    --grayed-out: #a1a1a1;
    --bgcolor: #1B2025;
    --bgcolor-hover: #1d1d1d;
    --bgcolor-components: 27, 32, 37;
    --bgcolor-subtle: #21282e;
    --bgcolor-light: color-mix(in srgb, var(--bgcolor), #FFFFFF 7%);
    --bgcolor-light-hover: color-mix(in srgb, var(--bgcolor), #FFFFFF 9%);
    --txtcolor: linen; 
    --link-color: #7eb7ff;
    --link-hovercolor: #5a96ff;
    --link-visitedcolor: #327bff;
    --themecolor: #4981b8;
    --bubble-padding-left: min(2vw, 2em);
    --bubble-padding-right: min(2vw, 2em);
    --bubble-padding-top: min(1vw, 0.1em);
    --bubble-padding-bottom: min(1.6vw, 1em);
    --bubble-padding: 
        var(--bubble-padding-top)
        var(--bubble-padding-right)
        var(--bubble-padding-bottom)
        var(--bubble-padding-left);
    --bubble-spacing-fixed: 0.7em;
    --bubble-spacing-balloon: 0.3em;
    --bubble-spacing-total: calc(
        var(--bubble-spacing-fixed) +
        var(--bubble-spacing-balloon));
    --bubble-shadowcolor: color-mix(in srgb, var(--bgcolor), #FFFFFF 25%);
    --bubble-shadowblend: 0.7rem;

}

html {
    font-family: 'FiraSans';
    background-color: var(--bgcolor);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

header {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;

    padding-top: min(18vw, 7rem);
    color: var(--txtcolor);
    font-size: min(3vw, 1em);
}

footer {
    flex: 0;
    font-size: min(2vw, 0.8em);
    color: var(--grayed-out);
    background-color: var(--bgcolor);
    margin-top: 2rem;
}

a { color: var(--link-color); }
a:hover { color: var(--link-hovercolor); }
a:visited { color: var(--link-visitedcolor); }
a:visited:hover { color: var(--link-hovercolor); }

p {
    margin-bottom: 0.5vw;
}

h1 {
    letter-spacing: -1px;
    font-size: min(5vw, 2em);
    margin-top: 0;
    margin-bottom: 0.4em;
    font-weight: normal;
}

h2 {
    font-size: min(4vw, 1.8em);
    font-weight: normal;
    margin-bottom: 0.4rem;
}

h3{
    font-size: min(3.4vw, 1.4em);
    font-weight: normal;
}

.hidden, .hidden-once {
    opacity: 0;
    --ttime: 800ms;
    transition: opacity var(--ttime), transform var(--ttime);
}

@media(prefers-reduced-motion) {
    .hidden, .hidden-once {
        transition: none;
    }
}

.show {
    opacity: 1;
}

.bubble {
    flex: 0;
    border: 0;
    border-radius: 1em;
    background-color: #21282e;
    padding: var(--bubble-padding);
    line-height: 1.6;
    text-align: center;
}

.row {
    display: flex;
    flex-direction: row;
}

.bubble.linked {
    background: var(--bgcolor-light);
    box-shadow: 0 0 var(--bubble-shadowblend) var(--bubble-shadowcolor);
    position: relative;
    margin: var(--bubble-spacing-total);
    transition: 0.08s all ease-in-out;
}

.bubble.linked:hover, .bubble.linked:visited:hover {
    background-color: var(--bgcolor-light-hover);
    padding-left:
        calc(var(--bubble-padding-left) + var(--bubble-spacing-balloon));
    padding-right:
        calc(var(--bubble-padding-right) + var(--bubble-spacing-balloon));
    padding-top:
        calc(var(--bubble-padding-top) + var(--bubble-spacing-balloon));
    padding-bottom:
        calc(var(--bubble-padding-bottom) + var(--bubble-spacing-balloon));
    margin: var(--bubble-spacing-fixed);
}

.bubble-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
}

.content-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bgcolor);
    justify-content: start;
    text-align: center;
    width: 80%;
    height: 100%;
    margin: 0 auto;
}

@media (max-width: 70em) {
    .content-column {
        width: 95%;
    }
}

hr {
    border: min(0.5vw, 0.2em) solid var(--grayed-out);
    border-radius: 1em;
    margin: 0;
}