:root {
    --var-font-faimly: "refrigerator-deluxe", sans-serif !important;
    --var-header-brand-width: 250px;
    --var-header-brand-margin-top: 20px;
    --var-header-brand-margin-left: 60px;
    --var-header-font-size: 52px;
    --var-header-font-weight: 600;
    --var-header-font-shadow-color: rgba(0, 0, 0, 0.5);
    --var-header-image: url("../images/themes/dark_green/header_seamless.png");
    --var-header-text-color: #ffffff;
    --var-header-text-width: 400px;
    --var-header-authentication-height: 200px;
    --var-header-page-height: 200px;
    --var-info-text-color: #ffffff;
    --var-theme-icon-color: #ffffff;
    --var-custom-button-font-faimly: "Montserrat", sans-serif !important;
    --var-custom-button-body-border: 2px solid rgb(255, 255, 255);
    --var-custom-button-body-content-text-color: #ffffff;
    --var-custom-button-footer-text-color: #00aeef;
    --var-custom-button-footer-arrow-color: #8dc63f;
    --var-custom-button-size-small: 250px;
    --var-custom-button-size-medium: 300px;
    --var-custom-button-size-large: 350px;
    --var-current-button-size: var(--var-custom-button-size-small);
    --var-current-button-spinner-size: calc(var(--var-current-button-size) - 150px);
    --var-custom-button-body-spinner-color: #ffffff;
    --var-custom-button-body-content-text-shadow-color: #000000;
    --var-custom-button-header-size: 80px;
    --var-custom-button-image-bloom-logo: url("../images/buttons/bloom_effect.png");
    --var-custom-button-image-bloom-width: 281px;
    --var-custom-button-image-bloom-height: 281px;
    --var-custom-button-image-bloom-x-offset: 0px;
    --var-custom-button-image-bloom-y-offset: 0px;

    --var-custom-button-image-xbaw-logo: url("../images/buttons/xbaw_small.png");
    --var-custom-button-image-xbaw-width: 176px;
    --var-custom-button-image-xbaw-height: 36px;
    --var-custom-button-image-xbaw-x-offset: 0px;
    --var-custom-button-image-xbaw-y-offset: 0px;

    --var-custom-button-image-download-logo: url("../images/buttons/download_logo.png");
    --var-custom-button-image-download-width: 116px;
    --var-custom-button-image-download-height: 100px;
    --var-custom-button-image-download-x-offset: 0px;
    --var-custom-button-image-download-y-offset: 0px;

    --var-custom-button-image-login-logo: url("../images/buttons/login_logo.png");
    --var-custom-button-image-login-width: 107px;
    --var-custom-button-image-login-height: 96px;
    --var-custom-button-image-login-x-offset: 0px;
    --var-custom-button-image-login-y-offset: 0px;


    --var-footer-image: url("../images/themes/dark_green/footer_seamless.png");
    --var-custom-button-overmouse-image: url("../images/themes/light_green/overmouse_1.png");
    --var-nav-item-font-size: 30px;
    --var-nav-item-hover-color: #79ed81;
}

@media screen and (min-width: 800px) {
    :root {
        --var-current-button-size: var(--var-custom-button-size-medium);
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --var-current-button-size: var(--var-custom-button-size-large);
    }
}

[data-bs-theme="dark"] {
    --var-header-image: url("../images/themes/dark_green/header_seamless.png");
    --var-header-text-color: #ffffff;
    --var-theme-icon-color: #ffffff;
    --var-custom-button-body-border: 2px solid rgb(255, 255, 255);
    --var-custom-button-body-content-text-color: #ffffff;
    --var-custom-button-body-spinner-color: #ffffff;
    --var-info-text-color: #ffffff;
    --bs-body-bg: #000109;
    --var-footer-image: url("../images/themes/dark_green/footer_seamless.png");
    --var-custom-button-body-content-text-shadow-color: #000000;
    --var-nav-item-hover-color: #79ed81;
}

[data-bs-theme="light"] {
    --var-header-image: url("../images/themes/light_green/header_seamless.png");
    --var-theme-icon-color: #000000;
    --var-custom-button-body-border: 2px solid rgb(0, 0, 0);
    --var-custom-button-body-content-text-color: #000000;
    --var-custom-button-body-spinner-color: #000000;
    --var-info-text-color: #000000;
    --var-footer-image: url("../images/themes/light_green/footer_seamless.png");
    --var-custom-button-body-content-text-shadow-color: #FFFFFF;
    --var-nav-item-hover-color: #021d4e;
    --var-header-font-shadow-color: rgba(255, 255, 255, 0.5);
    --var-header-text-color: #000000;
    --bs-dark-rgb: 228, 229, 241;
    --bs-secondary-rgb: 250, 250, 250;
    --akts-green: var(--akts-black);
}

