@font-face {
    font-family: 'Montserrat';
    src: url('/static/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
  }
  
@font-face {
    font-family: 'Nunito';
    src: url('/static/fonts/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 1000;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}
:root {
    --accent-color: #f73e5d;
    --primary-color: white;
    --secondary-color: rgb(245, 247, 250);
    --gold-color: #D4AF30;
    
    --sea-color: #87BCDE;
    --soft-color: #F9F1F1;
    --deepsea-color: #360080;
    --violet-color: #B680FF;
    --footer-color: #2f3338;
    --select-color: #dd3954;
    --dark-color-1: #2e2e41;
    --dark-color-1-rgb: 46, 46, 65;
    --dark-color-2: #434354;
    --dark-color-2-rgb: 67, 67, 84;
    --gray-color-1: #f1f1f1;
    --accept-color:  rgb(92, 184, 92);
    --accept-color-60: rgba(92, 184, 92, 1);
    --gray-color: #e7e7e7;


    --text-size-10: calc(var(--text-size-100) * 0.6);
    --text-size-50: calc(var(--text-size-100) * 0.85);
    --text-size-100: 0.9rem;
    --text-size-150: calc(var(--text-size-100) * 1.04);
    --text-size-200: calc(var(--text-size-100) * 1.2);
    --text-size-300: calc(var(--text-size-100) * 1.44);
    --text-size-400: calc(var(--text-size-100) * 1.928);
    --text-size-500: calc(var(--text-size-100) * 2.074);
    --text-size-600: calc(var(--text-size-100) * 2.488);
    --text-size-700: calc(var(--text-size-100) * 2.986);
    --text-size-1000: calc(var(--text-size-100) * 3.5);

    /* WHITESPACES */

    --space-100: 1rem;
    --space-10: calc(var(--space-100) * 0.1);
    --space-15: calc(var(--space-100) * 0.15);
    --space-20: calc(var(--space-100) * 0.2);
    --space-30: calc(var(--space-100) * 0.3);
    --space-50: calc(var(--space-100) * 0.5);
    --space-70: calc(var(--space-100) * 0.7);
    --space-120: calc(var(--space-100) * 1.2);
    --space-150: calc(var(--space-100) * 1.5);
    --space-170: calc(var(--space-100) * 1.7);
    --space-200: calc(var(--space-100) * 2);
    --space-250: calc(var(--space-100) * 2.5);
    --space-300: calc(var(--space-100) * 3);
    --space-350: calc(var(--space-100) * 3.5);
    --space-400: calc(var(--space-100) * 4);
    --space-450: calc(var(--space-100) * 4.5);
    --space-500: calc(var(--space-100) * 5);
    --space-600: calc(var(--space-100) * 6);
    --space-625: calc(var(--space-100) * 6.25);
    --space-700: calc(var(--space-100) * 7);

    --n-space-100: 1rem;
    --n-space-10: calc(var(--space-100) * 0.1);
    --n-space-15: calc(var(--space-100) * 0.15);
    --n-space-20: calc(var(--space-100) * 0.2);
    --n-space-30: calc(var(--space-100) * 0.3);
    --n-space-50: calc(var(--space-100) * 0.5);
    --n-space-70: calc(var(--space-100) * 0.7);
    --n-space-120: calc(var(--space-100) * 1.2);
    --n-space-150: calc(var(--space-100) * 1.5);
    --n-space-170: calc(var(--space-100) * 1.7);
    --n-space-200: calc(var(--space-100) * 2);
    --n-space-250: calc(var(--space-100) * -2.5);
    --n-space-300: calc(var(--space-100) * 3);
    --n-space-350: calc(var(--space-100) * 3.5);
    --n-space-400: calc(var(--space-100) * 4);
    --n-space-450: calc(var(--space-100) * 4.5);
    --n-space-500: calc(var(--space-100) * 5);
    --n-space-600: calc(var(--space-100) * 6);
    --n-space-700: calc(var(--space-100) * 7);
}

@media (min-width: 1000px) {
    :root {
        --text-size-100: 1rem;
        --space-100: 1.2rem;
    }
}

@media (max-width: 300px) {
    :root {
        --text-size-100: 0.7rem;
        --space-100: .9rem;
    }
}

body.light{
    --accent-color: #f73e5d;
    --accent-color-40: rgba(247, 62, 93, 0.4);
    --positive-color: white;
    --negative-color: black;
    --bg-color-primary: #ffffff;
    --bg-color-primary-rgb: rgb(255, 255, 255);
    --bg-color-80: rgba(255, 255, 255, 0.8);
    --bg-color-50: rgba(255, 255, 255, 0.5);
    --bg-color-60: rgba(255, 255, 255, 0.6);
    --bg-color-70: rgba(255, 255, 255, 0.7);
    --bg-color-20: rgba(255, 255, 255, 0.2);
    --bg-color-secondary-60: rgba(223, 223, 223, 0.6);
    --bg-color-secondary-40: rgba(223, 223, 223, 0.4);
    --bg-color-secondary-20: rgba(223, 223, 223, 0.2);
    --bg-color-secondary: #f2f2f2;
    --bg-color-secondary-active: rgb(233, 233, 233);
    --bg-color-secondary-alt: #e0e0e0;
    --border-color-primary: black;
    --border-color-05: rgba(0, 0, 0, 0.05);
    --border-color-10: rgba(0, 0, 0, .1);
    --border-color-20: rgba(0, 0, 0, .2);
    --border-color-30: rgba(0, 0, 0, .3);
    --border-color-40: rgba(0, 0, 0, .4);
    --border-color-50: rgba(0, 0, 0, .5);
    --border-color-60: rgba(0, 0, 0, .6);
    --border-color-70: rgba(0, 0, 0, .7);
    --border-color-80: rgba(0, 0, 0, .8);
    --border-color-90: rgba(0, 0, 0, .9);
    --bg-hover: rgba(177, 176, 176, 0.4);
    --backgroundPress: #F9F9F9;
    --backgroundFocus: #F9F9F9;
    --svg-color-1: #1c274c;
    --accent-bg-color: #f73e5d;
    --brightness-filter: 100%;

    --bg-orange-primary: #ff8400;
    --bg-orange-secondary: #fdead8;

    --bg-red-primary: #f80439;
    --bg-red-secondary: #fce3e9;

    --bg-blue-primary: #005ce6;

    --bg-purple-primary: #8e2de2;

    --bg-green-primary: #00a54a;
    --bg-green-secondary: #dfffea;

    --bg-pink-primary: #e941a8;

    --bg-cyan: #00ffffa2;
    --bg-yellow: #fbff009a;
    --bg-viol: #a600ff2d;
    

    --bg-blue: #4082e6cc;
    --bg-orange: #e2a563e5;
    --bg-purple: #a600ff3f;

    --bg-orange-2: #ff5100;
    --bg-red-1: #ff006abe;

    --bg-yellow-2: #ffd9003a;

    --text-viol: #8e2de2;
    --text-pink: #e000d5;

    --yellow-color: #ffd000;

    --status-green: #00a51b;
    --status-yellow: #e68a00;
    --status-red: #f80439;
    --status-blue: #0445f8;


    --user-bg-0: #ffeece;
    --user-bg-1: #e7cbff;
    --user-bg-2: #c8ffff;
    --user-bg-3: #e3ffbf;
    --user-bg-4: #becaff;
    --user-bg-5: #bcffd3;
    --user-bg-6: #ffb7b7;
    --user-bg-7: #ffc0df;
    --user-bg-8: #feffcf;
    --user-bg-9: #cbffeb;

    --user-fg-0: #db8f00;
    --user-fg-1: #a200ff;
    --user-fg-2: #00c4c4;
    --user-fg-3: #67b600;
    --user-fg-4: #3700ce;
    --user-fg-5: #00c444;
    --user-fg-6: #c03600;
    --user-fg-7: #ca0065;
    --user-fg-8: #a4a700;
    --user-fg-9: #00bb73;

    --message-self: #f9dbff;
    --message: #ffffff;

    --tg-color: rgb(36, 161, 222);
    --tg-color-60: rgba(36, 160, 222, 0.61);
}

body.dark{
    --accent-color:#f73e5d;
    --accent-color-40: rgba(253, 141, 160, 0.61);
    --positive-color: black;
    --negative-color: white;
    --bg-color-primary: #272929;
    --bg-color-primary-rgb: rgb(39, 41, 41);
    --bg-color-80: rgba(39, 41, 41, 0.8);
    --bg-color-70: rgba(39, 41, 41, 0.7);
    --bg-color-60: rgba(39, 41, 41, 0.6);
    --bg-color-50: rgba(39, 41, 41, 0.5);
    --bg-color-20: rgba(39, 41, 41, 0.2);
    --bg-color-secondary-60: rgb(53, 53, 53, 0.6);
    --bg-color-secondary-40: rgb(53, 53, 53, 0.4);
    --bg-color-secondary-20: rgb(53, 53, 53, 0.2);
    --bg-color-secondary: rgb(53, 53, 53);
    --bg-color-secondary-active: rgb(58, 58, 58);
    --bg-color-secondary-alt: rgb(66, 66, 66);
    --border-color-primary: white;
    --border-color-05: rgba(255, 255, 255, 0.05);
    --border-color-10: rgba(255, 255, 255, 0.1);
    --border-color-20: rgba(255, 255, 255, 0.2);
    --border-color-30: rgba(255, 255, 255, 0.3);
    --border-color-40: rgba(255, 255, 255, 0.4);
    --border-color-50: rgba(255, 255, 255, 0.5);
    --border-color-60: rgba(255, 255, 255, 0.6);
    --border-color-70: rgba(255, 255, 255, 0.7);
    --border-color-80: rgba(255, 255, 255, .8);
    --border-color-90: rgba(255, 255, 255, .9);
    --bg-hover: rgb(83, 83, 83);
    --backgroundPress: #1B1B1B;
    --backgroundFocus: #1B1B1B;
    --accent-bg-color: #1e2020;
    --brightness-filter: 40%;
    --svg-color-1: #eae8e2;

    --bg-orange-primary: #f88204;
    --bg-orange-secondary: #3a2a1c;

    --bg-red-primary: #f80439;
    --bg-red-secondary: #3b252a;

    --bg-blue-primary: #25b4f7;

    --bg-purple-primary: #c58ff5;

    --bg-green-primary: #04f872;
    --bg-green-secondary: #253b2d;

    --bg-pink-primary: #ff5ca8;

    --bg-cyan: #09679e33;
    --bg-yellow: #7e5c1d5d;
    --bg-viol: #7000ac1a;

    --bg-blue: #08172e88;
    --bg-orange: #2e170fd0;
    --bg-purple: #2b123871;

    --bg-orange-2: #3d12007e;
    --bg-red-1: #4e002133;

    --bg-yellow-2: #350a423b;

    --text-viol: #c58ff5;
    --text-pink: #fc70c1;

    --yellow-color: #ffee04;

    --status-green: #04f872;
    --status-yellow: #ffee04;
    --status-red: #ff0037;
    --status-blue: #388eff;

    --user-bg-0: #e2d6bf;
    --user-bg-1: #c5b1d6d8;
    --user-bg-2: #abe4e4d3;
    --user-bg-3: #c1db9ffa;
    --user-bg-4: #a9b4e6d2;
    --user-bg-5: #b3e4c3;
    --user-bg-6: #e9b4b4;
    --user-bg-7: #e6b8cf;
    --user-bg-8: #e6e7b7;
    --user-bg-9: #b7e4d3;

    --user-fg-0: #ffcd6f;
    --user-fg-1: #ba6cffd8;
    --user-fg-2: #00ffffd3;
    --user-fg-3: #91ff00fa;
    --user-fg-4: #31b3ffd2;
    --user-fg-5: #52ff8c;
    --user-fg-6: #ff6161;
    --user-fg-7: #ff68b3;
    --user-fg-8: #fcff64;
    --user-fg-9: #52ffbd;

    --message-self: #535353;
    --message: #3b3b3b;

    --tg-color: rgb(36, 161, 222);
    --tg-color-60: rgba(36, 160, 222, 0.61);
}


h6 {
    font-size: var(--text-size-50);
}

p {
    font-size: var(--text-size-100);
}
li {
    font-size: var(--text-size-100);
}

h5 {
    font-size: var(--text-size-150);
}

h4 {
    font-size: var(--text-size-200);
}
h3 {
    font-size: var(--text-size-300);
}

h2 {
    font-size: var(--text-size-400);
}

h1 {
    font-size: var(--text-size-500);
    line-height: 120%;
}

a {
    text-decoration: none;
    
}

::-webkit-scrollbar {
    width: .5vw;
    
}
::-webkit-scrollbar-track {
    background: var(--bg-color-primary);


}

::-webkit-scrollbar-thumb {
    background: var(--border-color-30);
    border-radius: .5rem;
    margin-block: 1.5rem;
    border: 1px solid var(--bg-color-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-color-60);
}

a {
    color: var(--border-color-80);
    
}

a:visited {
    color: var(--border-color-80);
    
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

button.disabled {
    pointer-events: none;
    opacity: 0.6;
}

input.disabled {
    pointer-events: none;
}

.main {
    min-height: 65vh;
    color: var(--border-color-primary) !important;
}

.vc {
    width: 1px;
    background: var(--border-color-20)
}

.vr {
    height: 1px;
    background: var(--border-color-20)
}

.wrap {
    margin: auto;
    width: 100%;
    
}

.btn__copy {
    position: relative;
}

.btn__copy::after {
    content: "Скопировано";
    position: absolute;
    top: -1.5rem;
    right: 0;
    background: var(--bg-color-secondary);
    color: var(--border-color-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: var(--text-size-100);
    pointer-events: none;
    opacity: 0;
    transform: translateX(50%);
    transition: opacity 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 8px;
}

.copy__svg {
    width: 1rem;
    fill: var(--border-color-60);
    transition: .15s linear;
}

.btn__copy:hover .copy__svg {
    fill: var(--border-color-primary);
}

.btn__copy.copied::after {
    opacity: 1 !important;
}

.pe-none {
    pointer-events: none;
}

.lock-scroll {
    overflow: hidden;
}

#showonmobile {
    display: none ;
}
.desktop {
    display: none;
}

.mb-15 {
    margin-bottom: var(--space-120);
}

#navbar-sign {
    display: none;
}

.invisible {
    opacity: 0;
}

.canvas {
    width: 100vw;
    height: 100vh;
    position: absolute;
}

.skeleton {
    /* animation: backgroundChangeRight 4s ease infinite ;
    background: linear-gradient(90deg, var(--bg-color-secondary) 0%, var(--bg-color-secondary-alt) 25%, 
    var(--bg-color-secondary) 50%, var(--bg-color-secondary-alt) 75%, var(--bg-color-secondary) 100%);
    background-size: 200% 200%; */
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color-secondary);
}
.skeleton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--bg-color-secondary) 0%, var(--bg-color-secondary-alt) 50%, var(--bg-color-secondary) 100%);
    animation: shimmer 1.5s ease infinite;
    will-change: transform;
  }

