@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap";
@import "https://unpkg.com/open-props/easings.min.css";

:root {
    --header-height: 80px;
    --sidenav-width: 30vw
}

@media screen and (max-width: 1366px) {
    :root {
        --header-height: 70px
    }
}

.sun-and-moon > .moon {
    transform-origin: center center
}

.sun-and-moon > .sun {
    transform-origin: center center
}

.sun-and-moon > .sun-beams {
    transform-origin: center center
}

.sun-and-moon > .sun {
    fill: var(--icon-fill)
}

.theme-toggle:hover > .sun-and-moon > .sun {
    fill: var(--icon-fill-hover)
}

.theme-toggle:focus-visible > .sun-and-moon > .sun {
    fill: var(--icon-fill-hover)
}

.sun-and-moon > .sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px
}

.theme-toggle:hover .sun-and-moon > .sun-beams {
    stroke: var(--icon-fill-hover)
}

.theme-toggle:focus-visible .sun-and-moon > .sun-beams {
    stroke: var(--icon-fill-hover)
}

[data-theme=light] .sun-and-moon > .sun {
    transform: scale(1.75)
}

[data-theme=light] .sun-and-moon > .sun-beams {
    opacity: 0
}

[data-theme=light] .sun-and-moon > .moon > circle {
    transform: translate(-7px)
}

@supports (cx: 1) {
    [data-theme=light] .sun-and-moon > .moon > circle {
        transform: translate(0);
        cx: 17
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon > .sun {
        transition: transform .5s var(--ease-elastic-3)
    }

    .sun-and-moon > .sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3)
    }

    .sun-and-moon .moon > circle {
        transition: transform .25s var(--ease-out-5)
    }

    @supports (cx: 1) {
        .sun-and-moon .moon > circle {
            transition: cx .25s var(--ease-out-5)
        }
    }[data-theme=light] .sun-and-moon > .sun {
         transform: scale(1.75);
         transition-timing-function: var(--ease-3);
         transition-duration: .25s
     }

    [data-theme=light] .sun-and-moon > .sun-beams {
        transform: rotate(-25deg);
        transition-duration: .15s
    }

    [data-theme=light] .sun-and-moon > .moon > circle {
        transition-delay: .25s;
        transition-duration: .5s
    }
}

.theme-toggle {
    --size: 32px;
    --icon-fill: hsl(0 0% 100%);
    --icon-fill-hover: hsl(0 0% 50%);
    background: none;
    border: none;
    padding: 0;
    inline-size: var(--size);
    block-size: var(--size);
    aspect-ratio: 1;
    border-radius: 50%
}

[data-theme=light] .theme-toggle {
    --icon-fill: hsl(0 0% 30%);
    --icon-fill-hover: hsl(0 0% 20%)
}

.theme-toggle {
    touch-action: manipulation;
    outline-offset: 5px
}

.theme-toggle > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round
}

@media (hover: none) {
    .theme-toggle {
        --size: 48px
    }
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0
}

ol, ul {
    list-style: none;
    padding: 0
}

a {
    text-decoration: none
}

html {
    font-family: Montserrat;
    color-scheme: dark;
    background-color: #232323
}

html[data-theme=light] {
    color-scheme: light
}

html {
    font-size: 32px
}

body {
    margin: 0;
    transition: background-color .5s ease-in;
    background-color: #232323
}

[data-theme=light] body {
    background-color: #fff
}

#app {
    font-family: Montserrat, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: grid;
    align-items: end
}

h1, h4, button, p {
    transition: color .15s ease-out
}

@media screen and (max-width: 581px) {
    html {
        font-size: 16px
    }
}

.tippy-box[data-theme=dark] {
    font-family: Montserrat;
    background-color: #000;
    font-size: 12px
}

.tippy-box[data-theme=dark][data-placement=bottom] > .tippy-arrow:before {
    border-bottom-color: #000
}

.default-button[data-v-1d622aff] {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-size: inherit;
    font-family: inherit
}

.default-button[data-v-1d622aff]:disabled {
    cursor: auto
}

.theme-toggle[data-v-685ebdec] {
    padding: 8px
}

.theme-toggle_size[data-v-685ebdec] {
    --button-size: 50px;
    height: var(--button-size);
    width: var(--button-size)
}

.theme-toggle_background[data-v-685ebdec] {
    background-color: #c4c4c4
}

.burger-button[data-v-28462464] {
    transition: all .1s ease;
    border-radius: 50%;
    line-height: 0
}

.burger-button[data-v-28462464]:hover, .burger-button_active[data-v-28462464] {
    transform: scale(1.15)
}

.burger-button__icon[data-v-28462464] {
    transition: fill .25s ease-in-out;
    padding: 5px
}

.burger-button__icon_size[data-v-28462464] {
    width: 50px
}

.burger-button__icon_theme[data-v-28462464] {
    fill: #e8e8e8
}

[data-theme=light] .burger-button__icon_theme[data-v-28462464] {
    fill: #535353
}

.shadow[data-v-e428f0d4] {
    box-shadow: 0 4px 4px #00000040
}

.text_center[data-v-e428f0d4] {
    text-align: center
}

.pointer[data-v-e428f0d4] {
    cursor: pointer
}

.header[data-v-e428f0d4] {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;
    transition: all .5s ease-in
}

.header_size[data-v-e428f0d4] {
    height: var(--header-height)
}

.header_theme[data-v-e428f0d4] {
    background-color: #303030
}

