* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --start-load-color: rgba(70, 70, 70, 1);
    --start-load-bg: rgba(4, 4, 4, 1);
    --start-load-bg-lite: rgba(18, 18, 18, 1);    

    --module-btn: max(6vh, 26px);
    --color-transparent: transparent;
    --color-bg: rgba(4, 4, 4, 1);
    --color-accent: rgba(22, 30, 221, 1); /* rgba(255, 174, 0, 1); */
    --color-green: rgba(86, 252, 10, 1);
    --color-sell: rgb(134, 38, 190);

    --header-experience-text: rgba(255, 255, 255, 1);

    --header-btn-base-text: rgba(70, 70, 70, 1);
    --header-btn-base-bg: rgba(18, 18, 18, 1);
    --header-btn-base-text-hv: rgba(255, 255, 255, 1);
    --header-btn-base-bg-hv: rgba(41, 41, 41, 1);

    --header-btn-active-text: rgba(255, 255, 255, 1);
    --header-btn-active-bg: rgba(70, 70, 70, 1);
    --header-btn-active-text-hv: rgba(255, 255, 255, 1);
    --header-btn-active-bg-hv: rgba(97, 97, 97, 1);

    --header-btn-current-text: rgba(255, 255, 255, 1);
    --header-btn-current-bg: var(--color-accent);
    --header-btn-current-text-hv: rgba(255, 255, 255, 1);
    --header-btn-current-bg-hv: radial-gradient(#00c7ff, var(--color-accent));

    --menu-popup-bg-back: rgba(4, 4, 4, 0.7);
    --menu-popup-bg: rgba(18, 18, 18, 1);  
    --menu-popup-btn-base-text: rgba(255, 255, 255, 1);
    --menu-popup-btn-base-bg: rgba(70, 70, 70, 1);
    --menu-popup-btn-active-text: rgba(255, 255, 255, 1);

    --game-popup-btn-revard-text: rgba(41, 41, 41, 1);
    --game-popup-btn-revard-bg: rgba(41, 41, 41, 1);
    --game-popup-btn-revard-text-hv: rgba(255, 255, 255, 1);
    --game-popup-btn-revard-bg-hv: rgba(70, 70, 70, 1);

    --game-popup-btn-revard-x2-text-hv: rgba(255, 255, 255, 1);

    --viewer-popup-btn-text: rgba(255, 255, 255, 1);

    --menu-body-label-bg: rgba(4, 4, 4, 1);
    --menu-body-label-bg-blocked: rgba(70, 70, 70, 1);

    --menu-body-btn-text-blocked: rgba(255, 255, 255, 1);
    --menu-body-btn-bg-blocked: rgba(41, 41, 41, 1);
    --menu-body-btn-border-blocked: rgba(41, 41, 41, 1);
    --menu-body-btn-text-blocked-vh: rgba(255, 255, 255, 1);
    --menu-body-btn-bg-blocked-vh: rgba(70, 70, 70, 1);

    --menu-body-btn-text-watch: rgba(255, 255, 255, 1);
    --menu-body-btn-text-sell: rgba(255, 255, 255, 1);

    --menu-body-text: rgba(255, 255, 255, 1);
    --menu-body-text-img-time: rgba(70, 70, 70, 1);
    --menu-body-text-img-name: rgba(215, 215, 215, 1);
    --menu-body-text-img-artist: rgba(70, 70, 70, 1);

    --game-header-track-back: rgba(18, 18, 18, 1);
    --game-header-track-front: var(--color-accent);

    --game-body-colors-block-text: rgba(255, 255, 255, 1);
    --game-body-colors-block-bg: rgba(18, 18, 18, 1);
    --game-body-track-back: rgb(34, 34, 34, 1);
    --game-body-separater-line: rgba(41, 41, 41, 1);
    --game-body-colors-block-border: rgba(41, 41, 41, 1);

    --viewer-header-btn-base-text: rgba(255, 255, 255, 1);
    --viewer-header-btn-base-bg: rgba(18, 18, 18, 1);
    --viewer-header-btn-active-text: rgba(41, 41, 41, 1);
    --viewer-header-btn-active-bg: rgba(232, 232, 237, 1);
    --viewer-header-btn-active-text-hv: rgba(255, 255, 255, 1);
    --viewer-header-btn-active-bg-hv: rgba(41, 41, 41, 1);

    --viewer-popup-text: rgba(41, 41, 41, 1);
    --menu-scrollbar-thumb-border: rgb(34, 34, 34, 1);
    --menu-scrollbar-border: rgba(4, 4, 4, 1);
    --url-image-overlay: var(--url-black-mode);  
    
}

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    font-family: "Montserrat", sans-serif;
    /* background-color: var(--color-bg); */    
    overflow: hidden;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.start-load-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--start-load-color);
    background-color: var(--start-load-bg);
    opacity: 1;
    z-index: 9999;
}

.start-load-value {
    font-size: max(2.5vmin, 20px);
    font-weight: 600;
    margin-bottom: max(1.5vmin, 12px);
}

.load-container {
    position: relative;
    width: 25vw;
    height: max(2vmin, 12px);
    border-radius: 3vmin;
    overflow: hidden
}