@keyframes skeleton-loading {
    0% {
        filter: opacity(.4);
    }
    100% {
        filter: opacity(1);
    }
}
@keyframes shimmer {
    0% {
      transform: translateX(-200%);
    }
    100% {
      transform: translateX(200%);
    }
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg-color-80);
    
    z-index: 15;
    transform: translateY(0%);
    transition: background .2s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    border-bottom: 1px solid var(--border-color-05);
}


.navbar.moved {
    transform: translateY(-100%);
    box-shadow: rgba(0, 0, 0, 0) 0px 5px 15px;
}

.navbar__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    
}
.navbar__container:after {
    content: '';
    width: 100%;
    left:0;
    height: 100%;
    position: absolute;
    z-index: -1;
    backdrop-filter: blur(15px);
}
.navbar.at-top {
    background: transparent;
    box-shadow: rgba(0, 0, 0, 0) 0px 5px 15px;
    border-bottom: unset;
}

.navbar.at-top .navbar__container:after {
    backdrop-filter: blur(0);
}
.navbar__button {
    padding: .5rem;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--border-color-60);
    transition: color .15s linear;
    column-gap: .5rem;
}

.navbar__button.btn__copy::after {
    content: "Скопировано";
    position: absolute;
    bottom: -1.5rem;
    right: 0;
    background: var(--bg-color-secondary);
    color: var(--border-color-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: var(--text-size-100);
    pointer-events: none;
    opacity: 0;
    transform: translateX(50%);
    transition: opacity 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 8px;
    height: unset;
    width: unset;
    top: unset;
    left: unset;
}


.navbar__svg {
    width: 1.5rem;
    fill: var(--border-color-60);
    transition: .15s linear;
}

.navbar__button:hover{
    color: var(--border-color-primary);
}

.navbar__button:hover svg{
    fill: var(--border-color-primary)
}

.navbar__button:after {
    position: absolute;
    background: var(--border-color-primary);
    content: '';
    height: 2px;
    width: 0%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width .15s ease;
}

.navbar__button.active:after {
    width: 40%;
}

.navbar__button.active .navbar__svg {
    fill: var(--border-color-primary)
}

.navbar__container-right {
    display: flex;
}

.navbar__container-right .vc {
    margin-block: .3rem;
    margin-inline: .5rem;
}

.navbar__logo {
    display: flex;
}

.navbar__logo-svg {
    fill: var(--border-color-60);
    width: 2.5rem;
    transition: .3s ease-in-out;
}
.navbar__logo:hover .navbar__logo-svg {
    fill: var(--border-color-primary);
    transform-origin: center;
    transform: scale(1.05);
}


.navbar__element-list {
    display: flex;
    margin-left: 1rem;
    position: relative;
}
.navbar__element {
    display: flex;
    position: relative;
}
.nav-element {
}
.nav-element__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    margin-block: -.5rem
}
.nav-element__link {
    color: var(--border-color-60);
    transition: .15s ease-in-out;
}
.nav-element:hover .nav-element__link {
    color: var(--border-color-primary);
}

