@font-face {
    font-family: "Articulat CF"; src: url('/fonts/Articulat/ArticulatCF-Regular.otf') ;
    font-family: "Google Sans"; src: url('/fonts/ProductSans-Regular.ttf') ;
}

nav{
    background: #000C16;
    font-family: 'Google Sans';
    font-size: 16px;
    line-height: 20.35px;
    color: #E4E4E4;
    padding: 1% 9% !important;
}

nav a {
    color: #E4E4E4 !important;
    text-decoration: none;
}

nav a:hover{
    color: #E4E4E4 !important;
    text-decoration: none;
}

td{
    width: 80px;
    text-align: center;
}

td a {
    color: #E4E4E4 !important;
    text-decoration: none;
}

td a:hover{
    color: #E4E4E4 !important;
    text-decoration: none;
}

.d-lg-none{
    font-size: 20px;
}

.d-lg-none>div{
    display: flex !important;
    flex-direction: column;
}

.d-lg-none>div a {
    margin: 1% 0px;
}

.sidenav {
    background-image: none;
}

.warpper {
    margin-top: 4%;
}

.showtext {
    font-family: 'Helvet';
    font-size: 20px;
}

.chancetxt {
    font-family: 'Helvet';
    margin-bottom: -5px;
    font-size: 8px;
    color: white;
}

.txtroom {
    font-family: 'Helvet';
    font-size: 12px;
    right: 5%;
    bottom: 1;
    position: absolute;
}

.resroom {
    height: 40px;
}

#navbarCollapse > form {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 3%;
}

@media (min-width: 750px) {
    .showtext {
        font-size: 70px;
    }

    .chancetxt {
        margin-bottom: -35px;
        font-size: 27px;
    }

    .txtroom {
        font-size: 27px;
    }

    .resroom {
        height: 100px;
    }
}

@media (min-width: 1200px) {
    .resroom {
        height: 150px;
    }

    .txtroom {
        font-size: 32px;
    }

    .chancetxt {
        margin-bottom: -25px;
        font-size: 27px;
    }
}

@media (min-width: 992px) {
    .sidenav {
        background-image: url('');
    }
}

/* @media (max-width: 992px) {
    #navbarCollapse > form {
        display: none;
    }
} */


a, a:hover {
    text-decoration: none;
}

.h1, h1 {
    font-size: 1.75rem;
}

.h2, h2 {
    font-size: 1.5rem;
}

.h3, h3 {
    font-size: 1.25rem;
}

.bg-black {
    background-color: #000000 !important;
}

.text-black {
    color: #000000 !important;
}

.text-brown {
    color: #dcd5d3 !important;
}

.text-brown2 {
    color: #eae1d3 !important;
}

.text-gold {
    color: #2BB9D9 !important;
}

.border-radius {
    border-radius: 8px;
}