/*[data-bs-theme="light"] {*/
/*    --var-header-image: url("../images/themes/light_green/header_seamless.png");*/
/*    --var-theme-icon-color: #000000;*/
/*    --var-custom-button-body-border: 2px solid rgb(0, 0, 0);*/
/*    --var-custom-button-body-content-text-color: #000000;*/
/*    --var-custom-button-body-spinner-color: #000000;*/
/*    --var-info-text-color: #000000;*/
/*    --var-footer-image: url("../images/themes/light_green/footer_seamless.png");*/
/*    --var-custom-button-body-content-text-shadow-color: #FFFFFF;*/
/*    --var-nav-item-hover-color: #021d4e;*/
/*    --var-header-font-shadow-color: rgba(255, 255, 255, 0.5);*/
/*    --var-header-text-color: #000000;*/
/*    --bs-dark-rgb: 228, 229, 241;*/
/*    --bs-secondary-rgb: 250, 250, 250;*/
/*    --akts-green: var(--akts-black);*/
/*}*/


.custom-row-gy {
    --bs-gutter-y: 7rem;
}

.col-center {
    margin: 0 auto;
}


.nav-item-text {
    font-family: var(--var-font-faimly);
    font-size: var(--var-nav-item-font-size);
    font-weight: var(--var-header-font-weight);
    padding: 0;
    margin: 0;
    line-height: 1;
    color: var(--var-header-text-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.nav-item-text:hover {
    color: var(--var-nav-item-hover-color);
}

.header-brand {
    width: var(--var-header-brand-width);
    margin-top: var(--var-header-brand-margin-top);
    margin-left: var(--var-header-brand-margin-left);
}

.footer-image {
    background-image: var(--var-footer-image);
    background-position: center center;
    background-repeat: repeat-x;
    background-size: 2048px 100%;
    animation: header-scroll-sideways-rev 60s linear infinite;
}

.header-text-width {
    width: var(--var-header-text-width);
}

.header-text {
    font-family: var(--var-font-faimly);
    font-size: var(--var-header-font-size);
    font-weight: var(--var-header-font-weight);
    padding: 0;
    margin: 0;
    line-height: 1;
    color: var(--var-header-text-color);
    text-shadow: 2px 2px 4px var(--var-header-font-shadow-color);
}

@keyframes header-scroll-sideways-rev {
    from {
        background-position: 0;
    }
    to {
        background-position: -2048px;
    }
}


@keyframes header-scroll-sideways {
    from {
        background-position: 0;
    }
    to {
        background-position: 2048px;
    }
}

.header-image {
    background-image: var(--var-header-image);
    background-position: center bottom;
    background-repeat: repeat-x;
    background-size: 2048px 100%;
    /*transition: transform 0.3s ease;*/
    animation: header-scroll-sideways 60s linear infinite;
}


.header-authentication-size {
    min-height: var(--var-header-authentication-height);
}

.header-page-size {
    min-height: var(--var-header-page-height);
}

.info-container {
    margin-top: -10px;
}

.info-text {
    font-family: var(--var-custom-button-font-faimly);
    font-size: 20px;
    font-style: italic;
    color: var(--var-info-text-color);
    font-weight: 600;
    line-height: 1;
}

.theme-icon-color {
    color: var(--var-theme-icon-color);
    fill: var(--var-theme-icon-color);
}


.custom-button-size {
    width: var(--var-current-button-size);
    height: var(--var-current-button-size);
}


.custom-button-body-spinner {
    width: var(--var-current-button-spinner-size);
    height: var(--var-current-button-spinner-size);
    color: var(--var-custom-button-body-spinner-color);
}


.custom-button-wrapper {
    width: calc(var(--var-current-button-size));
    height: calc(var(--var-current-button-size));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.custom-button-body {
    width: 100%;
    height: 100%;
    z-index: 100;
    border-radius: 40px;
    border: var(--var-custom-button-body-border);
    overflow: hidden;
}

.custom-button-header-bg {
    z-index: 150;
    position: absolute;
}


.a-custom-button-size {
    width: var(--var-current-button-size);
    height: var(--var-current-button-size);
    z-index: 400;
    position: absolute;
}

.custom-button-header-bloom {
    z-index: 150;
    position: absolute;
}

.custom-button-header {
    z-index: 200;
    position: absolute;
}

.custom-button-footer {
    z-index: 200;
    position: absolute;
}

.custom-button-footer-text {
    font-family: var(--var-custom-button-font-faimly);
    font-size: 20px;
    font-weight: 600;
    /*padding: 0;*/
    /*margin: 0;*/
    line-height: 1;
    color: var(--var-custom-button-footer-text-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    bottom: 30px;
    right: 60px;
}

.custom-button-footer-arrow {
    color: var(--var-custom-button-footer-arrow-color);
    font-size: 30px;
    bottom: 18px;
    right: 20px;
}


.custom-button-header-image-bloom {
    background-image: var(--var-custom-button-image-bloom-logo);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: var(--var-custom-button-image-bloom-width) var(--var-custom-button-image-bloom-height);
    width: var(--var-custom-button-image-bloom-width);
    height: var(--var-custom-button-image-bloom-height);
    /*background-color: red;*/
    top: calc(-1 * var(--var-custom-button-image-bloom-height) / 2 + var(--var-custom-button-image-bloom-y-offset));
    left: calc(50% - calc(var(--var-custom-button-image-bloom-width) / 2) + var(--var-custom-button-image-bloom-x-offset));
}

.custom-button-header-image-xbaw {
    background-image: var(--var-custom-button-image-xbaw-logo);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: var(--var-custom-button-image-xbaw-width) var(--var-custom-button-image-xbaw-height);
    width: var(--var-custom-button-image-xbaw-width);
    height: var(--var-custom-button-image-xbaw-height);
    /*background-color: red;*/
    top: calc(-1 * var(--var-custom-button-image-xbaw-height) / 2 + var(--var-custom-button-image-xbaw-y-offset));
    left: calc(50% - calc(var(--var-custom-button-image-xbaw-width) / 2) + var(--var-custom-button-image-xbaw-x-offset));
}

.custom-button-header-bg-image-xbaw {
    background-color: var(--bs-body-bg);
    width: calc(var(--var-custom-button-image-xbaw-width) + 10px);
    height: var(--var-custom-button-image-xbaw-height);
    left: calc(50% - calc(var(--var-custom-button-image-xbaw-width) / 2 + 5px));
    top: calc(-1 * var(--var-custom-button-image-xbaw-height) / 2);
}

.custom-button-header-image-download {
    background-image: var(--var-custom-button-image-download-logo);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: var(--var-custom-button-image-download-width) var(--var-custom-button-image-download-height);
    width: var(--var-custom-button-image-download-width);
    height: var(--var-custom-button-image-download-height);
    /*background-color: red;*/
    top: calc(-1 * var(--var-custom-button-image-download-height) / 2 + var(--var-custom-button-image-download-y-offset));
    left: calc(50% - calc(var(--var-custom-button-image-download-width) / 2) + var(--var-custom-button-image-download-x-offset));
}

.custom-button-header-bg-image-download {
    background-color: var(--bs-body-bg);
    width: calc(var(--var-custom-button-image-download-width) + 10px);
    height: var(--var-custom-button-image-download-height);
    left: calc(50% - calc(var(--var-custom-button-image-download-width) / 2 + 5px));
    top: calc(-1 * var(--var-custom-button-image-download-height) / 2);
}


.custom-button-header-image-login {
    background-image: var(--var-custom-button-image-login-logo);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: var(--var-custom-button-image-login-width) var(--var-custom-button-image-login-height);
    width: var(--var-custom-button-image-login-width);
    height: var(--var-custom-button-image-login-height);
    /*background-color: red;*/
    top: calc(-1 * var(--var-custom-button-image-login-height) / 2 + var(--var-custom-button-image-login-y-offset));
    left: calc(50% - calc(var(--var-custom-button-image-login-width) / 2) + var(--var-custom-button-image-login-x-offset));
}

.custom-button-header-bg-image-login {
    background-color: var(--bs-body-bg);
    width: calc(var(--var-custom-button-image-login-width) + 10px);
    height: var(--var-custom-button-image-login-height);
    left: calc(50% - calc(var(--var-custom-button-image-login-width) / 2 + 5px));
    top: calc(-1 * var(--var-custom-button-image-login-height) / 2);
}


.custom-button-body-background {
    width: 200%;
    height: calc(100% + var(--var-custom-button-header-size) / 2);
    margin-top: calc(-1 * var(--var-custom-button-header-size) / 2);
    margin-left: -50%;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

@keyframes scrollSideways {
    0% {
        background-position: 0;
        transform: rotate(0deg);
    }
    20% {
        background-position: calc(1024px * 2);
        transform: rotate(25deg);
    }
    40% {
        background-position: calc(1024px * 3);
        transform: rotate(0deg);
    }
    60% {
        background-position: calc(1024px * 4);
        transform: rotate(0deg);
    }
    80% {
        background-position: calc(1024px * 5);
        transform: rotate(-25deg);
    }
    100% {
        background-position: calc(1024px * 6);
        transform: rotate(0deg);
    }
}


.custom-button-wrapper a:hover ~ .custom-button-size .custom-button-body-background {
    background-image: var(--var-custom-button-overmouse-image);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: 1024px 200px;
    transition: transform 0.3s ease;
    animation: scrollSideways 10s linear infinite;
}

a:hover ~ .custom-button-body-content-text {
    text-shadow: 2px 2px 4px var(--var-custom-button-body-content-text-shadow-color);
}

.custom-button-body-content {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    margin-top: -20px;
    /*background-color: #a0b03f;*/
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
}

.custom-button-body-content-text {
    font-family: var(--var-custom-button-font-faimly);
    font-size: 30px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    line-height: 1.5;
    color: var(--var-custom-button-body-content-text-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


.a-no-decoration {
    text-decoration: none;
}