.nav-element__popup {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 3rem;
    transition: .3s ease-in-out;
    border-top: .5rem solid transparent;

}
.nav-element:hover .nav-element__popup {
    color: var(--border-color-primary);
    pointer-events: all;
    /* backdrop-filter: blur(15px); */
    
}

.nav-popup__content {
    display: flex;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    background: var(--bg-color-80);
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
    column-gap: 3rem;
    transition: .3s ease-in-out;
    color: var(--border-color-primary);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-color-05);
}
.nav-element:hover .nav-popup__content {
    
    opacity: 1;
    visibility: visible;
    
    
}

.moved .nav-element:hover .nav-popup__content {
    opacity: 0;
    visibility: hidden;
}

.navbar__element.active .nav-element__link {
    color: var(--border-color-primary);
}

.navbar__element.active:after {
    content: '';
    position: absolute;
    width: 40%;
    height: 2px;
    background: var(--border-color-primary);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


.nav-popup {
}

.nav-popup__wrapper {
    display: flex;
    column-gap: 1rem; 
}

.nav-popup__header {
    margin-bottom: 1rem;
    display: flex;
    color: var(--border-color-primary);
    align-items: center;
    column-gap: .5rem;
}
.nav-popup__svg {
    width: 1.5rem;
}

.svg__orange {
    fill:var(--bg-orange-primary)
}

.svg__green {
    fill:var(--bg-green-primary)
}

.svg__pink {
    fill:var(--bg-pink-primary)
}

.svg__purple {
    fill:var(--bg-purple-primary)
}

.svg__blue {
    fill:var(--bg-blue-primary)
}

.nav-popup__body {
    display: flex;
    column-gap: .7rem;
    justify-content: center;
    align-items: stretch;
    width: 100%;
}



.nav-popup__stack {
    display: flex;
    flex-direction: column;
    min-width: 250px;
}
.nav-popup__button {
    width: 100%;
    display: flex;
    padding: .5rem 0;
    color: var(--border-color-60);
    border-radius: .5rem;
    transition: color .15s ease-in-out;
}
.nav-popup__button:hover {
    color: var(--border-color-primary);
}
.nav-popup__text {
    text-align: start;
}

.nav-popup__card-big {
}
.nav-card {
    position: relative;
    height: 100%;
    width: 260px;
    display: flex;
    align-items: end;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
    transition: .15s linear;
}


.nav-card__image {
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transform: scale(1);
    transition: transform .2s ease-in-out;
}

.nav-card__container {
    display: flex;
    align-items: center;
    padding: .5rem;
    column-gap: .5rem;
}
.nav-card__span {
    padding: .5rem;
    border-radius: .5rem;
    display: flex;
    background: rgba(138, 137, 137, 0.349);
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}
.nav-card__span-svg {
    width: 1.2rem;
    fill: rgba(255, 255, 255, 0.801);
    transition: .2s ease-in-out;
}
.nav-card__text {
    color: rgba(255, 255, 255, 0.801);
    transition: .2s ease-in-out;
}

.nav-card:hover .nav-card__image{
    transform: scale(1.05);
}

.nav-card:hover .nav-card__span-svg {
    fill: white
}

.nav-card:hover .nav-card__text {
    color: white
}

.nav-popup__card-small {
    width: 100%;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    column-gap: .5rem;
    border-radius: .5rem;
    background: var(--bg-color-secondary-40);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 8px;
    transition: .1s linear;
    color: var(--border-color-80);
}
.nav-popup__card-svg {
    width: 1.2rem;
    fill: var(--border-color-80);
    transition: .15s linear;
}

.nav-popup__card-svg.stroke path {
    stroke: var(--border-color-80);
    transition: .15s linear;
}

.nav-popup__text {
}

.nav-popup__card-small:hover {
    background: var(--border-color-10);
    color: var(--border-color-primary);
}

.nav-popup__card-small:hover .nav-popup__card-svg  {
    fill: var(--border-color-primary);
}

.nav-popup__card-small:hover .nav-popup__card-svg.stroke path {
    stroke: var(--border-color-primary)
}

.nav-popup__card-small.active {
    background: var(--border-color-20);
}

.similar__item {
    display: flex;
    flex-direction: column;
    max-width: 150px;
}
.similar__list:active .similar__item {
    user-select: none;
    -webkit-user-drag: none;
    cursor: grabbing !important;
    
}
.similar__item:visited  {
    color: var(--border-color-primary);
}

.similar__item-image {
    aspect-ratio: 1/1;
    width: 150px;
    min-height: 150px;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: .5rem;
    user-select: none;
    -webkit-user-drag: none;
}
.similar__list:active .similar__item-image{
    cursor: grabbing;
}
.similar__item-name {
    color: var(--border-color-80);
    margin-bottom: .5rem;
}

.similar__item-price {
    display: flex;
    column-gap: .5rem;
    height: 100%;
    align-items: end;
}

.similar__item-price-crossed {
    color: var(--border-color-40);
    text-decoration: line-through;
}

.similar__item-price-actual {
    color: var(--border-color-primary);
}

.desktop {
    display: none;
}

@media (min-width: 1100px) {
    .desktop {
        display: flex;
    }
    .mobile {
        display: none;
    }
    .navbar__container {
        padding-inline: 1.5rem;
    }
}
@media (max-width: 250px) {
    .bigger-screen {
        display: none;
    }
}

.offcanvas {
    
    transform: translateX(-100%);
    position: fixed;
    background: var(--bg-color-80);
    
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    z-index: 15;
    
    transition: .3s ease-in-out;
    max-width: 600px;
}
.offcanvas.active {
    
    transform: translateX(0);
}
.offcanvas__overlay {
    position: fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.26);
    opacity: 0;
    z-index: 15;
    visibility: hidden;
    transition: .3s ease-in-out;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.offcanvas__overlay.active{
    opacity: 1;
    visibility: visible;
}
.offcanvas__container {
    padding: .5rem 1rem 10rem;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    
}
.offcanvas__container::-webkit-scrollbar {
    display: none;
}
.offcanvas__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: .5rem;
    left: 1rem;
    right: 1rem;
}
.offcanvas__top-left {
    position: relative;
}
.offcanvas__top-left button.active {
    position: static;
    opacity: 1;
}
.offcanvas__top-left button:not(.active){
    position: absolute;
    
    opacity: 0;
    visibility: hidden;
    
}
.offcanvas__button {
    display: flex;
    align-items: center;
    color: var(--border-color-80);
    column-gap: .5rem;
    padding: .5rem;
}