.border-gold {
    background-size: 100% 1px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    background-color: #000;
    border-left: 3px solid #3e251d;
    border-right: 3px solid #b89247;
    background-image: -webkit-gradient(linear, left top, right top, from(#3e251d), color-stop(25%, #8e7757), color-stop(50%, #fae0a3), color-stop(75%, #eaca85), to(#b89247));
    background-image: linear-gradient(90deg, #3e251d 0, #8e7757 25%, #fae0a3 50%, #eaca85 75%, #b89247);
}

a:hover {
    color: #deedfd !important;
    transition: .3s ease-out;
}

.bg-gradient {
    background-image: -webkit-gradient(linear, left top, right top, from(#3e251d), color-stop(25%, #8e7757), color-stop(50%, #fae0a3), color-stop(75%, #eaca85), to(#b89247));
    background-image: linear-gradient(90deg, #000000 0, #40C6DE 25%, #40C6DE 50%, #40C6DE 75%, #000000);
}

.social-icon a {
    color: #000;
    text-decoration: none;
    font-size: 0.85rem;
    transition: .3s ease-out;
}

.social-icon a:hover {
    opacity: .5;
}

.logo img {
    width: 100%;
    max-width: 250px;
}

.btn-gradient {
    background-image: -webkit-gradient(linear, left top, right top, from(#3e251d), color-stop(25%, #8e7757), color-stop(50%, #fae0a3), color-stop(75%, #eaca85), to(#b89247));
    background-image: linear-gradient(90deg, #000000 0, #000000 25%, #40C6DE 50%, #000000 75%, #000000);
}

.btn-gradient, .btn-gradient:focus, .btn-gradient:hover, .btn-gradient:not(:disabled):not(.disabled).active, .btn-gradient:not(:disabled):not(.disabled):active, .btn-gradient:not(:disabled):not(.disabled):active:focus {
    color: #000;
    border: 0;
}

.btn-outline-gradient {
    color: #40C6DE;
    border-color: #40C6DE;
}

.btn-outline-gradient:not(:disabled):not(.disabled).active, .btn-outline-gradient:not(:disabled):not(.disabled):active, .show > .btn-outline-gradient.dropdown-toggle {
    color: #2BB9D9;
    background-color: transparent;
    border-color: #40C6DE;
}

#app-header .nav-item {
    margin: 0 .5rem;
    font-size: 1rem;
}

.all-programs figure, .news figure, .advertise figure {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding: 5px;
    box-shadow: 0 0px 8px #dc3545;
}

.advertise figure {
    background-color: #eaca85;
}

.all-programs figure:before, .news figure:before {
    content: "";
    position: absolute;
    top: -5%;
    left: 0;
    right: 0;
    height: 105%;
    background: #a1902e;
    background: linear-gradient(135deg, #3e251d 0, #40C6DE 50%, #000000 55%, #000000 60%, #000000);
    -webkit-animation: borderAnimate 5s linear infinite;
    animation: borderAnimate 5s linear infinite;
}

.all-programs figure img, .news figure img, .advertise figure img {
    border-radius: .3rem;
    position: relative;
}

@keyframes borderAnimate {
    0% {
        transform: scale3d(3, 2, 1) rotate(0deg)
    }
    to {
        transform: scale3d(3, 2, 1) rotate(1turn)
    }
}

.advertise img {
    border-radius: 8px;
}

.hrline {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(62, 37, 29, 0)), color-stop(25%, rgba(142, 119, 87, 0.5)), color-stop(50%, #fae0a3), color-stop(75%, rgba(234, 202, 133, 0.5)), to(rgba(184, 146, 71, 0)));
    background-image: linear-gradient(90deg, rgba(62, 37, 29, 0) 0, #000000 25%, #40C6DE 50%, #000000 75%, rgba(184, 146, 71, 0));
    height: 15px;
    border-radius: 35px;
}

iframe {
    border-radius: 8px;
}

.nav-item .nav-link {
    font-size: 15px;
    padding: .5rem;
    color: #fff;
}

.news img {
    height: 165px;
    width: 100%;
    /* border-radius: 4px; */
    /* border: 2px solid #8e7757; */
}

.news a {
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}

.win-loss {
    position: absolute;
    z-index: 9999;
    top: 60%;
    text-align: center;
    width: 100%;
    color: #fff;
    text-shadow: 0 5px 10px #000;
    font-size: 18px;
}

.win-loss p {
    padding: 10px 25px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 35px;
    margin: 0;
    display: unset;
}

.user-online {
    position: absolute;
    z-index: 999;
    top: 5px;
    right: 5px;
    color: black;
    padding: 5px 15px;
    border-radius: .3rem;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(62, 37, 29, 1)), color-stop(25%, rgba(142, 119, 87, 1)), color-stop(50%, #fae0a3), color-stop(75%, rgba(234, 202, 133, 1)), to(rgba(184, 146, 71, 1)));
    background-image: linear-gradient(90deg, rgba(62, 37, 29, 1) 0, rgba(142, 119, 87, 0.49) 25%, #fae0a3 50%, rgba(234, 202, 133, 1) 75%, rgba(184, 146, 71, 1));
}

.user-online span {
    color: green;
}

footer {
    background-color: rgba(0, 0, 0, 0.8);
}

footer li {
    font-size: 14px;
}

footer li a {
    color: #fff;
}

.card {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.myCol {
    float: left;
}

.ball-grid2 {
    margin: 0 0 5px 5px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: #ffffff /*background-color: rgba(0,0,0,.2);*/;
}

@media only screen and (max-width: 767px) {
    .nav-menu {
        margin-top: 40px;
    }

    .nav-menu .nav-item {
        width: 100%;
        margin: 0;
    }
}

@media only screen and (max-width: 420px) {
    .ball-grid2 {
        margin: 0 0 5px 5px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #ffffff;
    }
}

.cicle-red {
    background-color: #FF0000;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    color: #FF0000;
    box-shadow: 0 2px 0 0 #650013, 0 5px 10px 0 rgba(0, 0, 0, .7);
}

.cicle-blue {
    background-color: #00a4ff;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    color: #0000FF;
    box-shadow: 0 2px 0 0 #005789, 0 5px 10px 0 rgba(0, 0, 0, .7);

}

.cicle-green {
    background-color: #00FF00;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    color: #00FF00;
    box-shadow: 0 2px 0 0 #004210, 0 5px 10px 0 rgba(0, 0, 0, .7);
}

.cicle-red1 {
    background-color: #FF0000;
    /*    border-radius: 50%;
        width: 100%;
        height : 100%;
        color : #FF0000;*/
    box-shadow: 0 2px 0 0 #650013, 0 5px 10px 0 rgba(0, 0, 0, .7);
}

.cicle-blue1 {
    background-color: #00a4ff;
    /*    border-radius: 50%;
        width: 100%;
        height : 100%;
        color : #0000FF;*/
    box-shadow: 0 2px 0 0 #005789, 0 5px 10px 0 rgba(0, 0, 0, .7);

}

.cicle-green1 {
    background-color: #00FF00;
    /*    border-radius: 50%;
        width: 100%;
        height : 100%;
        color : #00FF00;*/
    box-shadow: 0 2px 0 0 #004210, 0 5px 10px 0 rgba(0, 0, 0, .7);
}

.cicle-gray {
    background-color: #a0a0a0;
    /*border-radius: 50%;*/
    width: 100%;
    height: 100%;
    color: #00FF00;
}

.cicle-blue {
    background-image: url(img/c-blue.html);
    background-size: cover;
}

.cicle-green {
    background-image: url(img/c-green.html);
    background-size: cover;
}

.cicle-red {
    background-image: url(img/c-red.html);
    background-size: cover;
}

.animated {
    animation-duration: 2.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.bounce {
    animation-name: bounce;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.flash {
    animation-name: flash;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
}

@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    60% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    100% {
        transform: scale(1);
    }
}

.rubberBand {
    animation-name: rubberBand;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.shake {
    animation-name: shake;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing;
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

.wobble {
    animation-name: wobble;
}

@keyframes flip {
    0% {
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    backface-visibility: visible;
    animation-name: flip;
}

@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out;
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

.rollIn {
    animation-name: rollIn;
}

@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}

.rotateIn {
    animation-name: rotateIn;
}

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    80% {
        transform: rotate(60deg) translateY(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translateY(700px);
    }
}

.hinge {
    margin: 20px;
    animation-name: hinge;
}

.cicle-count {
    margin-top: 50px;
    float: right;
    color: #ffffff;
    border-radius: 50%;
}

.btn-count {
    margin: 5px;
    font-size: 20px;
    font-weight: bold;
    /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
    cursor: pointer;
}

.list-baccaret {
    padding: 20px 0;
}

.list-baccaret .have-right-border::after {
    content: '';
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0%, #1c1c1c 48%, transparent);
    border-radius: 10px;
}

.list-baccaret .result-list {
    padding: 5px;
    border: 2px solid #c09a5e;
    border-radius: 50px;
    margin: 10px 0;
    background-image: linear-gradient(#000000 0%, #000000 48%, #1c1c1c 48%, #000000 100%);
}

@media only screen and (max-width: 767px) {
    .list-baccaret .result-list {
        padding: 10px 0px;
    }
}

.list-baccaret .result-list .img-content {
    padding: 0 30px;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .list-baccaret .result-list .img-content {
        padding: 0 15px;
    }
}

.list-baccaret .result-list .img-content span {
    font-size: 22px;
    position: absolute;
    bottom: -8px;
    left: 63%;
    color: #c09a5e;
    transform: translate(-50%, 0);
}

@media only screen and (max-width: 767px) {
    .list-baccaret .result-list .img-content span {
        bottom: -15px;
        left: 70%;
    }
}

.list-baccaret .result-list .content {
    text-align: center;
}

.list-baccaret .result-list .content h1 {
    line-height: 0;
    color: #c09a5e;
    font-size: 2.5rem;
}

@media only screen and (max-width: 767px) {
    .list-baccaret .result-list .content h1 {
        font-size: 3.5rem;
        line-height: 0.2;
    }
}

.room-section .room-content {
    margin: 30px 0;
    border-radius: 50px;
    background-image: linear-gradient(0deg, #000000 0%, #000000 10%, #1c1c1c 48%, #000000 100%);
    border: 2px solid #c09a5e;
    padding: 10px 30px;
}

.room-section .room-content .header .logo {
    width: 150px;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .header .logo {
        width: 145px;
    }
}

.room-section .room-content .header span {
    font-size: 30px;
    color: #c09a5e;
    margin-left: 15px;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .header span {
        width: 28px;
    }
}

.room-section .room-content .content {
    text-align: center;
}

.room-section .room-content .content .result-content {
    justify-content: center;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-content {
        justify-content: flex-start;
    }
}

.room-section .room-content .content .result-content .win-rate {
    display: flex;
}

.room-section .room-content .content .result-content .win-rate p {
    padding: 17px 0;
    font-size: 24px;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-content .win-rate p {
        padding: 17px 0 0;
    }
}

.room-section .room-content .content .result-content .win-rate .result {
    margin-left: 20px;
    font-size: 35px;
    border: 2px solid #c09a5e;
    border-radius: 50px;
    width: 110px;
    height: 75px;
    padding: 10px;
    color: #c09a5e;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-content .win-rate {
        display: table;
    }
}

.room-section .room-content .content .result-content .next-round {
    display: flex;
    margin-left: 30px;
}

.room-section .room-content .content .result-content .next-round p {
    padding: 17px 0;
    font-size: 24px;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-content .next-round p {
        padding: 17px 0 0;
    }
}

.room-section .room-content .content .result-content .next-round .result {
    margin-left: 20px;
    font-size: 40px;
    border: 2px solid #c09a5e;
    border-radius: 50px;
    width: 110px;
    height: 75px;
    padding: 13px;
    color: #ffffff;
}

.room-section .room-content .content .result-content .next-round .result .result-text {
    width: 50px;
    height: 50px;
    background-image: linear-gradient(#980000 0%, #ff0000 48%, #9c0000 99%);
    border-radius: 50%;
    font-size: 36px;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-content .next-round {
        display: table;
    }
}

.room-section .room-content .content .result-table {
    padding: 0 30px;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-table {
        padding: 30px 0;
    }
}

.room-section .room-content .content .result-table p {
    font-size: 22px;
}

.room-section .room-content .content .result-table .result-td {
    width: 100%;
    height: 40px;
    background: #c09a5e;
    padding: 2px 4px;
    border: 1px solid #000000;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-table .result-td {
        height: 25px;
        padding: 2px 2px;
    }
}

.room-section .room-content .content .result-table .result-td .result-table-text {
    width: 32px;
    height: 32px;
    background-image: linear-gradient(#980000 0%, #ff0000 48%, #9c0000 99%);
    border-radius: 50%;
    font-size: 24px;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .room-section .room-content .content .result-table .result-td .result-table-text {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }
}

.room-section .room-content .round-table {
    margin: 50px 0;
    height: 200px;
    overflow-y: auto;
}

.room-section .room-content .round-table table tr, .room-section .room-content .round-table table th, .room-section .room-content .round-table table td {
    color: #ffffff;
}

.room-section .room-content .round-table table td, .room-section .room-content .round-table table th {
    border-bottom: 1px solid #b6b6b6;
}

.room-section .room-content .round-table table td.bg-green {
    background-image: linear-gradient(to right, transparent 0%, #12ff00 48%, #12ff00 48%, transparent 100%);
}

.room-section .room-content .round-table table td.bg-red {
    background-image: linear-gradient(to right, transparent 0%, red 48%, red 48%, transparent 100%);
}

.right-content {
    float: right;
}

@media only screen and (max-width: 767px) {
    .right-content {
        float: none;
        text-align: right;
    }
}

.progress-pie-chart {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #E5E5E5;
    position: relative;
}

.progress-pie-chart#chart_1.gt-50 {
    background: red;
}

.progress-pie-chart#chart_2.gt-50 {
    background: #12ff00;
}

.progress-pie-chart#chart_3.gt-50 {
    background: #003cff;
}

.ppc-progress {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    width: 100px;
    height: 100px;
    clip: rect(0, 100px, 100px, 50px);
}

.ppc-progress .ppc-progress-fill {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    width: 100px;
    height: 100px;
    clip: rect(0, 50px, 100px, 0);
    background: #81CE97;
    transform: rotate(60deg);
}

.gt-50 .ppc-progress {
    clip: rect(0, 50px, 100px, 0);
}

.gt-50 .ppc-progress .ppc-progress-fill {
    clip: rect(0, 100px, 100px, 50px);
    background: #E5E5E5;
}

#chart_1.blue .ppc-progress-fill {
    background: red;
}

#chart_2.blue .ppc-progress-fill {
    background: #12ff00;
}

#chart_3.blue .ppc-progress-fill {
    background: #003cff;
}

.ppc-percents {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 86.95652px / 2);
    top: calc(50% - 86.95652px / 2);
    width: 86.95652px;
    height: 86.95652px;
    background: #000000;
    text-align: center;
    display: table;
}

.ppc-percents span {
    display: block;
    font-size: 35px;
    font-weight: bold;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    .ppc-percents span {
        font-size: 35px;
    }
}

.pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
}


.progress-pie-chart {
    margin: 50px auto 0;
}

.btn-1 {
    border-radius: 37px;
    background-image: linear-gradient(#980000 0%, #ff0000 48%, #9c0000 99%);
    border: 2px solid #c09a5e;
    color: #ffffff;
    font-weight: bold;
    min-width: 150px;
    margin: 0 10px;
}

body{
    background: black;
    color: white;
    font-family: 'Articulat CF';
    display: block;
    position: relative;
    transition: background-color .5s;
}

body:after{
    content: "";
    background-image: url('/images/background-img.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}



main{
    position: relative;
    z-index: 0;
}

.banner-div{
    height: auto;
    width: 100%;
    /* background-image: url("./images/banner.jpg");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: black; */
    position: relative;
    margin-bottom: 30px;
}

.banner-div > img{
    width: 100%;
    height: auto;
}

.all-programs figure:before {

    content: "";

    position: absolute;

    top: -5%;

    left: 0;

    right: 0;

    height: 105%;

    background: #a1902e;

    /* background: linear-gradient(135deg, #3e251d 0, #40C6DE 50%, #000000 55%, #000000 60%, #000000); */
    background: linear-gradient(135deg, #3e251d 0, #D4AF37 50%, #000000 55%, #000000 60%, #000000);

    -webkit-animation: borderAnimate 5s linear infinite;

    animation: borderAnimate 5s linear infinite;

}



@keyframes borderAnimate {

    0% {

        transform: scale3d(3, 2, 1) rotate(0deg)

    }

    to {

        transform: scale3d(3, 2, 1) rotate(1turn)

    }

}

.thumbnail-section{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 0 20px;
}

.game_div img{
    width: 100%;
}

.game_div p{
    color: Khaki;
    font-size: 16px;
    font-family: 'Google Sans';
    text-align: center;
    margin-top: 10px;
}

/* @media (max-width: 1072px) {
    .banner-div>img {
        height: 564px;
    }
}

@media (max-width: 1072px) {
    .banner-div>img {
        height: 500px;
    }
} */

@media (max-width: 992px) {
    .thumbnail-section{
        grid-template-columns: 1fr 1fr 1fr;
        gap: 7px;
        padding: 0 10px;
    }
    .game_div img{
        width: 100%;
    }
}

/* @media (max-width: 850px) {
    .banner-div>img {
        height: 430px;
    }
}

@media (max-width: 751px) {
    .banner-div>img {
        height: 350px;
    }
}

@media (max-width: 575px) {
    .banner-div>img {
        height: 312px;
    }
}

@media (max-width: 500px) {
    .banner-div>img {
        height: 250px;
    }
}

@media (max-width: 400px) {
    .banner-div>img {
        height: 200px;
    }
} */


@font-face {
    font-family: "Articulat CF"; src: url('/fonts/Articulat/ArticulatCF-Regular.otf') ;
    font-family: "Google Sans"; src: url('/fonts/ProductSans-Regular.ttf') ;
}

body{
    background: black;
    color: white;
    font-family: 'Articulat CF';
    display: block;
    position: relative;
    transition: background-color .5s;
}

body:after{
    content: "";
    background-image: url('/images/background-img.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

button{
    outline: none;
}

/* styling for the navbar */
nav{
    background: #000C16;
    font-family: 'Google Sans';
    font-size: 16px;
    line-height: 20.35px;
    color: #E4E4E4;
    padding: 0 9% !important;
}

nav a {
    color: #E4E4E4;
    text-decoration: none;
}

nav a:hover{
    color: #E4E4E4;
    text-decoration: none;
}

.nav-right{
    display: flex;
    width: 25%;
    justify-content: space-evenly;
    align-items: center;
}

.small-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 80%;
}

.small-nav>li{
    padding: 0% 4%;
}

/*right sidenavbar */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}


/* section after navbar */

.rooms{
    display: flex;
    text-align: center;
    margin: 0% 10%;
    margin-top: 5%;
    justify-content: space-around;
}


.rooms p {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

.info-div{
    font-size: small;
    padding-top: 2%;
    color: #f9ce46;
    padding-left: 9%;
    padding-bottom: 2%;
}

.module-border-wrap {
    width: 455px;
    padding: 1rem;
    position: relative;
    background: linear-gradient(to right, rgba(193,142,25,1), rgba(193,142,25,0.13));
    padding: 3px;
    border-radius: 10px;
    margin-top: 10%;
    height: 140px;
}

.module {
    color: white;
    background-color: #04121E;
    border-radius: 10px;
    height: 100%;
}

.module a{
    color: #C18E19;
    background-color: #04121E;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 100%;
    border-radius: 10px;
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
}

.module>a>svg{
    margin-left: 3%;
}

.info-heading{
    font-family: 'Google Sans';
    color: white;
    font-size: 20px;
    line-height: 38px;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: yellow;
}

/* Styling for legend and rules and guidlines */
.legend{
    font-size: 16px;
    font-family: 'Google Sans';
    color: #EDEDED;
    line-height: 20.35px;
    margin-top: 2%;

}

.legend>div{
    display: flex;
}

footer{
    background-color: #000C16;
    padding: 4%;
    padding-bottom: 1%;
    font-family: 'Google Sans';
    color: #485D70;
}

.footer-nav{
    display: flex;
    justify-content: space-evenly;
    width: 50%;
    font-size: 14px;
    line-height: 17.81px;
    margin-left: 4%;
}

.footer-nav a{
    text-decoration: none;
    color: #485D70;
}

.footer-nav a:hover{
    text-decoration: none;
    color: #485D70;
}

.footer-info{
    font-size: 14px;
    margin-left: 5%;
    width: 50%;
    margin-top: 2%;
}

.footer-link{
    color: #C18E19;
    text-decoration: none;
}

.footer-link:hover{
    color: #C18E19;
    text-decoration: none;
}

.footer-details{
    margin-top: 4%;
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin-left: 5%;
}

.footer-certification img{
    height: 35px;
    width: 65.96px;
    background-color: white;
}

footer hr{
    border-top: 1px solid rgba(72, 93, 112, 0.5);
}

.footer-media-icons{
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    width: 10%;
}

/* Styling for the modal */

.rules-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.rules-modal-content {
    background-color: #04121E;
    margin: auto;
    padding: 20px;
    border: 1px solid #C18E19;
    width: 80%;
    color: #EDEDED;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#mySidenav>.nav-link{
    font-size: 16px;
    line-height: 20px;
    font-family: 'Google Sans';
    border-bottom: 0.3px solid rgba(193, 142, 25, 0.5);
    font-weight: 500px;
}

/*media querries for screens smaller than 800px*/
@media screen and (max-width: 768px) {
    #large-screen{
        display: none;
    }

    #small-screen{
        display: block;
        padding-right: 0 !important;
    }

    #rules{
        font-size: 16px;
        line-height: 20px;
    }

    .legend{
        font-size: 9px;
        line-height: 12px;
    }

    .footer-nav{
        display: none;
    }

    .footer-info{
        display: none;
    }

    .footer-details{
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .footer-media-icons{
        margin: auto;
        width: 25%;
    }
}

@media screen and (min-width: 768px) {
    #large-screen{
        display: block;
        display: flex;
    }

    #small-screen{
        display: none;
    }
}

@media screen and (max-width: 1500px) {
    .nav-right{
        width: 40%;
    }
}

/* UPDATED BANNER STYLES */
.top-banner{
    display: flex;
    padding:0 1%;
    gap: 20px;
    margin-top: 70px;
}

.left-side{
    width: 100%;
}

.left-side > img{
    width: 100%;
}

.right-side{
    width: 100%;
}
.youtube-gif{
    display: none
}
.lightning-box {
    position: relative;
    background: #111;
    border-radius: 20px;
    border: 3px solid #89d9fd;
    /*overflow: hidden; !* Quan trọng để clip phần ::before bên trong *!*/
}
.float-left{
    float: left;
}
.text-percent{
    font-size: 60px;
    font-weight: 700;
    color: white;
    border: 1px solid #183f6e;
    background: #183f6e;
    border-radius: 10px;
}
.bg-blue{
    background: #183f6e;
}
/* --- Define Keyframes for Dual Border Animation --- */
.container1 {
    position: relative;
    /*width: 250px;  !* Square size *!*/
    /*height: 250px; !* Square size *!*/
}
@keyframes lightningShine {
    0% {
        /* Dimmer blue start/end state */
        box-shadow:
            /* Outer */ 0 0 7px 2px rgba(0, 170, 255, 0.3),
            /* Inner */ inset 0 0 5px 1px rgba(0, 170, 255, 0.2);
        border-color: rgba(0, 170, 255, 0.4);
    }
    40% {
        /* Bright cyan flash */
        box-shadow:
            /* Outer */ 0 0 18px 4px rgba(0, 255, 255, 0.8),
            /* Inner */ inset 0 0 12px 3px rgba(0, 255, 255, 0.6);
        border-color: rgba(100, 255, 255, 0.7);
    }
    60% {
        /* Slightly different bright flash */
        box-shadow:
            /* Outer */ 0 0 15px 3px rgba(150, 255, 255, 0.7),
            /* Inner */ inset 0 0 10px 2px rgba(150, 255, 255, 0.5);
        border-color: rgba(150, 255, 255, 0.6);
    }
    100% {
        /* Back to dimmer blue */
        box-shadow:
            /* Outer */ 0 0 7px 2px rgba(0, 170, 255, 0.3),
            /* Inner */ inset 0 0 5px 1px rgba(0, 170, 255, 0.2);
        border-color: rgba(0, 170, 255, 0.4);
    }
}
/* --- End Keyframes --- */


.electric-box {
    width: 100%;
    height: 100%;
    background-color: #183f6e;
    border-radius: 20px; /* Reduced radius for square */
    z-index: 1;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    justify-content: center;
    align-items: center;
    min-width:100px;
    /*max-width: 240px;*/
    /*max-height: 200px;*/
    /* --- Updated Border/Shadow for Animation --- */
    border: 2px solid rgba(0, 170, 255, 0.4);
    /* Remove static box-shadow */
    /* Apply the animation */
    animation: lightningShine 2s infinite linear;
    cursor: pointer;
    /* --- End Border/Shadow Update --- */
}
.electric-box img{
    height: 50px;
}

@keyframes blinkYellow {
    0%, 100% {
        filter: drop-shadow(0 0 0px yellow);
    }
    50% {
        filter: drop-shadow(0 0 8px yellow);
    }
}

.blink-yellow {
    animation: blinkYellow 1s infinite;
}


.lightning-svg { /* Outer electric snake SVG */
    position: absolute;
    /*max-width: 240px;*/
    min-width:100px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    filter:
        drop-shadow(0 0 8px #00ffff)
        drop-shadow(0 0 15px #00aaff);
    overflow: visible;
    /* border-radius: 10px; */ /* Match box radius if needed */
}

.electric-snake { /* The snake path itself */
    will-change: stroke-width, opacity, d;
}

.center-image{
    width: 100%;
    height: 100%;
    max-height: 600px;
}

/* --- Loader Styles (Unchanged, might need slight size adjustment if box is smaller) --- */
/*.loader-container{display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3}.circular-loader{position:relative;width:80px;height:80px;margin-bottom:5px}.circular-loader svg{width:100%;height:100%;transform:rotate(-90deg)}.circular-loader .track,.circular-loader .progress{fill:none;stroke-width:8}.circular-loader .track{stroke:#334455}.circular-loader .progress{stroke:#00ffff;stroke-linecap:round;stroke-dasharray:251.2;stroke-dashoffset:251.2;transition:stroke-dashoffset .1s linear}.circular-loader .decor-dashed{fill:none;stroke:rgba(0,255,255,.3);stroke-width:1;stroke-dasharray:2 4}.percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.3em;font-weight:700;color:#fff}.bar-loader{width:120px;height:8px;background-color:#334455;border-radius:4px;overflow:hidden;position:relative}.bar-progress{width:0%;height:100%;background-color:#00ffff;border-radius:4px;transition:width .1s linear}.loading-text{font-size:.9em;color:#bbb}*/
/* --- End Loader Styles --- */
.showTurn1 .showTurn_item{
    color: white;
    font-size: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 700;
}
.progress-bar-index {
    width: 100%;
    height: 8px;
    background: #5b6b6e;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,255,255,0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, cyan, #00ffff, #66ffff);
    box-shadow: 0 0 15px cyan;
    animation: shimmer 2s linear infinite;
    transition: width 0.4s ease-in-out;
}

@keyframes shimmer {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.6);
    }
    100% {
        filter: brightness(1);
    }
}
/*@keyframes lightning-border {*/
/*    0% {*/
/*        border-image-source: linear-gradient(0deg, yellow, orange, white, orange, yellow);*/
/*    }*/
/*    25% {*/
/*        border-image-source: linear-gradient(90deg, yellow, orange, white, orange, yellow);*/
/*    }*/
/*    50% {*/
/*        border-image-source: linear-gradient(180deg, yellow, orange, white, orange, yellow);*/
/*    }*/
/*    75% {*/
/*        border-image-source: linear-gradient(270deg, yellow, orange, white, orange, yellow);*/
/*    }*/
/*    100% {*/
/*        border-image-source: linear-gradient(360deg, yellow, orange, white, orange, yellow);*/
/*    }*/
/*}*/
@media screen and (max-width: 768px){
    .youtube-gif{
        display: block
    }

	.youtube-gif > img{
		height: 100%;
	}

    .top-banner{
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-rows: 1fr 10px;*/
        grid-gap: 15px
    }

    .right-side{
        display: none;
    }
    .electric-box img{
        height: 30px;
    }
    .showTurn1 .showTurn_item {
        font-size: 12px;
    }
    .showTurn1::before {
        width: 30px;
        height: 30px;
    }
    .showTurn1::after {
        width: 80px;
        height: 80px;
    }

    .text-percent {
        font-size: 30px;
    }
}