:root {
    --main-color: rgb(17, 17, 17);
    --secondary-color: #b71f1f;
    --gold-color:#d43737; 
    --text-white: #fff;
    --main-color-transparent: #00000021;
    --color-content-background: rgba(62,40,40,0.23921568627450981);
    --color-charcoal: #141416;
    --color-charcoal-dark: #0c0c0c;
    --primary-color: #3182ce;
    --warning-color: #b7791f;
}

/* UTILIDADES DE COR BÁSICA */
.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.btn-warning,
.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-white) !important;
}

/* BASE GLOBAL */

html {
    overflow-x: hidden !important;
}

* {
    font-family: 'CronosPro', sans-serif;
    font-family: 'Cronos Pro', sans-serif;
}

body {
    height: 100%;
    background-color: var(--main-color);
}

ul {
    list-style: none;
}

ul.dot-style {
    list-style: square;
}

a {
    text-decoration: none;
    color: var(--text-white);
}

/* FUNDO / BG GERAL */

#vanta-fog {
    height: 800px;
    position: absolute;
    z-index: -1;
}

.bg-transition {
    z-index: 20;
    min-height: 100vh;
}

.bg-fog-gradient{
    background: linear-gradient(0deg, rgb(17, 17, 17) 20%, rgba(0,0,0,0) 100%) !important;
}

/* NAVBAR / HEADER BÁSICO */

.navbar {
    background-color: var(--main-color) !important;
    border-bottom: 1px solid var(--secondary-color);
}

.navbar-toggler {
    color: var(--text-white);
    box-shadow: unset !important;
}

.logo-img {
	max-height: 400px;
	width: auto;
	display: block;
}

.container-alinhado {
	padding-left: 0.5rem;
	padding-right: 100px;
	padding-top: 10px;
	padding-bottom: 0.5rem;
}

#logo {
    max-width: 400px;
    filter: drop-shadow(0 0 15px #0f0d0d);
}

.header-menu {
    font-size: 22px;
}

.decorator {
    height: 1px;
    box-shadow: 0 3px 8px #000;
    background: radial-gradient(circle,var(--secondary-color) 0,transparent 98%);
}

.header-menu > ul > li > a {
    transition: all .2s;
    text-shadow: 0 0 15px #0f0d0d;
}

.header-menu > ul > li > a:hover {
    color: var(--gold-color);
}

/* DROPDOWN DO MENU */

.nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    margin-top: 11px;
    transform: translate(-100%, -2%);
    transition: height .3s,opacity .3s,visibility .3s,transform .3s,display .3s;
}