.offcanvas__button .offcanvas__svg {
    width: var(--space-150);
}

.offcanvas__button-container {
    display: flex;
    align-items: center;
    column-gap: var(--space-70);
}
.offcanvas__svg {
    width: var(--space-120);
    fill: var(--border-color-80)
}
.offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: calc(20vh + 15vw);
    min-height: 120px;
    row-gap: 1rem;

}
.offcanvas__header-svg {
    width: 22vw;
    max-width: 160px;
    fill: var(--border-color-primary);
    overflow: visible;
}

.offcanvas__header-svg #logo-border, #logo-top, #logo-bottom {
    opacity: 0;
}
.offcanvas__header-svg #logo-border  {
    animation: rotate-conceal .2s ease forwards;
    transform-origin: center;

}
.offcanvas__header-svg #logo-top  {
    animation: disappearBottom .2s ease forwards;
    transform-origin: center;

}
.offcanvas__header-svg #logo-bottom  {
    animation: disappearTop .2s ease forwards;
    transform-origin: center;

}

.offcanvas.active .offcanvas__header-svg #logo-border  {
    animation: rotate-reveal .6s ease forwards;
    transform-origin: center;
    animation-delay: .2s;
}
.offcanvas.active .offcanvas__header-svg #logo-top  {
    animation: appearBottom .6s ease forwards;
    transform-origin: center;
    animation-delay: 1s;
}
.offcanvas.active .offcanvas__header-svg #logo-bottom  {
    animation: appearTop .6s ease forwards;
    transform-origin: center;
    animation-delay: .8s;
}
@keyframes rotate-conceal {
    0% { 
        transform: rotate(0deg); 
        opacity: 1;
    }
    100% { 
        transform: rotate(-60deg); 
        opacity: 0;
    }
}

