:root {
    --background-color-dark        : #222222;
    --text-color-light             : #F2F2F2;
    --text-color-accent            : #3e2c2c;
    --btn-green-background-dark    : #1b3f17;
    --btn-green-background         : #288320;
    --btn-green-background-hover   : #44a73b;
    --btn-green-text               : #d5dbb6;
    --btn-blue-background          : #206c83;
    --btn-blue-background-hover    : #3b85a7;
    --btn-blue-text                : #b6c9db;
    --btn-red-background           : #832020;
    --btn-red-background-hover     : #a73b3b;
    --btn-red-text                 : #dbb6b6;
    --title-color                  : #c71717;
    --link-unvisited-color         : #e04f4f;
    --link-visited-color           : #a05454;
    --background-color-header      : rgb(59, 59, 59);
    --text-color-header-link       : rgb(223, 95, 144);
    --text-color-header-link-accent: rgb(160, 59, 93);
}

@font-face {
    font-family: Casino;
    src        : url(../font/Casino.ttf);
}

* {
    margin     : 0px;
    padding    : 0px;
    font-family: Arial, Helvetica, sans-serif;
    overflow   : hidden;
}

html,
body {
    height: 100%;
}

body {
    background-color: var(--background-color-dark);
    color           : var(--text-color-light);
    overflow-y      : auto;
}

.hidden {
    display: none;
}

.background {
    position           : absolute;
    width              : 100%;
    height             : 100%;
    background-repeat  : no-repeat;
    background-position: center;
    background-size    : cover;
    filter             : blur(8px) brightness(0.4);
    -webkit-filter     : blur(8px) brightness(0.4);
    z-index            : 0;
}

.background-main {
    background-image: url(../images/background_main.png);
}

.background-game {
    background-image: url(../images/background_game.png);
}

.header {
    width           : 100%;
    height          : 50px;
    z-index         : 200;
    position        : relative;
    background-color: var(--background-color-header);
}

.header-title {
    font-size      : 32px;
    text-decoration: none;
    color          : #FFF !important;
    margin-top     : 5px;
    margin-left    : 12px;
}

.header-title small {
    opacity: 0.2;
}

.header-link {
    font-size      : 28px;
    padding        : 4px;
    margin-right   : 12px;
    margin-top     : 2px;
    border         : 0px;
    border-radius  : 12px;
    font-weight    : bold;
    cursor         : pointer;
    text-decoration: none;
    color          : var(--text-color-header-link) !important;
    text-shadow    : 0 1px 0 var(--text-color-accent),
        0 2px 0 var(--text-color-header-link-accent),
        0 3px 0 var(--text-color-header-link-accent),
        0 4px 1px rgba(0, 0, 0, .1),
        0 0 2px rgba(0, 0, 0, .1),
        0 1px 2px rgba(0, 0, 0, .3),
        0 2px 3px rgba(0, 0, 0, .2),
        0 3px 10px rgba(0, 0, 0, .25),
        0 10px 10px rgba(0, 0, 0, .2),
        0 20px 20px rgba(0, 0, 0, .15);
}

.align-left {
    display   : block;
    text-align: left;
    position  : absolute;
    left      : 0px;
}

.align-right {
    display   : block;
    text-align: right;
    position  : absolute;
    right     : 0px;
}

.content {
    z-index       : 100;
    position      : relative;
    padding-bottom: 25px;
}

.text-center {
    text-align: center;
    width     : 100%;
    display   : inline-block;
}

.text-muted {
    opacity: .75;
}

.text-depth {
    text-shadow: 0 1px 0 var(--text-color-accent),
        0 2px 0 var(--text-color-accent),
        0 3px 0 var(--text-color-accent),
        0 4px 1px rgba(0, 0, 0, .1),
        0 0 2px rgba(0, 0, 0, .1),
        0 1px 2px rgba(0, 0, 0, .3),
        0 2px 3px rgba(0, 0, 0, .2),
        0 3px 10px rgba(0, 0, 0, .25),
        0 10px 10px rgba(0, 0, 0, .2),
        0 20px 20px rgba(0, 0, 0, .15);
}

a:link {
    color: var(--link-unvisited-color);
}

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

.font-casino {
    font-family: Casino;
    color      : var(--title-color);
}

.title-big {
    font-size: 4vw;
}

@keyframes fadeTitle {
    0% {
        color: var(--title-color);
    }

    50% {
        color: #ad551b;
    }

    100% {
        color: var(--title-color);
    }
}