.load-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--start-load-bg-lite);
    border-radius: 3vmin;
}

.load-track-front {
    background-color: var(--color-accent);
    border: 3px solid var(--start-load-bg-lite);
}

.load-container-hidden {
    visibility: hidden;
    transition: 250ms 500ms ease-out;
}

#section-settings, #section-menu, #section-game, #section-viewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
    color: var(--menu-body-text);    
}

.container {
    padding: 1.5vh 1.5vh;
}

.menu-header, .game-header, .viewer-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.settings-header .btn-block, .menu-header .btn-block, .game-header .btn-block, .viewer-header .btn-block {
    display: flex;
}

.hidden {
    visibility: hidden;
}

/* /////////////////////// Menu /////////////////////// */

.settings-header, .menu-header {
    font-size: clamp(12px, 2vh, 16px);
    align-items: start;
} 

.settings-header .btn-container, .menu-header .btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--module-btn);
    padding: 0vmin 2.5vmin;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 1vmin;
    transition: 200ms ease;    
}

.settings-header .btn-container:hover, .menu-header .btn-container:hover {
    color: rgb(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.15);
    transition: 200ms ease;
}

.menu-header .btn-container a {
    text-decoration: none;
}

.menu-header .categories-block {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    /* padding-bottom: 1vmin; */
    overflow-x: auto;
}

.categories-container {
    display: flex;
    align-items: center;
    max-width: 100%;    
}

.menu-header .categories-block > div {
    color: rgba(220, 220, 220, 1);
}

.menu-header .categories-block .active {
    color: rgb(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.35);
}

.menu-header .categories-block .active:hover {
    background-color: rgba(255, 255, 255, 0.45);
    transition: 200ms ease;
}

.menu-header .categories-block .current {
    color: rgb(255, 255, 255, 1);
    background: var(--header-btn-current-bg-hv) !important;
}

.menu-header .categories-block .btn-container {
    margin: 0 1vmin;
}

.language-block > div, .experience-block .btn-container {
    width: max(5.5vw, 64px);
    font-weight: 600;
    text-align: center;
    padding: 1vmin 0;
    color: var(--header-experience-text) !important;
    background-color: var(--color-transparent);    
}

.experience-block > .btn-container div:hover {
    cursor: auto;
    background-color: var(--color-transparent);
}

.experience-block > div:first-child {
    margin-right: max(1vmin, 10px);
}

.language-block .btn-language-ru {
    background-image: url("./images/flag_ru_for_menu.svg");
}

.language-block .btn-language-en {
    background-image: url("./images/flag_en_for_menu.svg");
}

.language-block > div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: 400ms ease;
}

.language-block > div {
    overflow: hidden;
}

.settings-header .btn-container:hover {
    color: var(--color-transparent);
    transform: scale(0.9);
    transition: 400ms ease;
}

.settings-header .btn-container {
    width: var(--module-btn);
    padding: 0;
    color: var(--color-transparent);
}

.language-block > div:first-child {
    margin-right: max(1vmin, 10px);
}

.experience-block {
    margin-right: 2vw;
}

.experience-block .btn-container:hover {
    cursor: auto;
}

.btn-experience-container:last-child {
    display: flex;
    width: calc(max(5.5vw, 64px) + max(6vh, 26px));
    /* border: 1px solid rgba(255, 255, 255, 0.35); */
    border-radius: 1vmin;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 100%);
    backdrop-filter: blur(50px);
    /* border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1225) 100%) 1;
    border-width: 1px;
    border-style: solid; */
    overflow: hidden;
}

.btn-experience-container:last-child > div:last-child {
    margin: auto;
}

.btn-experience-container:last-child > div:last-child > div {
    display: flex;
    transform: scale(1);
    transition: 250ms ease-in-out;
}

.btn-experience-container:last-child > div:last-child svg {
    width: 100%;
    height: 100%;
}

.btn-experience-container:last-child > div:last-child > div:hover {
    cursor: pointer;
    transform: scale(0.9);
    transition: 250ms ease-in-out;
}

.experience-block > div:first-child .btn-container {
    /* color: var(--color-white); */
    background: radial-gradient(#ff0000, rgb(99 26 26));
    /* background: radial-gradient(#ffb9f7, var(--color-sell)); */
    /* background-color: var(--color-transparent); */
    /* border-right: 2px solid var(--color-sell);
    border-bottom: 2px solid var(--color-sell); */
}

.experience-block > div:last-child .btn-container {
    /* color: var(--color-white); */
    /* background: radial-gradient(#00c7ff, var(--color-accent)); */
    background: radial-gradient(#ffb9f7, var(--color-sell));
    /* border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent); */
}

.settings-block {
    display: flex;
    justify-content: flex-end;
    width: calc(max(5.5vw, 64px) + max(6vh, 26px) + max(5.5vw, 64px) + max(1vmin, 10px));
    height: 100%;
    margin-left: 2vw;
}



.settings-block .btn-container {
    width: var(--module-btn);
    padding: 0;
    background-color: var(--color-transparent);
    overflow: hidden;
}

.settings-block .btn-container:hover {
    background-color: var(--color-transparent);    
}

.settings-block .btn-container > div {
    display: flex;
    padding: 0;
}

.settings-block .btn-container svg {
    width: 100%;
    height: 100%;
}

.settings-block .btn-container svg rect {
    fill: rgba(255, 255, 255, 0.35);
    filter: blur(40px);
    transition: 200ms ease;
}

.settings-block .btn-container:hover svg rect {
    fill: var(--viewer-header-btn-active-bg-hv);
    transition: 200ms ease;
}

.popup {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
    transition: 200ms ease-in-out;
}

.popup-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: max(50vmin, 320px);
    height: max(50vmin, 320px);
    padding: 2vmin 3vmin;
    border-radius: 2vmin;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
}

.popup-container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: clamp(20px, 2.5vh, 28px);
    height: 100%;
    overflow: hidden;
}

