/* -----------------------------------
   Variable Definitions
----------------------------------- */
:root {
    --kaiju-dark: #2b2b2b;
    --kaiju-dark-rgb: 43, 43, 43;
    --kaiju-light: #ffffff;
    --kaiju-light-rgb: 255, 255, 255;
    --kaiju-lavender: #c6b0ee;
    --kaiju-lavender-rgb: 198, 176, 238;
    --kaiju-soft-lavender: #d5cae9;
    --kaiju-soft-lavender-rgb: 213, 202, 233;
    --kaiju-mid-lavender: #9670d4;
    --kaiju-mid-lavender-rgb: 150, 112, 212;
    --kaiju-hard-lavender: #7564e5;
    --kaiju-hard-lavender-rgb: 113, 56, 192;
    --kaiju-green: #daef86;
    --kaiju-green-rgb: 16, 32, 32;
    --kaiju-soft-green: #dbe6b0;
    --kaiju-soft-green-rgb: 219, 230, 176;
    --kaiju-mid-green: #c2df64;
    --kaiju-mid-green-rgb: 194, 223, 100;
    --kaiju-hard-green: #819c29;
    --kaiju-hard-green-rgb: 129, 156, 41;
    --kaiju-orange: #ea714b;
    --kaiju-orange-rgb: 193, 229, 203;
    --kaiju-soft-orange: #f18160;
    --kaiju-soft-orange-rgb: 241, 129, 96;
    --kaiju-mid-orange: #ec592c;
    --kaiju-mid-orange-rgb: 236, 89, 44;
    --kaiju-hard-orange: #df491c;
    --kaiju-hard-orange-rgb: 223, 73, 28;
    --kaiju-cool-gray: #d2d2d2;
    --kaiju-cool-gray-rgb: 210, 210, 210;
    --kaiju-light-gray: #eeeeee;
    --kaiju-light-gray-rgb: 238, 238, 238;
    --bootstrap-dark-theme: #212529;
}