[data-theme=light] .header_theme[data-v-e428f0d4] {
    background-color: #dedede
}

.shadow[data-v-05074fe2] {
    box-shadow: 0 4px 4px #00000040
}

.text_center[data-v-05074fe2] {
    text-align: center
}

.pointer[data-v-05074fe2] {
    cursor: pointer
}

.sidenav[data-v-05074fe2] {
    position: fixed;
    top: var(--header-height);
    width: 0;
    height: calc(100% - var(--header-height));
    transition: width .5s ease-in, background-color .5s ease-in, top .5s ease-in, border-bottom .5s ease-in;
    overflow-x: hidden;
    padding: 80px 0;
    z-index: 10000
}

-back.sidenav[data-v-05074fe2] {
    z-index: 1000
}

.sidenav_theme[data-v-05074fe2] {
    background-color: #303030
}

[data-theme=light] .sidenav_theme[data-v-05074fe2] {
    background-color: #dedede
}

.sidenav_active[data-v-05074fe2] {
    width: var(--sidenav-width)
}

.sidenav__inner[data-v-05074fe2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 41px;
    white-space: nowrap
}

.bottom-line[data-v-05074fe2] {
    border-bottom: 2px solid #c4c4c4
}

[data-theme=light] .bottom-line[data-v-05074fe2] {
    border-bottom: 2px solid #4f4f4f
}

@media screen and (max-width: 768px) {
    .sidenav[data-v-05074fe2] {
        z-index: 1000
    }

    .sidenav_active[data-v-05074fe2] {
        width: 100%
    }
}

.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity
}

.tippy-box[data-placement^=top] > .tippy-arrow {
    bottom: 0
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: currentColor;
    border-top-color: initial;
    transform-origin: center top
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
    top: 0
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: currentColor;
    border-bottom-color: initial;
    transform-origin: center bottom
}

.tippy-box[data-placement^=left] > .tippy-arrow {
    right: 0
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: currentColor;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left
}

.tippy-box[data-placement^=right] > .tippy-arrow {
    left: 0
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: currentColor;
    border-right-color: initial;
    transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1
}

.shadow[data-v-50738982] {
    box-shadow: 0 4px 4px #00000040
}

.text_center[data-v-50738982] {
    text-align: center
}

.pointer[data-v-50738982] {
    cursor: pointer
}

.circle[data-v-50738982] {
    width: 55px;
    height: 55px;
    transition: border .5s ease-in, background-color .5s ease-in;
    border-radius: 50%;
    border: 10px solid #232323
}

[data-theme=light] .circle[data-v-50738982] {
    border: 10px solid #ffffff
}

.circle_position[data-v-50738982] {
    position: absolute;
    bottom: 15px;
    right: 15px
}

.circle_color[data-v-50738982] {
    background-color: #7e7e7e
}

.main-content[data-v-50738982] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 33vh;
    justify-content: space-between
}

.main-content__image-wrapper[data-v-50738982] {
    position: relative;
    line-height: 0
}

.main-content__image[data-v-50738982] {
    width: 280px;
    height: auto;
    border-radius: 50%
}

.main-content__title[data-v-50738982] {
    transition: color 1s ease-in
}

[data-theme=light] .main-content__title_color[data-v-50738982] {
    color: #232323
}

.main-content__text_color[data-v-50738982] {
    color: #7e7e7e
}

.main-content__link_color[data-v-50738982] {
    color: #5866ef
}

@media screen and (max-width: 1400px) {
    .circle[data-v-50738982] {
        width: 50px;
        height: 50px
    }

    .circle_position[data-v-50738982] {
        right: 10px;
        bottom: 8px
    }

    .main-content__image[data-v-50738982] {
        width: 236px
    }
}

@media screen and (max-width: 581px) {
    .circle[data-v-50738982] {
        width: 40px;
        height: 40px
    }

    .main-content__image[data-v-50738982] {
        width: 200px
    }
}

@media screen and (max-height: 670px) {
    .main-content[data-v-50738982] {
        margin-top: 80px
    }
}

.interaction-block[data-v-0bd24fd2] {
    display: grid;
    grid-template-columns:repeat(4, auto);
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 40px
}

.interaction-block__link[data-v-0bd24fd2] {
    width: 57px
}

.interaction-block__icon[data-v-0bd24fd2]:hover {
    fill: #9bbfd4
}

[data-theme=light] .interaction-block__icon[data-v-0bd24fd2]:hover {
    fill: #6b889c
}

.interaction-block__icon_theme[data-v-0bd24fd2] {
    transition: fill .5s ease-in;
    fill: #fff
}

[data-theme=light] .interaction-block__icon_theme[data-v-0bd24fd2] {
    fill: #232323
}

.interaction-block_position[data-v-0bd24fd2] {
    min-height: 10vh
}

@media screen and (max-width: 1200px) {
    .interaction-block__link[data-v-0bd24fd2] {
        width: 45px
    }
}

@media screen and (max-width: 581px) {
    .interaction-block__link[data-v-0bd24fd2] {
        width: 35px
    }
}

.page-not-found[data-v-82904e12] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.page-not-found__description_color[data-v-82904e12] {
    color: #777
}

.color[data-v-2fd1f7eb] {
    height: 50vh
}

.blue-color[data-v-2fd1f7eb] {
    background-color: #0057b8
}

.orange-color[data-v-2fd1f7eb] {
    background-color: gold
}