.popup-container .content > div:not(:first-child) {
    line-height: 190%;
}

.popup-container .content > div {
    text-align: center;
}

#section-menu .popup-container .content > div:last-child {
    font-size: clamp(36px, 5vh, 46px);
    font-weight: 600;
    margin: 8% 00;
}

.popup-container .btn-block {
    margin-top: max(1vmin, 8px);
    font-size: clamp(12px, 2vh, 16px);
}

.popup-container .btn-container, .settings-body .btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5vmin;
    border-radius: 1vmin;    
}

.popup-container .btn-cost {
    color: rgb(255, 255, 255, 0.35);
    border: 1px solid rgb(255, 255, 255, 0.35);
    transition: 200ms ease-in-out;
}

.popup-container .btn-cost svg {
    opacity: 0.5;
    transition: 200ms ease-in-out;
}

.popup-container .btn-reward {
    color: rgb(255, 255, 255, 1);
    background: linear-gradient(173.1deg, #e41bff 1.64%, #690061 97.65%);
    /* background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%); */
    border: 1px solid rgb(255, 255, 255, 0.35);
    transition: 200ms ease-in-out;
}

.popup-container .btn-cost-active {
    color: rgb(255, 255, 255, 1);
    /* border: 1px solid var(--color-accent); */    
    /* background-color: var(--color-transparent); */
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #690061 97.65%); */
    background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%);
    border: 1px solid rgb(255, 255, 255, 0.35);
    transition: 200ms ease-in-out;
}

.popup-container .btn-cost-active > div:last-child, .popup-container .btn-reward > div:last-child, .popup-container .btn-reward-x2 > div:last-child {
    height: clamp(12px, 2vh, 16px);
}

.popup-container .btn-cost-active svg {
    height: 100%;
    opacity: 1;
}

.popup-container .btn-cost-active:hover {
    /* color: var(--menu-popup-btn-active-text); */
    /* border: 1px solid var(--color-accent);
    background-color: var(--color-accent); */
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #31023a 97.65%); */
    /* background: linear-gradient(173.1deg, #ffd900 1.64%, #FF8205 97.65%); */
    /* border: 1px solid rgb(255, 255, 255, 0.35); */
    transform: scale(0.9);
    transition: 200ms ease-in-out;
}

.popup-container .btn-container:hover {
    cursor: pointer;
}

.btn-close, .btn-continue, .btn-rules {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.15);    
    border: 1px solid rgb(255, 255, 255, 0.35);
    /* backdrop-filter: blur(25px); */
    transition: 200ms ease-in-out;
}

.btn-close:hover, .btn-continue:hover, .btn-rules:hover {
    background-color: rgb(255, 255, 255, 0.35);   
    transform: scale(0.9);
    transition: 200ms ease-in-out;
}

.popup-container .game-popup-reward-cost {
    display: flex;
    margin: 8% 0;
}

.popup-container .game-popup-reward-cost > div:last-child {    
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: max(0.3vmin, 3px);
}

.popup-container .game-popup-reward-cost svg {
    width: 110%;
    height: 110%;    
}

.popup-container .btn-reward:hover {
    /* color: rgb(255, 255, 255, 1); */
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #690061 97.65%); */
    /* background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%); */
    /* border: 1px solid rgb(255, 255, 255, 0.35); */
    transform: scale(0.9);
    transition: 200ms ease-in-out;
}

.popup-container .btn-reward-x2 {
    /* color: var(--game-popup-btn-revard-x2-text-hv);
    border: 1px solid var(--color-accent);
    background-color: var(--color-accent); */
    color: rgb(255, 255, 255, 1);
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #690061 97.65%); */
    background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%);
    border: 1px solid rgb(255, 255, 255, 0.35);
    transition: 200ms ease-in-out;
}

.popup-container .btn-reward-x2 > div:first-child, .popup-container .btn-cost > div:last-child {
    height: clamp(12px, 2vh, 16px);
}

.experience-block .btn-container > div:last-child {
    position: relative;    
    width: 22px;
    height: clamp(12px, 2vh, 16px);
    margin-left: 0.3vmin;
    padding: max(0.2vmin, 2px);
    display: flex;
    align-items: center;
}

.popup-container .btn-reward svg, .popup-container .btn-reward-x2 svg, .popup-container .btn-cost svg {
    width: 100%;
    height: 100%;
    margin-left: max(0.3vmin, 3px);   
}