/* -----------------------------------
   Font Face Definitions
----------------------------------- */
@font-face {
    font-family: 'GTAmerica';
    src: url("/static/fonts/GT-America/GT-America-Light.88468584e829.otf") format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'GTAmerica';
    src: url("/static/fonts/GT-America/GT-America-Regular.d2413877fd09.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GTAmerica';
    src: url("/static/fonts/GT-America/GT-America-Medium.fffa87eca38e.otf") format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Obviously';
    src: url("/static/fonts/Obviously/fonnts.com-Obviously.6ce3df27adb6.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* -----------------------------------
   Base Styles
----------------------------------- */
body {
    font-family: 'GTAmerica', serif;
    height: 100%;
    margin: 0;
    color: var(--kaiju-light);
    background-color: var(--kaiju-dark);
}

main {
    flex-direction: column
}

main.main-100vh {
    display: flex;
    flex-direction: unset;
    align-items: center;
    min-height: calc(100vh - 57px);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Obviously', serif;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

.gta {
    font-family: 'GTAmerica', serif;
    text-transform: none;
}

.mx-md-400 {
    margin-left: 11px;
    margin-right: 11px;
}
.mx-md-200 {
    margin-left: 6px;
    margin-right: 6px;
}
.mx-md-150 {
    margin-left: 4px;
    margin-right: 4px;
}

@media (min-width: 576px) {
    .mx-md-400 {
        margin-left: 66px;
        margin-right: 66px;
    }
    .mx-md-200 {
        margin-left: 33px;
        margin-right: 33px;
    }
    .mx-md-150 {
        margin-left: 25px;
        margin-right: 25px;
    }
}

@media (min-width: 768px) {
    .mx-md-400 {
        margin-left: 200px;
        margin-right: 200px;
    }
    .mx-md-200 {
        margin-left: 100px;
        margin-right: 100px;
    }
    .mx-md-150 {
        margin-left: 75px;
        margin-right: 75px;
    }
}

@media (min-width: 1400px) {
    .mx-md-400 {
        margin-left: 400px;
        margin-right: 400px;
    }
    .mx-md-200 {
        margin-left: 200px;
        margin-right: 200px;
    }
    .mx-md-150 {
        margin-left: 150px;
        margin-right: 150px;
    }
}

/* -----------------------------------
   Typography
----------------------------------- */

.underline-link {
    position: relative;
}

.underline-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.25s ease-in-out;
}

.underline-link:hover::after {
    transform: scaleX(1);
    visibility: visible;
}

.underline-link i {
    vertical-align: middle;
    text-decoration: none;
}

.underline-link.underline-coral::after {
    background-color: var(--kaiju-orange);
}

.underline-link.underline-lavender::after {
    background-color: var(--kaiju-lavender);
}

.underline-link.underline-green::after {
    background-color: var(--kaiju-green);
}

/* -----------------------------------
   List Styles
----------------------------------- */
.list-unstyled li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.list-unstyled li svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    margin-right: 0.5rem;
}

/* -----------------------------------
   Backgrounds and Colors
----------------------------------- */
.bg-bs-dark {
    background-color: var(--bootstrap-dark-theme);
    color: var(--kaiju-light);
}

.bg-kaiju-dark {
    background-color: var(--kaiju-dark);
    color: var(--kaiju-light);
}

.bg-dark-accent {
    background-color: var(--kaiju-cool-gray);
    color: var(--kaiju-dark);
}

.bg-light-accent {
    background-color: var(--kaiju-light-gray);
    color: var(--kaiju-dark);
}

.bg-lavender {
    background-color: var(--kaiju-lavender);
    color: var(--kaiju-dark);
}

.bg-coral {
    background-color: var(--kaiju-orange);
    color: var(--kaiju-dark);
}

.bg-green {
    background-color: var(--kaiju-green);
    color: var(--kaiju-dark);
}

.bg-token-bundles {
    transition: background-color 0.2s ease-in-out;
    background-color: var(--kaiju-cool-gray);
    color: var(--kaiju-dark);
}
.bg-token-bundles:hover {
    background-color: var(--kaiju-lavender);
}

/* -----------------------------------
   Borders
----------------------------------- */
.border-coral {
    border-color: var(--kaiju-orange);
}

.border-lavender {
    border-color: var(--kaiju-lavender);
}

.border-green {
    border-color: var(--kaiju-green);
}

.border-light-accent {
    border-color: var(--kaiju-light-gray);
}

.border-bottom-kaiju {
	border-bottom-style: inset;
	border-bottom-width: medium;
}

/* -----------------------------------
   Text Colors
----------------------------------- */
.text-kaiju-dark {
    color: var(--kaiju-dark) !important;
}

.text-coral {
    color: var(--kaiju-orange) !important;
}

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

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

/* -----------------------------------
   Navigation Links
----------------------------------- */
.nav-link-coral {
    background-color: var(--kaiju-dark);
    color: var(--kaiju-light);
}

.nav-link.nav-link-coral:focus,
.nav-link.nav-link-coral:hover {
    color: var(--kaiju-orange);
}

.nav-link.nav-link-coral.active {
    background-color: var(--kaiju-orange);
    color: var(--kaiju-light);
}

.nav-link-lavender {
    background-color: var(--kaiju-dark);
    color: var(--kaiju-light);
}

.nav-link.nav-link-lavender:focus,
.nav-link.nav-link-lavender:hover {
    color: var(--kaiju-lavender);
}

.nav-link.nav-link-lavender.active {
    background-color: var(--kaiju-lavender);
    color: var(--kaiju-dark);
}

/* -----------------------------------
   Button Styles
----------------------------------- */
.btn-coral {
    --bs-btn-color: var(--kaiju-light);
    --bs-btn-bg: var(--kaiju-orange);
    --bs-btn-border-color: var(--kaiju-orange);
    --bs-btn-hover-color: var(--kaiju-light);
    --bs-btn-hover-bg: var(--kaiju-mid-orange);
    --bs-btn-hover-border-color: var(--kaiju-hard-orange);
    --bs-btn-focus-shadow-rgb: var(--kaiju-mid-orange-rgb);
    --bs-btn-active-color: var(--kaiju-light);
    --bs-btn-active-bg: var(--kaiju-hard-orange);
    --bs-btn-active-border-color: var(--kaiju-hard-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kaiju-light);
    --bs-btn-disabled-bg: var(--kaiju-orange);
    --bs-btn-disabled-border-color: var(--kaiju-orange);
}

.btn-outline-coral {
    --bs-btn-color: var(--kaiju-light);
    --bs-btn-border-color: var(--kaiju-orange);
    --bs-btn-hover-color: var(--kaiju-light);
    --bs-btn-hover-bg: var(--kaiju-orange);
    --bs-btn-hover-border-color: var(--kaiju-orange);
    --bs-btn-focus-shadow-rgb: var(--kaiju-lavender-rgb);
    --bs-btn-active-color: var(--kaiju-light);
    --bs-btn-active-bg: var(--kaiju-orange);
    --bs-btn-active-border-color: var(--kaiju-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kaiju-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kaiju-orange);
    --bs-gradient: none;
}

.btn-lavender {
    --bs-btn-color: var(--kaiju-dark);
    --bs-btn-bg: var(--kaiju-lavender);
    --bs-btn-border-color: var(--kaiju-lavender);
    --bs-btn-hover-color: var(--kaiju-light);
    --bs-btn-hover-bg: var(--kaiju-mid-lavender);
    --bs-btn-hover-border-color: var(--kaiju-hard-lavender);
    --bs-btn-focus-shadow-rgb: var(--kaiju-mid-lavender-rgb);
    --bs-btn-active-color: var(--kaiju-light);
    --bs-btn-active-bg: var(--kaiju-hard-lavender);
    --bs-btn-active-border-color: var(--kaiju-hard-lavender);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kaiju-light);
    --bs-btn-disabled-bg: var(--kaiju-lavender);
    --bs-btn-disabled-border-color: var(--kaiju-lavender);
}

.btn-outline-lavender {
    --bs-btn-color: var(--kaiju-light);
    --bs-btn-border-color: var(--kaiju-lavender);
    --bs-btn-hover-color: var(--kaiju-dark);
    --bs-btn-hover-bg: var(--kaiju-lavender);
    --bs-btn-hover-border-color: var(--kaiju-lavender);
    --bs-btn-focus-shadow-rgb: var(--kaiju-lavender-rgb);
    --bs-btn-active-color: var(--kaiju-dark);
    --bs-btn-active-bg: var(--kaiju-lavender);
    --bs-btn-active-border-color: var(--kaiju-lavender);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kaiju-lavender);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kaiju-lavender);
    --bs-gradient: none;
}