@keyframes rotate-reveal {
    0% { 
        transform: rotate(-60deg); 
        opacity: 0;
    }
    100% { 
        transform: rotate(0deg); 
        opacity: 1;
    }
}

.offcanvas__header-name {
    color: var(--border-color-primary);
    text-align: center;
    transform: rotate3d(1, 0, 0, 90deg);
    transition: .3s ease;
    transform-origin: top;
    transition-delay: 0s;
}
.offcanvas.active .offcanvas__header-name {
    color: var(--border-color-primary);
    transform: rotate3d(1, 0, 0, 0deg);
    transition-delay: .7s;
    transition-duration: .7s;
}

.offcanvas__body {
    display: flex;
    position: relative;

}
.offcanvas__body-container {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
    position: absolute;
    transform: translateX(-250%);
    opacity: 0;
}
.offcanvas__body-container.active {
    position: static;
    transform: translateX(0%);
    pointer-events: all;
    opacity: 1;
}
.offcanvas__body-container.before {
    transform: translateX(-250%);
    opacity: 0;
    transition-delay: 1s;
}
.offcanvas__body-button {
    width: 100%;
    padding: var(--space-100) var(--space-150);
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: var(--space-70);
    border-radius: .5rem;
    color: var(--border-color-80);
    transition: .05s ease-in-out;
    opacity: 0;
    
    
}
button.offcanvas__body-button {
    justify-content: space-between;
}
.offcanvas__body-button:active,
.offcanvas__body-button.tapped {
    background: var(--bg-color-secondary-40);
    color: var(--border-color-90);

}