.popup-container .btn-reward-x2 > div:first-child {
    margin-right: max(1vmin, 10px);
}

/* .popup-container .btn-cost svg, .popup-container .btn-reward svg {
    opacity: 0.5;
} */

/* .popup-container .btn-reward:hover svg {
    opacity: 1;
} */

.popup-container .btn-reward-x2:hover {
    transform: scale(0.9);
    transition: 200ms ease-in-out;
}

.popup-container .btn-start {
    color: rgb(255, 255, 255, 1);
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #690061 97.65%); */
    background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%);
    border: 1px solid rgb(255, 255, 255, 0.35);
    transition: 200ms ease-in-out;
}

.popup-container .btn-start:hover {
    transform: scale(0.9);
    transition: 200ms ease-in-out;
}

.popup-container .game-popup-rate-image {
    width: 100%;
}

.popup-container .game-popup-rate-text {
    margin: max(2vmin, 8px) 0 max(1.5vmin, 6px) 0;
    color: var(--menu-popup-rate-image-text);
}

.popup-container .game-popup-rate-value {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9vmin;
    font-size: clamp(36px, 5vh, 46px);
    font-weight: 700;
    text-align: center;
    background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.popup-container .rate-container {
    position: relative; 
    display: flex;
    justify-content: center; 
    width: 100%;    
    height: 3.8vmin;
    margin-top: max(3vmin, 12px);
}

.popup-container .rate-numbers-container {
    display: flex;
    width: calc(11 * 3.8vmin);
    height: 3.8vmin;    
}

.popup-container .rate-numbers-container > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 50%;
    height: 100%;
    font-size: clamp(10px, 2vh, 16px);
    color: var(--menu-popup-rate-image-text);
    
    border-radius: 1vmin;
    border: 1px solid var(--color-transparent);
}

.popup-container .rate-numbers-container > div:hover {
    cursor: pointer;
    text-align: center;
    background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* .popup-container .rate-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
} */

.popup-container .check-rate {
    /* color: var(--menu-body-text) !important; */
    /* color: var(--game-popup-btn-revard-bg-hv) !important; */

    /* font-weight: 600;
    font-size: clamp(32px, 7vmin, 48px); */
    /* font-size: 6vmin; */

}

.popup-container .btn-rate {
    color: rgb(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);  
}

.popup-container .btn-rate.active {
    color: rgb(255, 255, 255, 1);
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #690061 97.65%); */
    background: linear-gradient(173.1deg, #FFEB3B 1.64%, #FF5722 97.65%);
    border: 1px solid rgb(255, 255, 255, 0.35);
    transition: 200ms ease-in-out;   
}

.popup-container .btn-rate.active:hover {
    transform: scale(0.9);
    transition: 200ms ease-in-out;
}

/* /////////////////////// Menu-images /////////////////////// */

.menu-body .image-block {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* scroll-behavior: smooth; */
}

.menu-body .image-item-container {
    display: flex;
    flex-direction: column;
    font-size: clamp(8px, 2vmin, 20px);
    padding: 5px;
    color: rgb(220, 220, 220, 1);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
    /* Note: backdrop-filter has minimal browser support */
    border-radius: 1.5vmin;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(15vw, 165px), 1fr));
    grid-auto-rows: min-content;
    column-gap: clamp(10px, 1vw, 20px);
    row-gap: clamp(30px, 7vmin, 70px);
  }

.menu-body .image-container {
    position: relative;
    width: 100%;
    /* height: 12vw; */
    margin-bottom: max(1.5vmin, 10px);
    border-radius: 1.5vmin;
    /* border: 1px solid var(--game-body-track-back); */
    overflow: hidden;
}

.menu-body .image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: 300ms ease;
}

.image-container-svg {
    display: flex;
    width: 100%;
    height: 100%;
}

.image-container-svg svg {
    width: 100%;
    height: 100%;
}

.menu-body .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-image: var(--url-image-overlay); */
    /* background-repeat: no-repeat;
    background-size: cover;
    background-position: center; */
    visibility: hidden;
    transition: 400ms ease;
}

.menu-body .image:hover, .menu-body .overlay:hover {
    cursor: pointer;
    /* transform: scale(1.1);
    transition: 400ms ease; */
}

.label-svg-blocked > path:nth-child(2n) {
    fill:rgba(255, 255, 255, 0.35);
}

.label-svg-active > path:nth-child(4n - 2) {
    /* fill:rgba(63, 81, 181, 1); */
    fill: rgb(156 39 176);
}

.label-svg-complated > path:nth-child(4n-2) {
    fill: rgba(233, 30, 99, 1);
    
}

.label-svg-sold > path:nth-child(4n-2) {
    fill:rgba(134, 38, 190, 1);
}

.menu-body .time-image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5vmin 0;
    font-weight: 400;
    color: rgb(220, 220, 220, 1);
}

.menu-body [data-status="active"] .time-image-container {
    visibility: hidden;
}

.menu-body .progress-image-value-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.5vmin 0;
}

.menu-body .progress-track-container {
    position: relative;
    width: 100%;
    height: max(0.5vmin, 6px);
    margin: max(0.5vmin, 6px) 0 calc(1vmin + clamp(8px, 2vmin, 20px) - max(0.5vmin, 6px)) 0;
}