.nav-dropdown-menu > ul {
    background: linear-gradient(0deg,transparent 0,rgba(0,0,0,.6) 40px,#000);
    padding: 20px;
    white-space: nowrap;
}

.nav-dropdown-menu:hover,
.nav-dropdown:hover + .dropdown-nav .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-menu > ul li {
    margin-bottom: 10px;
}

.nav-dropdown-menu > ul li a {
    transition: all .3s;
}

.nav-dropdown-menu > ul li a:hover {
    color: var(--gold-color);
}

/* TITULOS / TEXTOS BÁSICOS */

header h1 {
    font-size: 3rem;
}

.text-glow {
    text-shadow: var(--gold-color) 0 -2px 15px;
}

.text-shadow {
    text-shadow: var(--color-charcoal) 0 -2px 15px;
}

.main-title {
    width: 66.6%;
}

/* BOTÃO PRINCIPAL (PLAY NOW) – USADO NO HEADER */

.play-now-button {
    --play-now-button-border-width: 4px;
    --play-now-button-border-radius: 5px;
    --play-now-button-text-transform: none;
    --play-now-button-font-variant: small-caps;
    --play-now-button-gradient-color1: 220,130,0;
    --play-now-button-gradient-color2: 200,115,0;
    --play-now-button-gradient-color3: 180,100,0;
    --play-now-button-base-shadow: 0 2px 2px rgba(0,0,0,0.5),0 4px 10px rgba(0,0,0,0.3);
    --play-now-button-hover-shadow: 0 2px 1px rgba(0,0,0,0.4),0 4px 8px rgba(0,0,0,0.2);
    --play-now-button-down-shadow: 0 2px 3px rgba(0,0,0,0.5),0 4px 12px rgba(0,0,0,0.3);
    --play-now-button-text-shadow: 0 2px 1px hsla(0,0%,100%,0.4),0 -3px 1px rgba(0,0,0,0.4);
    --play-now-button-transition: .1s ease-out;
    font-size: 20pt;
    padding: 0.8em 1.8em;
    background: radial-gradient(at bottom,rgb(129, 9, 9) 0,rgb(161, 16, 5) 34%,rgb(233, 38, 38) 89%), 
    radial-gradient(at bottom,rgba(220, 15, 0, 0.1) 0,rgba(200, 30, 0, 0.1) 34%,rgba(180, 36, 0, 0.3) 89%);
    background-blend-mode: multiply;
    box-shadow: var(--play-now-button-base-shadow);
    color: #fff;
    border: var(--play-now-button-border-width) solid transparent;
    border-radius: var(--play-now-button-border-radius);
    text-decoration: none!important;
    display: inline-block;
    text-align: center;
    text-transform: var(--play-now-button-text-transform);
    font-variant: var(--play-now-button-font-variant);
    position: relative;
    transition: var(--play-now-button-transition);
    text-shadow: var(--play-now-button-text-shadow);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
}

.play-now-button:after,
.play-now-button:before {
    content: " ";
    position: absolute;
    top: calc(var(--play-now-button-border-width)*-1);
    left: calc(var(--play-now-button-border-width)*-1);
    bottom: calc(var(--play-now-button-border-width)*-1);
    right: calc(var(--play-now-button-border-width)*-1)
}

.play-now-button:before {
    background: var(--play-now-button-texture-url),var(--play-now-button-texture-url);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
    border-radius: calc(var(--play-now-button-border-radius) + 4px)
}

.play-now-button:after {
    border-radius: inherit;
    mix-blend-mode: overlay;
    transition: inherit;
    box-shadow: inset 0 0 100px transparent
}

.play-now-button:hover {
    box-shadow: var(--play-now-button-hover-shadow)
}

.play-now-button:hover:after {
    box-shadow: inset 0 0 100px hsla(0,0%,100%,.8)
}

.play-now-button.down,
.play-now-button:active {
    box-shadow: var(--play-now-button-down-shadow);
    transform: translateY(2px)
}

.play-now-button.down:after,
.play-now-button:active:after {
    box-shadow: inset 0 0 100px rgba(0,0,0,.5)
}

/* Partículas do botão */
.play-now-button-particle {
    position: absolute;
    height: 100%;
    width: var(--size);
    mix-blend-mode: overlay;
    animation: animate-play-now-particle var(--speed) ease-out infinite;
    animation-fill-mode: both;
    animation-delay: var(--delay)
}

.play-now-button-particle:after {
    content: " ";
    height: var(--size);
    width: var(--size);
    display: block;
    background: #fff;
    border-radius: 50%;
    filter: blur(var(--blur))
}

@keyframes animate-play-now-particle {
    0% {
        transform: translateY(0)
    }
    80% {
        opacity: .8
    }
    to {
        transform: translateY(-160%);
        opacity: .5
    }
}

/* GRADIENTES E FUNDOS DE CONTEÚDO */

.bg-opacity {
    background: linear-gradient(180deg,var(--color-content-background) 350px,transparent 800px);
}

footer {
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 100%) !important;
}

footer span {
    font-size: 11px;
}

.shura-deco {
    width: 50%;
    right: -180px;
    top: -100px;
}

/* OFFCANVAS / UTILIDADES */

.dark-offcanvas {
    background-color: var(--main-color) !important;
}

.fs-xl {
    font-size: 1.25rem;
}

.icon-offcanvas {
    font-size: 65px;
}

.custom-border {
    border-color: var(--gold-color) !important;
}

/* HELPERS DE GRADIENTE */

.to-black {
    --gradient-to-color: #000
}

.to-charcoal {
    --gradient-to-color: var(--color-charcoal);
}

.to-charcoal-dark {
    --gradient-to-color: var(--color-charcoal-dark)
}

.from-transparent {
    --gradient-from-color: transparent;
    --gradient-color-stops: var(--gradient-from-color),var(--gradient-to-color,transparent);
}

.bg-gradient-to-b {
    background-image: linear-gradient(180deg,var(--gradient-color-stops));
}

.h-24 {
    height: 6rem;
}

/* CARDS / ITENS GENÉRICOS QUE NÃO SÃO 3D-ANIMADOS */

.item-card {
    width: 32%;
}

.item-card-body {
    width: 100%;
}

.bg-dark,
.btn-dark {
    background-color: var(--main-color) !important;
}

.bg-danger,
.btn-danger {
    background-color: var(--secondary-color) !important;
}

.icon-shadow {
    filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
}

/* RESET DA TABELA */

.table>:not(caption)>*>* {
    background-color: unset;
}

/* ÍCONES DE ITENS */

.item-icon {
    max-width: 32px;
    transition: all 0.3s;
}

.item-card:hover > div > .item-icon {
    max-width: 90px;
}

/* ESTILOS GERAIS DE CARDS ESCUROS / HOVER */

.bg-darker {
    background-color: #000;
}

.hover {
    transition: all .3s;
    outline: solid black 1px;
} 

.hover:hover {
    background-color: rgb(15, 15, 15) !important;
    outline: 1px solid var(--warning-color);
}

/* RESPONSIVO SIMPLES PARA ITEM-CARD */

@media (max-width: 1120px) {
    .item-card {
        width: 100%;
    }
}