.offcanvas__body-button:active svg,
.offcanvas__body-button.tapped svg {
    fill: var(--border-color-90);
}
/* .offcanvas__body-button:hover{
    background: var(--bg-color-secondary);
    color: var(--border-color-primary);
} */


.offcanvas__body-button.active {
    background: var(--bg-color-secondary);
    color: var(--border-color-primary);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
}

.offcanvas__body-button.active svg {
    fill: var(--border-color-primary);
}



.offcanvas:not(.active) .offcanvas__body-button:nth-child(n + 1):nth-child(-n + 8) {
    animation: offcanvasBodyHide ease forwards;

    animation-duration: calc(0.2s * var(--i));
    
}

.offcanvas.active .offcanvas__body-button:nth-child(n + 1):nth-child(-n + 8) {
    animation: offcanvasBodyShow ease forwards;
    animation-delay: .15s;
    animation-duration: calc(0.2s * var(--i));
    
}

.offcanvas__body-container.animated-left:not(.active) .offcanvas__body-button:nth-child(n + 1):nth-child(-n + 8) {
    animation: offcanvasContainerHideToLeft ease forwards;
    pointer-events: none;
    animation-duration: calc(0.15s * var(--i));
}

.offcanvas__body-container.animated-left.active .offcanvas__body-button:nth-child(n + 1):nth-child(-n + 8) {
    animation: offcanvasContainerShowToLeft ease forwards;
    animation-delay: .25s;
    animation-duration: calc(0.15s * var(--i));
}