.menu-body .progress-track-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4vmin;
}

.menu-body .progress-track-front {
    width: 0;
    border: none;
}

span {
    font-weight: 600;
}

.menu-body .btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5vmin 0.5vmin;
    color: var(--menu-body-btn-text-blocked);
    /* background-color: #3F51B5; */
    background-color: rgb(156 39 176);
    border-radius: 1vmin;
    transition: 200ms ease;
}

.menu-body .btn-container svg {
    opacity: 1;
}

.menu-body [data-status="complated"] .btn-container svg {
    opacity: 1;
}

.menu-body .btn-container:hover {
    cursor: pointer;
}

.menu-body .btn-container:hover svg {
    opacity: 1;
}

.menu-body .btn-container > div:nth-child(2n) {
    height: clamp(8px, 2vmin, 20px);
    margin-left: max(0.5vmin, 5px);
}

.menu-body .btn-container > div:nth-child(2n) svg {
    height: 100%;
    width: 100%;
}

.menu-body .btn-container:last-child {
    margin: max(0.5vmin, 6px) 0 0 0;
    transition: 200ms ease;
}

.menu-body [data-status="complated"] .btn-container:first-child {
    color: var(--menu-body-btn-text-watch);
    border-color: var(--color-transparent);
    background-color: rgba(233, 30, 99, 1);
}

.menu-body [data-status="complated"] .btn-container:last-child {
    background-color: var(--color-sell);
}

.menu-body .btn-container:hover {
    transform: scale(0.9);
    border-color: var(--color-transparent);
    transition: 200ms ease;
}

.menu-body [data-status="blocked"] .btn-container:last-child:hover {
    color: var(--menu-body-btn-text-blocked-vh);
    transition: 200ms ease;
}

.menu-body [data-status="complated"] .btn-container:first-child:hover {
    color: var(--menu-body-btn-text-watch);
    background-color: rgba(233, 30, 99, 1);
    border-color: var(--color-transparent);
    transition: 200ms ease;
}

.menu-body [data-status="complated"] .btn-container:last-child:hover {
    transition: 200ms ease;
}

.text-image-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 0 auto 0;
    text-align: center;
}

.text-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5vmin 0;
    white-space: nowrap;
    color: rgb(220, 220, 220, 1);
    overflow: hidden;
}

.text-image-container:first-child > div {
    font-weight: 500;
    animation: Movestring 10s linear infinite;
}

.text-image-container:last-child {
    margin: max(0.5vmin, 6px) 0 auto 0;
    font-weight: 400;
}

@keyframes Movestring {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* /////////////////////// Game-level /////////////////////// */

.game-header .btn-container, .viewer-header .btn-container {
    border-radius: 1.5vmin;
    border: 1px solid rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

.game-header .btn-container > div, .viewer-header .btn-container > div {
    position: relative;
    display: flex;
    width: var(--module-btn);
    height: var(--module-btn);
}

.game-header .btn-block:first-child > .btn-container:not(:last-child) {
    margin-right: 1vw;
}

.game-header .btn-block:last-child > .btn-container:not(:first-child) {
    margin-left: 1vw;
}

.settings-header .btn-container svg, .game-header .btn-container svg, .viewer-header .btn-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn input {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(270deg);
    width: 100%;
    height: 100%;
    opacity: 0;
}

.btn input:hover {
    cursor: pointer;
}

.progress-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    height: 80%;
    margin: 0 4%;
}

.progress-container {
    position: relative;
    width: 100%;
    height: max(1.5vh, 10px);
}

.progress-value {
    text-align: center;
    font-size: clamp(8px, 2vh, 20px);
}

.progress-track-container {
    border-radius: 4vmin;
    overflow: hidden;
}

.progress-track-level {
    height: 100%;
    border-radius: 4vmin;    
}

.progress-track-back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.35);
    /* backdrop-filter: blur(50px); */    
}

.progress-track-front {
    width: 0%;
    height: 100%;
    background-color: rgb(156 39 176); /* rgba(255, 174, 0, 1); */
}

.game-header .progress-track-front, .viewer-header .progress-track-front, .load-track-front {
  /* content: '';   */
  width: 0%;
  /* height: 4.8px; */
  /* background-color: #FFF; */
  font-size: 40px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1em 1em;
  /* position: absolute;
  top: 0;
  left: 0; */
  box-sizing: border-box;
  animation:  barStripe 1s linear infinite;
}

@keyframes barStripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1em 0;
  }
}

.load-track-front {
    width: 10%;
} 

/* /////////////////// game-body /////////////////// */

.menu-body, .game-body, .viewer-body {
    display: flex;
    width: 100%;
    height: calc(100vh - (var(--module-btn) + 5.5vh));
    margin: auto 0 0 0;
}

.canvas-block {
    display: block;
    width: 100%;
    height: 100%;
    margin-right: max(0.5%, 5px);
    overflow: hidden;
}

.canvas-image-container, .canvas-viewer-container, .canvas-settings-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#canvas-image, #canvas-ui, #canvas-viewer, #canvas-underlay, #canvas-render, #canvas-settings {
    position: absolute;
    top: 0;
    left: 0;
}