.titleColorFade {
    -o-animation             : fadeTitle 5s ease-in-out;
    animation                : fadeTitle 5s ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes rainbowTitle {
    0% {
        color: #FF0000;
    }

    13% {
        color: #FFa500;
    }

    25% {
        color: #FFFF00;
    }

    38% {
        color: #008000;
    }

    50% {
        color: #0000FF;
    }

    63% {
        color: #4B0082;
    }

    75% {
        color: #EE82EE;
    }

    100% {
        color: #FF0000;
    }

}

.titleColorRainbow {
    -o-animation             : rainbowTitle 5s ease-in-out;
    animation                : rainbowTitle 5s ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes flashTitle {
    0% {
        color: #ffffff;
    }

    100% {
        color: var(--title-color);
    }
}

.titleColorFlash {
    -o-animation: flashTitle .6s ease-in-out;
    animation   : flashTitle .6s ease-in-out;
}

@keyframes gamecardFadeIn {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(90deg);
        filter   : blur(10px);
    }

    100% {
        opacity  : 1;
        transform: scale(1) rotate(0deg);
        filter   : blur(0px);
    }
}

.gamecard {
    -o-animation: gamecardFadeIn .4s ease-in-out;
    animation   : gamecardFadeIn .4s ease-in-out;
}

.btn {
    margin-left  : auto;
    margin-right : auto;
    display      : block;
    padding      : 8px;
    border       : 0px;
    border-radius: 12px;
    font-size    : 30px;
    font-weight  : bold;
    cursor       : pointer;
    transform    : scale(1.0);
    opacity      : 0;
}

.btn:hover {
    transform: scale(1.2) rotate(8deg);
}

.btn-center {
    margin-left : auto;
    margin-right: auto;
    display     : block;
}

.btn-play {
    background-color: var(--btn-green-background-dark);
    color           : var(--btn-green-text);
}

.btn-play:hover {
    background-color: var(--btn-green-background-hover);
    color           : var(--btn-green-text);
}

.btn-play-show {
    opacity         : 1;
    background-color: var(--btn-green-background);
}

.btn-primary {
    background-color: var(--btn-blue-background);
    color           : var(--btn-blue-text);
}

.btn-primary:hover {
    background-color: var(--btn-blue-background-hover);
    color           : var(--btn-blue-text);
}

.btn-danger {
    background-color: var(--btn-red-background);
    color           : var(--btn-red-text);
}

.btn-danger:hover {
    background-color: var(--btn-red-background-hover);
    color           : var(--btn-red-text);
}

.btn-success {
    background-color: var(--btn-green-background);
    color           : var(--btn-green-text);
}

.btn-success:hover {
    background-color: var(--btn-green-background-hover);
    color           : var(--btn-green-text);
}

.btn-animation {
    transition: opacity .5s, background-color .5s, transform .15s;
}

.btngroup {
    width        : fit-content;
    margin-left  : auto;
    margin-right : auto;
    margin-top   : -15px;
    margin-bottom: -15px;
    padding      : 15px;
}

.btngroup-btn {
    padding      : 8px;
    border       : 0px;
    border-radius: 12px;
    font-size    : 30px;
    font-weight  : bold;
    cursor       : pointer;
    width        : 160px;
}

.btngroup-btn:hover {
    transform: scale(1.05);
}

.card-holder {
    display     : flex;
    margin-left : auto;
    margin-right: auto;
    width       : 450px;
    transform   : translate(30px, 0px);
}

.card-holder span {
    margin-left : -40px;
    margin-right: 60px;
    margin-top  : 8px;
    font-size   : 30px;
    font-weight : bold;
    text-align  : right;
    width       : 45px;
    z-index     : 100;
    color       : #746213;
    text-shadow : 0px 1px 0px #d4d63d,
        0px -1px 0px #d4d63d,
        -1px 0px 0px #d4d63d,
        1px 0px 0px #d4d63d,
        1px 1px 0px #d4d63d,
        -1px 1px 0px #d4d63d,
        -1px -1px 0px #d4d63d,
        1px -1px 0px #d4d63d
}

@keyframes notificationFade {
    0% {
        opacity   : 0;
        margin-top: 0px;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity   : 0;
        margin-top: 100px;
    }
}

.notification {
    font-size     : 28px;
    padding-top   : 32px;
    width         : 100%;
    border-radius : 12px;
    font-weight   : bold;
    float         : right;
    position      : fixed;
    top           : 80px;
    right         : 0px;
    z-index       : 100;
    padding-bottom: 32px;
    -o-animation  : notificationFade 4s ease-in-out;
    animation     : notificationFade 4s ease-in-out;
}

.notification-info {
    background-color  : #1a4e5e;
    color             : #baebff;
    -webkit-box-shadow: 0px 3px 2px 5px #13364d;
    -moz-box-shadow   : 0px 3px 2px 5px #13364d;
    box-shadow        : 0px 3px 2px 5px #13364d;
}

.notification-warning {
    background-color  : #9c8726;
    color             : #ffeea1;
    -webkit-box-shadow: 0px 3px 2px 5px #8a761d;
    -moz-box-shadow   : 0px 3px 2px 5px #8a761d;
    box-shadow        : 0px 3px 2px 5px #8a761d;
}

.notification-success {
    background-color  : #1f5e1a;
    color             : #baffbe;
    -webkit-box-shadow: 0px 3px 2px 5px #174d13;
    -moz-box-shadow   : 0px 3px 2px 5px #174d13;
    box-shadow        : 0px 3px 2px 5px #174d13;
}

.notification-danger {
    background-color  : #5e1a1a;
    color             : #ffbaba;
    -webkit-box-shadow: 0px 3px 2px 5px #4d1313;
    -moz-box-shadow   : 0px 3px 2px 5px #4d1313;
    box-shadow        : 0px 3px 2px 5px #4d1313;
}

@keyframes popupBetFade {
    0% {
        margin-top: 50px;
        transform: scale(0) rotate(35deg) rotateX(90deg);
    }

    80% {
        margin-top: 0px;
        transform: scale(1) rotate(0deg) rotateX(0deg);
    }

    100% {
        margin-top: -15px;
    }
}

.popup-bet {
    background-color: #423b2aa3;
    box-shadow      : 0px 0px 5px 5px #2d281b;
    border          : 8px solid #423b2a;
    padding         : 30px;
    border-radius   : 22px;
    text-align      : center;
    -o-animation    : popupBetFade .45s ease-in-out;
    animation       : popupBetFade .45s ease-in-out;
}

.popup-bet input[type=number] {
    background-color: #333;
    color           : #DDD;
    border          : 2px solid #3c3c3c;
    padding         : 8px;
    font-size       : 18px;
    font-weight     : bold;
    border-radius   : 50px;
}