:root {
    --colorPrimary: #ed0c17;            /* typhoon red */
    --colorSecondary: #58595b;          /* typhoon black */
    --colorThirdly: #f1f2f2;            /* light grey */
    --tg: #999999;                      /* typhoon grey */

    --white: #ffffff;
    --bootstrapDark: #212529;
}

@font-face {
    font-family: 'Typhoon-Helvetica-Neue';
    src: url('fonts/Typhoon-Helvetica-Neue.eot');
    src: local('Typhoon-Helvetica-Neue'), url('fonts/Typhoon-Helvetica-Neue.woff') format('woff'),
            url('fonts/Typhoon-Helvetica-Neue.ttf') format('truetype');
}

* {
    font-family: Typhoon-Helvetica-Neue;
    --primary-color: var(--colorPrimary) !important;
}

.dark-background {
        background-color: var(--bootstrapDark) !important;
        color: var(--white) !important;
}

.typhoon-red-text {
    color: #ed0c17 !important;
}

.running {
    color: #97cc64;
}

.paused {
    color: #aaa;
}

.restarting {
    color: #ffd050;
}

.exited {
    color: #fd5a3e !important;
}

.dead {
    color: #d35ebe;
}

.created {
    color: #89bdf5;
}

.bgimg {
    background-image: url('background.jpg');
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
    font-family: var(--componentFont);
    font-size: calc(10% + 1vw + 1vh);
}

.btn {
    color: var(--white) !important;
    cursor: pointer;
    font-size: 100%;
    min-width: 100%;
    background-color: var(--colorPrimary) !important;
    border-color: var(--colorPrimary) !important;
    box-shadow: none !important;
}

.btn:active, .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn:hover {
    background: var(--colorPrimary);
    border-color: var(--white) !important;
}

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

.topmiddle {
    position: absolute;
    top: 20%;
    left: 50%;
    min-width: 22%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.bottomleft {
    position: absolute;
    bottom: 0;
    left:  calc(1% + 0.1vw + 0.1vh);
}

.middle {
    position: absolute;
    top: 82%;
    left: 50%;
    min-width: 22%;
    transform: translate(-50%, -50%);
    text-align: center;
}

hr {
    margin: auto;
    width: 40%;
    color: transparent !important;
}