.colors-block {
    display: flex;
    flex-direction: column;
    min-width: clamp(90px, 16vw, min(16vw, 145px));
    height: 100%;
    font-weight: 500;
}

.colors-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.active-color-block {
    display: block;
    padding: 1.5vmin;
    margin-bottom: 2vh;
    font-size: max(1.5vmin, 8px);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
    border-radius: 2vmin;
}

.active-color-container {
    height: 100%;
}

.active-color-container .color-active-item-container {
    display: flex;
    height: 100%;
}

.active-color-block .color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 0 0 8%;
    width: 100%;
    visibility: hidden;
}

.color-item-track-container {
    position: relative;
    width: 100%;
    height: 5px;
    margin-top: 8px;
    border-radius: 3px;
    overflow: hidden;
}

.color-item-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
}

.color-item-track-back {
    width: 100%;
    background-color: rgb(255, 255, 255, 0.35)
}

.color-item-track-front {
    width: 0%;
    background-color: rgb(156 39 176); /* rgba(255, 174, 0, 1); */
}

.other-colors-block {
    display: flex;
    height: 100%;
    padding: 1.5vmin;
    font-size: clamp(12px, 2vw, 16px);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
    border-radius: 2vmin;
    overflow: hidden;
}

.other-colors-container {
    width: 100%;
    overflow-y: auto;
}

.other-colors-container .color-item-container {
    display: flex;
    flex-direction: column;
}

.other-colors-block .color-item-container:not(:last-child)::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin: clamp(10px, 3vmin, 15px) 0;
    background-color: rgb(255, 255, 255, 0.35)
}

.color-item {
    display: flex;
}

.other-colors-block .color-item:hover {
    cursor: pointer;
}

.color-item-color {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: max(5.5vmin, 24px);
    height: max(5.5vmin, 24px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 1.5vmin;
    overflow: hidden;
}

.color-item-color svg {
    width: 100%;
    height: 100%;
    border-radius: 1.5vmin;
}

.color-item-percent {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; 
    color: var(--game-body-colors-block-text);  
}

.other-colors-block .color-item > div:first-child {
    transition: 300ms ease-out;
}

.other-colors-block .color-item:hover > div:first-child {
    transform: scale(0.6);
    opacity: 0.6;
    transition: 250ms 100ms ease-out;
}

.pick-color > div:first-child > div:first-child > div:first-child {
    animation: clickColor 900ms ease-in-out infinite;
}

@keyframes clickColor {

    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.6);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    } 

}

.pick-color > div:first-child:hover > div:first-child > div:first-child {
    -webkit-animation-play-state: paused !important; 
    -moz-animation-play-state: paused !important; 
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* ////////////////////////////////////////////////// */

.categories-header, .game-popup-header, .viewer-popup-header {
    font-size: clamp(24px, 3vh, 36px);
    font-weight: 600;
    margin-bottom: max(1vmin, 12px);
}

.game-popup-reward-value {
    font-size: clamp(36px, 5vh, 46px);
    font-weight: 700;
}

/* ///////////////////////////////////////////////// */

.viewer-block {
    position: relative;
    width: 100%;
    height: 100%;
}

.viewer-header .btn-container .btn-download a {
    text-decoration: none;
}

.viewer-header .download-text {
    display: flex;
    align-items: center;
    width: var(--module-btn);
    height: 100%;
    color: var(--color-transparent);
    background-color: rgb(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
    transition: 400ms ease;
}

.viewer-header .download-active {
    width: max-content;
    transition: 400ms ease;
}

.viewer-header .download-active .btn-container .download-text {
    width: max-content;
    padding: 0 max(1.5vmin, 10px) 0 var(--module-btn);
    color: rgb(255, 255, 255, 1);
    transition: 400ms ease;
}

.viewer-header .download-active .btn-container svg {
    padding-right: calc(100% - var(--module-btn));
}

.viewer-header .download-active .btn-container .btn-download {    
    width: max-content;
    transition: 400ms ease;
}

.viewer-header .download-active:hover .download-text {    
    background-color: rgb(0, 0, 0, 0.15);
    transition: 200ms ease;
}

video {
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.settings-header .btn-block .btn-container svg rect, .game-header .btn-block .btn-container > div:not(.btn-brash-resize) svg rect, .viewer-header .btn-container svg rect {
    fill: rgba(255, 255, 255, 0.35);
    filter: blur(40px);
    transition: 200ms ease;
}

.settings-header .btn-block .btn-container:hover svg rect, .game-header .btn-block .btn-container:hover > div:not(.btn-brash-resize) svg rect, .viewer-header .btn-container:hover svg rect {
    fill: var(--viewer-header-btn-active-bg-hv);
    transition: 200ms ease;
}

.settings-header .btn-block .btn-container svg path, .game-header .btn-block:first-child .btn-container:first-child svg path {
    stroke: var(--color-transparent);
}

.settings-header .btn-block .btn-container:hover svg path, .game-header .btn-block:first-child .btn-container:first-child:hover svg path {
    stroke: var(--color-transparent);
}

.btn-container:hover {
    cursor: pointer;
}

.game-header .btn-block .btn-container .btn-brash-resize svg stop:last-child {
    stop-color: rgba(255, 255, 255, 0.35);
    filter: blur(40px);
}

.game-header .btn-block .btn-container .btn-brash-resize svg rect {   
    filter: blur(10px);
}

.viewer-popup-note {
    color: var(--viewer-popup-text);
    font-size: clamp(10px, 2vmin, 20px);
    margin-top: max(1vmin, 10px);
}

.other-colors-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: var(--color-transparent);
}

.other-colors-container::-webkit-scrollbar-track {
    background-color: var(--color-transparent);
}

.other-colors-container::-webkit-scrollbar-thumb {
    border-radius: 1.5vmin;
    border: 0px solid var(--menu-scrollbar-thumb-border);
    background-color: var(--color-transparent);
}

.categories-block::-webkit-scrollbar, .menu-body .image-block::-webkit-scrollbar {
    width: 0;
    height: 6px;
    background-color: var(--color-transparent);
}

.categories-block::-webkit-scrollbar-track, .menu-body .image-block::-webkit-scrollbar-track {
    background-color: var(--color-transparent);    
}

.categories-block::-webkit-scrollbar-thumb, .menu-body .image-block::-webkit-scrollbar-thumb {
    border-radius: 1.5vmin;
    border: 1px solid rgb(255, 255, 255, 0.35);
    background-color: rgb(255, 255, 255, 0.35);
}

/* //////////////////////////////////// Settings //////////////////////////////////// */

.settings-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.settings-body {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100vh - (var(--module-btn) + 5.5vh));
    margin: auto 0 0 0;
    border-radius: 2vmin;
}

.settings-body > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5vmin;
    width: clamp(90px, 35vmin, 280px);
    height: 100%;
    padding: 1.5vmin;
    border-radius: 2vmin;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
}

