$safe-zone-x: 25px;
$safe-zone-y: 25px;

$main-font: Henry-Blue;

$main-color: #ffc300; // todo: delete
$main-color-dark: #393d4c; // todo: delete
$theme-color: #D7D9D7; // todo: delete

$border: rgba( white, 0.025 );
$rounding: 2px;

$terror-color: #E9BE5C;
$counter-terror-color: #08B2E3;
$unassigned-color: #808080;

$blur: blur( 50px );

@import "Colors.scss";
@import "Text.scss";
@import "Layout.scss";
@import "Buttons.scss";
@import "Containers.scss";
@import "Hud.scss";
@import "Hints.scss";
@import "InputHints.scss";
@import "MarkerSystem.scss";
@import "DamageIndicator.scss";
@import "MenuSystem.scss";
@import "Controls.scss";

canvas
{
    width: 100%;
    height: 100%;
    color: $text-color;
}

canvas
{
    > .right
    {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
        flex-direction: column;
        padding-bottom: 100px;
    }

    .flex-grow
    {
        flex-grow: 1;
    }
}

.hidden {
    opacity: 0;

    &.visible {
        opacity: 1;
    }
}