/*
@import url('symbols/fontawesome-free-6.4.2-web/css/brands.css');
@import url('symbols/fontawesome-free-6.4.2-web/css/regular.css');

*/
@import url('symbols/fontawesome-free-6.4.2-web/css/fontawesome.css');
@import url('symbols/fontawesome-free-6.4.2-web/css/solid.css');


/*
    GLOBÁLNE KONŠTANTY
    Tu sú definované globálne konštanty/premenné, ktoré sa používajú v celom projekte.
*/

:root {
    --color-red: orangered;
    --color-green: limegreen;
    --color-blue: dodgerblue;
    --color-yellow: gold;
    --color-white: whitesmoke;
}


/*
    COLORS
    Základné farby určené hlavne pre písmo (ale môžu sa používať aj napr. pre tlačidlá).
*/

.tt-red {
    color: var(--color-red) !important;
}

.tt-green {
    color: var(--color-green) !important;
}

.tt-blue {
    color: var(--color-blue) !important;
}

.tt-yellow {
    color: var(--color-yellow) !important;
}

.tt-white {
    color: var(--color-white) !important;
}


/*
    OPTIONS FONT
    Písma používané v nastaveniach options.
*/
@font-face {
    font-family: "BlackOpsOne";
    src: url("fonts/Black_Ops_One/BlackOpsOne-Regular.ttf");
}

/* 
    == Embeded fonts == 
    Písma používané v playeri ale aj v options.
    ! Nemeniť názvy, pretože sa používajú ako identifikár clean fontu (pri save data).
    ! Tiež nesmú kolidaovať s common fonts napr. Arial, Times New Roman, atď.
*/
@font-face {
    font-family: "ShadowsIntoLight";
    src: url("fonts/Shadows_Into_Light/ShadowsIntoLight-Regular.ttf");
}








/*
    PREVENT SELECTION
    Toto je jednoduchý CSS štýl, ktorý zamedzuje označovaniu textu na stránke.
*/
.no-selection {
    user-select: none;
}

/* 
    SCREEN LOCKER 
    Toto je jednoduchý screen locker, ktorý sa zobrazí, keď je zariadenie v režime portrait.
    Využíva sa na to, aby sa zamedzilo otáčaniu obrazovky.
    Vykonáva sa to tak, že sa celý obsah stránky otočí o 90 stupňov a zobrazí sa na celú výšku a šírku.
*/
.portrait-screen-lock {
}

@media (orientation: portrait) {
    .portrait-screen-lock {
        transform: rotate(90deg);
        width: 100vh;
        height: 100%;
        transform-style: preserve-3d;
    }
}




/* 
    Flex & utils CSS.
*/

/*.flex-spacer {
    flex-grow: 1;
}*/

/*.expander {
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: 0.4s;
}
*/
.width-100 {
    width: 100%;
}

.full-screen {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: clip;
}