.btn-green {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--kaiju-green);
    --bs-btn-border-color: var(--kaiju-green);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--kaiju-mid-green);
    --bs-btn-hover-border-color: var(--kaiju-hard-green);
    --bs-btn-focus-shadow-rgb: 194, 223, 100;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--kaiju-hard-green);
    --bs-btn-active-border-color: var(--kaiju-hard-green);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--kaiju-green);
    --bs-btn-disabled-border-color: var(--kaiju-green);
}

.btn-outline-green {
    --bs-btn-color: var(--kaiju-light);
    --bs-btn-border-color: var(--kaiju-green);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--kaiju-green);
    --bs-btn-hover-border-color: var(--kaiju-green);
    --bs-btn-focus-shadow-rgb: 191, 161, 233;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--kaiju-green);
    --bs-btn-active-border-color: var(--kaiju-green);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kaiju-green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kaiju-green);
    --bs-gradient: none;
}

.btn-outline-dark {
	--bs-btn-color: var(--kaiju-dark);
	--bs-btn-border-color: var(--kaiju-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--kaiju-dark);
	--bs-btn-hover-border-color: var(--kaiju-dark);
	--bs-btn-focus-shadow-rgb: 33,37,41;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--kaiju-dark);
	--bs-btn-active-border-color: var(--kaiju-dark);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--kaiju-dark);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--kaiju-dark);
	--bs-gradient: none;
}

.btn-outline-gray {
    --bs-btn-color: var(--kaiju-light);
    --bs-btn-border-color: var(--kaiju-cool-gray);
    --bs-btn-hover-color: var(--kaiju-dark);
    --bs-btn-hover-bg: var(--kaiju-cool-gray);
    --bs-btn-hover-border-color: var(--kaiju-cool-gray);
    --bs-btn-focus-shadow-rgb: 81, 81, 81;
    --bs-btn-active-color: var(--kaiju-dark);
    --bs-btn-active-bg: var(--kaiju-cool-gray);
    --bs-btn-active-border-color: var(--kaiju-cool-gray);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kaiju-cool-gray);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kaiju-cool-gray);
    --bs-gradient: none;
}

/* -----------------------------------
   Miscellaneous Styles
----------------------------------- */
#cookie-consent-banner {
    position: fixed;
    z-index: 10;
    bottom: 20px;
    right: 20px;
    width: 50%;
	background: var(--kaiju-cool-gray);
	color: var(--kaiju-dark);
}

.scrollable-table {
    overflow-y: auto;
  }

.kaiju-rounded, .card {
    border-radius: 15px;
}

.card-icon-fluid {
    max-width: 50%;
    height: auto;
}

.span-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.token-card {
    position: relative;
}

.token-card .card-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.token-card .card-title .default-text,
.token-card .card-title .hover-text {
    position: absolute;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.token-card .card-title .default-text {
    opacity: 1;
}

.token-card:hover .card-title .default-text {
    opacity: 0;
}

.token-card:hover .card-title .hover-text {
    opacity: 1;
}

.kaiju-rounded-left {
    border-radius: 15px 0px 0px 15px;
}

.kaiju-rounded-right {
    border-radius: 0px 15px 15px 0px;
}

.kaiju-rounded-bottom {
    border-radius: 0 0 15px 15px;
}

@keyframes fadeInPlusMode {
    0% {
        background-color: transparent;
        color: transparent;
    }
    100% {
        background-color: #1D2B3D;
        color: #91A5CF;
    }
}

/* -----------------------------------
   Icon Styles
----------------------------------- */
/* General transition for all hover directions */
.icon-link-hover svg {
    transition: transform 0.3s ease; /* Smooth transition for all icons */
}

/* Right hover effect */
.icon-link-hover-right:hover svg {
    transform: translateX(5px); /* Move right */
}

/* Left hover effect */
.icon-link-hover-left:hover svg {
    transform: translateX(-5px); /* Move left */
}

/* Up hover effect */
.icon-link-hover-up:hover svg {
    transform: translateY(-5px); /* Move up */
}

.features-icon svg {
    height: 65px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.features-icon svg,
.features-icon span {
    color: var(--kaiju-orange);
    transition: all 0.3s ease 0s;
}

/* .features-icon:hover svg,
.features-icon:hover span {
    color: var(--kaiju-lavender);
} */

/* -----------------------------------
   Img Styles
----------------------------------- */

img.kaiju-card-img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 768px) {
    img.kaiju-card-img {
        height: 400px;
    }
}