.offcanvas__body-container.animated-right:not(.active) .offcanvas__body-button:nth-child(n + 1):nth-child(-n + 8) {
    animation: offcanvasContainerHideToRight ease forwards;
    pointer-events: none;
    animation-duration: calc(0.15s * var(--i));
}

.offcanvas__body-container.animated-right.active .offcanvas__body-button:nth-child(n + 1):nth-child(-n + 8) {
    animation: offcanvasContainerShowToRight ease forwards;
    animation-delay: .25s;
    animation-duration: calc(0.15s * var(--i));
}

.navbar__side {
    display: flex;
}

.navbar__user {

}

.user {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}

.user__button {
    display: flex;
}



a.user__login {
    color: var(--accent-color);
    background: white;
    
}




.spacer {
    aspect-ratio: 800/200;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


}

.pointer {
    cursor: pointer !important;
}

.theme {
}
.theme__container {
    position: relative;
    display: flex;
}

.navbar__svg {
}
.theme__svg {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}
.theme.light .theme__svg.theme__light {
    position: static;
    opacity: 1;
    visibility: visible;
}

.theme.dark .theme__svg.theme__dark {
    position: static;
    opacity: 1;
    visibility: visible;
}

.theme__label {
    display: none;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    right: 50%;
    transform: translateX(-25%);
    background: var(--bg-color-secondary);
    border-radius: .5rem;
}

/* @media (min-width: 1000px) {
    .theme__container {
        column-gap: 1rem;
        border: 1px solid var(--bg-color-secondary);
        border-radius: .5rem;
    }

    .theme__label {
        display: block;
    }

    .theme.dark .theme__label {
        right: 0;
    }

    .theme__svg {
        position: sticky;
        z-index: 0;
    }
} */

.icon {
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
    width: fit-content;
    border-radius: 50%;
}

.icon__container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--border-color-20);
    width: var(--space-250);
    height: var(--space-250);
}

.icon__sign {
    color: black;
    font-size: var(--text-size-200);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    display: flex;
}

.icon__img {
    aspect-ratio: 1/1;
    border-radius: 50%;
    max-width: var(--space-250);
    object-fit: cover;
}

.image-viewer {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    z-index: 20;
    top: 0;
    left: 0;
    transition: .3s ease-in-out;
    background: var(--bg-color-primary);
}

.image-viewer.active {
    opacity: 1;
    visibility: visible;
}
.image-viewer__container {
    position: relative;
    min-height: 100%;
    min-width: 100%;
}
.image-viewer__top {
    display: flex;
    position: relative;
    
}
.image-viewer__close {
    padding: .5rem;
}
.image-viewer__top h4{
    color: var(--border-color-primary)
}

.image-viewer__pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    column-gap: .2rem;
    padding: .5rem 0;
}
.pagination__before {
}
.pagination__after {

}
.image-viewer__main-frame {
    min-height: 100vh;
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    transition: transform .3s ease-in-out;
    transform: translateY(100%);
}
.image-viewer.active .image-viewer__main-frame {
    transform: translateY(0);
}
.image-viewer__scroller {
    display: flex;
    scroll-snap-type: inline mandatory;
    max-width: 100vw;
    overflow-x: scroll;
    column-gap: 1.5rem;
    -webkit-user-drag: none;
    user-select: none;
    cursor: grab;
}
.image-viewer__scroller.active {
    scroll-behavior: auto;
    cursor: grabbing;
}
.image-viewer__scroller.mobile {
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
}