.settings-body .games-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.games-text, .daily-text {    
    padding: 2.5vmin 1vmin; 
    font-size: clamp(14px, 2.2vh, 16px); 
    text-align: center; 
    color: var(--header-btn-active-text);
}

.settings-body .games-container a {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("https://storage.yandexcloud.net/yandex-games-amazing-coloring/games_promo.png");
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: cover;
    border-radius: 1vmin;
    animation: MoveCover 30000ms linear infinite;
}

@keyframes MoveCover {
    0% {
        background-position: 100% center;
    }
    100% {
        background-position: 0vmin center;
    }    
}

.settings-body .play-container {
    width: 100%;
    font-size: clamp(14px, 2.2vh, 16px); 
    border-radius: 1vmin;
    /* background: linear-gradient(173.1deg, #e41bff 1.64%, #31023a 97.65%); */
    background: linear-gradient(173.1deg, #ffd900 1.64%, #FF8205 97.65%);
    border: 1px solid rgb(255, 255, 255, 0.35);
    /* backdrop-filter: blur(25px); */
    animation: PulseBtn 900ms ease-in-out infinite;
}

@keyframes PulseBtn {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}

.settings-body .play-container:hover {
    -webkit-animation-play-state: paused !important; 
    -moz-animation-play-state: paused !important; 
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

#section-settings .popup-container {
    width: 95%;
    height: 95%;
}

.canvas-settings {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: 1.5vh;
    padding: 1.5vmin;
    border-radius: 2vmin;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
}

.canvas-settings-container {    
    position: relative;
    width: 100%;
    height: 100%;
}

.daily-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* calc(100% - clamp(12px, 2vh, 16px) - 4.5vmin);*/
    padding: 1.5vmin;
    border-radius: 2vmin;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(50px);
}

.countdown-container {
    display: flex;
    justify-content: center;
    color: var(--header-btn-active-text);  
}

.countdown-container > div {
    margin-left: 2vmin;
    font-weight: 700;
}

.daily-image-item-container {
    display: flex;
    flex-direction: column;
    gap: 2.5vmin;
    width: 100%;
    height: 100%;
}

.daily-image-item-container:hover {
    cursor: pointer;
}

.settings-body .image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.settings-body .image {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-image: url("ttps://storage.yandexcloud.net/yandex-games-amazing-coloring/2024.11.12.png"); */
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 1vmin;    
}

.settings-body .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.settings-body .overlay svg {    
    width: 100%;
    height: 100%;
}

.btn-container.btn-coloring {
    font-size: clamp(14px, 2.2vh, 16px);
    background: linear-gradient(173.1deg, #e41bff 1.64%, #31023a 97.65%);
    /* background: linear-gradient(173.1deg, #ffd900 1.64%, #FF8205 97.65%); */
    border: 1px solid rgb(255, 255, 255, 0.35);
    /* backdrop-filter: blur(25px); */
    transition: 250ms ease-in;
}

.btn-container.btn-coloring:hover {
    cursor: pointer;
    transform: scale(0.9);
    transition: 250ms ease-in-out;
}

.settings-body .progress-image-value-container {
    font-size: clamp(14px, 2.2vh, 16px);
}

.settings-body .progress-daily-image-value-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1.5vmin 0 calc(1.5vmin - max(0.5vmin, 5px) + 2px) 0;
}

