:root {
    /* Colors */
    --graySuperLight: #F8F9FA;
    --grayLightest: #E9ECEF;
    --grayLighter: #DEE2E6;
    --grayLight: #CED4DA;
    --grayMediumLight: #ADB5BD;
    --gray: #6C757D;
    --grayMediumDark: #5A6268;
    --grayDark: #495057;
    --grayDarker: #343A40;
    --grayDarkest: #212529;
    --red: #DC3545;
    --redDark: #C82333;
    --green: #28A745;
    --greenDark: #218838;
    --goldSuperLight: #FFF8F0;
    --goldLightest: #F3E6D4;
    --goldLighter: #E8CDA9;
    --goldLight: #DDB47E;
    --goldMediumLight: #D29B52;
    --gold: #C78228;
    --goldDark: #B5711F;
    --goldDarker: #A8610A;
    --purple: #8079D6;
    --textColor: #262726;

    /* Sizes */
    --spacing: 24px;
    --small: 14px;
    --xsmall: 12px;
    --xxsmall: 10px;
    --xxxsmall: 8px;
    --medium: 18px;
    --large: 24px;
    --xlarge: 32px;
    --xxlarge: 48px;
    --xxxlarge: 64px;

    /* Others */
    --transition: all 0.3s ease-in-out;
    --shadowFloor: 0 8px 6px -6px var(--grayDarker);
}

/* Helpers */
.bg-white{ background-color: white !important; }
.bg-gray{ background-color: var(--gray) !important; }
.bg-grayLight{ background-color: var(--grayLight) !important; }
.bg-grayLighter{ background-color: var(--grayLighter) !important; }
.bg-grayLightest{ background-color: var(--grayLightest) !important; }
.bg-gold{ background-color: var(--gold) !important; }
.bg-goldLight{ background-color: var(--goldLight) !important; }
.bg-goldLighter{ background-color: var(--goldLighter) !important; }
.bg-goldLightest{ background-color: var(--goldLightest) !important; }

.txt-white{ color: white !important; }
.txt-black{ color: var(--textColor) !important; }
.txt-gold{ color: var(--gold) !important; }

.fs-small{ font-size: var(--small) !important; }
.fs-xsmall{ font-size: var(--xsmall) !important; }
.fs-xxsmall{ font-size: var(--xxsmall) !important; }
.fs-xxxsmall{ font-size: var(--xxxsmall) !important; }

.uppercase{ text-transform: uppercase !important; }
.lowercase{ text-transform: lowercase !important; }
.cursor-pointer{ cursor: pointer !important; }
.overflow-hidden{ overflow: hidden !important; }

/* UiKit */
/* Buttons */
.uk-button{
    border-radius: calc(var(--spacing) / 4);
}

/* Offcanvas */
.uk-offcanvas-bar {
    background-color: var(--goldDark);
}

/* Others */
#totop {
    position: fixed;
    right: var(--spacing);
    bottom: var(--spacing);
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: var(--goldDark);
    opacity: 0.6;
    border-radius: 50%;
    padding: var(--xsmall);
    cursor: pointer;
    transition: var(--transition);
}

#totop:hover {
    background-color: var(--goldDarker);
    color: white;
    opacity: 1;
}
/* ----------------------------------------------------- */

/* OverlayScrollbars */
.os-theme-dark {
   --os-handle-bg: rgba(199, 130, 40, 0.60);
   --os-handle-bg-hover: rgba(199, 130, 40, 0.80);
   --os-handle-bg-active: rgba(199, 130, 40, 1);
}

/* Structure */
* {
    box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, select, textarea {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--textColor);
}

body {
    background-color: var(--grayLightest);
    margin: 0;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--goldLightest);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--goldMediumLight);
    border-radius: 4px;
    border: 2px solid var(--goldLightest);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--goldDark);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--goldMediumLight) var(--goldLightest);
}

/* Miscellaneous */
.pulse-button {
    background-color: black;
    color: white;
    padding: var(--xsmall) var(--medium) !important;
    border-radius: calc(var(--spacing) / 4);
}

.pulse-button.gold {
    background-color: var(--gold);
    color: white;
    animation: pulseGold 1.5s infinite;
}

.pulse-button.gold:hover {
    background-color: var(--goldDark);
    color: white;
    animation: pulseGold 1.5s infinite;
}

@keyframes pulseGold {
    0% {
        box-shadow: 0 0 0 0 var(--gold);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(199, 130, 40, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(199, 130, 40, 0);
    }
}

@media (hover: none) and (pointer: coarse) {
    #totop {
        opacity: 1;
    }
}