.image-viewer__scroller::-webkit-scrollbar {
    display: none;
}
.image-viewer__image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-viewer__main-frame img {
    width: 100vw;
    max-width: 700px;
    max-height: 85vh;
    object-fit: contain;
    scroll-snap-align: center;
    -webkit-user-drag: none;
    user-select: none;
     
}
.image-viewer__controls {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 100%;

    
}
.image-viewer__controls-button {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    padding: .5rem;
    transition: .3s ease-in-out;
}
.image-viewer__controls-button.active {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    padding: .5rem;
}

.image-viewer__controls-button svg{
    width: 2rem;
    height: 2rem;
    fill: var(--border-color-80);
    
}

@media (min-width: 1000px) {
    .image-viewer {
        background: var(--bg-color-80);
        backdrop-filter: blur(6px);
    }
    .image-viewer__scroller {
        scroll-snap-type: none;
    }
    .image-viewer__image-container {
        min-width: 100vw;
    }
    .image-viewer__close {
        padding: 1rem;
    }
    .image-viewer__pagination {
        padding: 1rem;
    }
    .image-viewer__main-frame img {
        max-width: 100vw;
        width: unset;
        max-height: 75vh;
        border-radius: .5rem;
    }
    .image-viewer__controls-button {
        padding: 1rem;
    }
    .image-viewer__controls-button svg {
        width: 3rem;
        height: 3rem;
    }
}


@media (min-width: 900px) {
    .spacer {
        aspect-ratio: 800/100;
    }
}

footer {
    background: var(--footer-color);
    color: white;
    position: sticky;
}
footer .footer-top {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2rem 2rem 0rem;
}

@media (max-width:350px) {
    footer .footer-top {
        display: flex;
        
        flex-direction: column;
        padding: 2rem 2rem 0rem;
    }
    footer .footer-top .links {
        margin-bottom: 2rem;
    }
}

footer .footer-top a {
    color: white;
    text-decoration: none;
    opacity: 60%;
    padding: 0px 0px 10px;
}

footer .footer-top p {
    opacity: 60%;
    padding: 0px 0px 10px;
    font-size: 16px !important;
}

footer .footer-top h3 {
    font-size: x-large;
    padding: 0rem 0rem 1rem;
}

footer .footer-top .contacts {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    padding: 0rem 0rem 2rem;
    
}

footer .footer-top .links {
    display: flex;
    flex-direction: column;
}

footer .footer-top .social {
    display: flex;
    flex-direction: column;
}

footer .footer-top .vr {
    grid-column: 1/3; 
    max-width: unset;
    opacity: 30%; 
    margin: 1.5rem 0rem
}

footer .footer-top .head-info {
    display: none;
    flex-direction: column;
}

footer .footer-top .head-info .img-1 {
    width: 50px;
    margin-right: 0.3rem;

}



footer .footer-top .head-info .brand {
    display: flex;
    align-items: end;
    justify-content: start;
    margin-bottom: 0.5rem;
}
footer .footer-top .head-info .brand p {
        opacity: 100%;
        font-size: 22px;
    }

footer .footer-top .head-info a {
    opacity: 90%;
}
        

footer .footer-top .ip-info {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    opacity: 50%;
}


@media (min-width: 700px) {
    footer .footer-top .ip-info{
        flex-direction: row;
        
    }
}

@media (min-width: 1100px) {
    footer .footer-top{
        grid-template-columns: auto;
    }
    footer .footer-top .contacts {
        grid-column: 2;
    }
    footer .footer-top .links {
        grid-column: 3;
    }

    footer .footer-top .social {
        grid-column: 4;
    }

    footer .footer-top .vr {
        grid-column: 1/5;
    }

    footer .footer-top .ip-info {
        grid-column: 1/5 ;
    }

    footer .footer-top .head-info {
        display: flex;
    }
}
#breadcrumbs {
    width: 100%;
    
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    column-gap: var(--space-50);
    overflow: auto;
}
.breadcrumb__list::-webkit-scrollbar {
    display: none;
}
.breadcrumb__element {
    display: flex;
    align-items: center;
    column-gap: var(--space-50);
    color: var(--border-color-60);
}
.breadcrumb__element * {
    color: var(--border-color-60);
    transition: color .1s linear;
    white-space: nowrap;
}

.breadcrumb__element a:hover {
    color: var(--border-color-primary);
}
.breadcrumb__divider {
    pointer-events: none;
}