.settings-body .progress-daily-track-container {
    position: relative;
    width: 100%;
    height: max(0.5vmin, 5px);
}

.settings-body .progress-daily-track-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4vmin;
}

.settings-body .progress-daily-track-front {
    width: 0;
    border: none;
    background-color: rgb(156 39 176); /* rgba(255, 174, 0, 1); */
}

.settings-body .progress-daily-track-back {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.35);
}

.text-daily-image-block {
    display: flex;
    justify-content: center;
    padding: 1.5vmin 1vmin;
    font-size: clamp(14px, 2.2vh, 16px);
}

.text-daily-image-block > div:first-child {
    margin-right: 2vmin;
}

.popup-shop-container {
    width: 100%;
    height: 100%;
    padding: 4vmin 3vmin;
    border-radius: 0;
    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), linear-gradient(173.1deg, rgba(156, 39, 176, 0.65) 1.64%, rgba(66, 16, 74, 0.65) 97.65%); */
    /* backdrop-filter: blur(25px); */
}

#section-menu .popup-shop-container .content > div:last-child {
    width: 100%;
    height: 100%;
    margin: auto 0;
    overflow: hidden;
}

.offers-container {
    display: flex;
    gap: 3vmin;
    width: 100%;
    height: 100%;
    padding: 2vmin 0;
    overflow-x: auto;
}

.offers-container::-webkit-scrollbar {
    width: 0;
    height: 6px;
    background-color: var(--color-transparent);
}

.offers-container::-webkit-scrollbar-track {
    background-color: var(--color-transparent);    
}

.offers-container::-webkit-scrollbar-thumb {
    border-radius: 1.5vmin;
    border: 1px solid rgb(255, 255, 255, 0.35);
    background-color: rgb(255, 255, 255, 0.35);
}

.offer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1.5vmin;
    background: linear-gradient(170.39deg, rgba(247, 29, 29, 0) -11.9%, #000000 135.75%), linear-gradient(173.1deg, #9C27B0 1.64%, #42104A 97.65%);
    border: 2px solid rgba(69, 0, 83, 1);
    backdrop-filter: blur(25px);
    border-radius: 1.5vmin;
    transition: 250ms ease-in-out;
}

.offer-container:hover {
    transform: translateY(-2vmin);
    transition: 250ms ease-in-out;
}

.offer-container:hover .offer-image {
    transform: scale(1.2);
    transition: 250ms ease-in-out;
}

.offer-popular {
    background: linear-gradient(170.39deg, rgba(247, 29, 29, 0) -11.9%, #590202 135.75%), linear-gradient(173.1deg, #9C27B0 1.64%, #42104A 97.65%);
    border-color: #FFB800;
}

.offer-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5vmin;
    width: 100%;
    margin: auto;
}

.offer-image {
    display: flex;
    justify-content: center;
    transition: 250ms ease-in-out;
}

.offer-icon {
    width: 100%;
    height: 100%;
}

/* .offer-image svg {
    width: 100%;
    height: 100%;
} */

.offer-amount-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offer-amount-resurse {
    font-weight: 600;
    font-size: clamp(20px, 2vmin, 28px);
    text-align: center;
    background: linear-gradient(124.95deg, #FFD257 5.09%, #FFDE31 50.16%, #CB6601 94.49%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.offer-amount-value {
    font-weight: 600;
    font-size: clamp(26px, 6vmin, 46px);
    text-align: center;
    background: linear-gradient(124.95deg, #FFD257 5.09%, #FFDE31 50.16%, #CB6601 94.49%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.popup-shop-container .btns {
    display: flex;
    justify-content: center;
}

.popup-shop-container .btn-close {
    padding: 1.5vmin 2.5vmin;   
}

.popup-container .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.offer-container .btn-container {
    display: flex;
    width: 100%;
    padding: 1.5vmin 1vmin;
    font-size: clamp(12px, 2vh, 16px);
    background: linear-gradient(173.1deg, #e41bff 1.64%, #31023a 97.65%);
    /* background: linear-gradient(173.1deg, #ffd900 1.64%, #FF8205 97.65%); */
    border: 1px solid rgb(255, 255, 255, 0.35);
    /* backdrop-filter: blur(25px); */
    border-radius: 1vmin;
    transition: 250ms ease-in;
}

.offer-container .btn-container:hover {
    transform: scale(0.9);
    background: linear-gradient(173.1deg, #e41bff 1.64%, #31023a 97.65%);
    transition: 250ms ease-in;
}

.offer-container .icon-yan-container {
    height: clamp(8px, 2vmin, 20px);
    margin-left: max(0.5vmin, 5px);
}

.offer-container .icon-yan {
    width: 100%;
    height: 100%;
}

.popup-shop-container .content > div:not(:first-child) {
    line-height: normal;
}

.gradient {
    background: linear-gradient(149deg, rgba(24,187,156,1) 0%, rgba(106,57,175,1) 42%, rgba(187,24,148,1) 72%, rgba(115,53,134,1) 100%);
    animation: Gradient 10s infinite linear;
    background-size: 400%;
}

@keyframes Gradient {
    0% {
        background-position: 80% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 80% 0%;
    }
}