@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

:root {
    --bgc-app: #101010;
    --text-grey: #808080;
    --text-white: #f4faff;
    --text-black: #08090a;
    --text-tunedr: #a199cf;
    --danger-error: #e5484d;
    --danger-error-message-bg: #7c3638a2;
    --success: #22c55e;
    --warning: #f97316;
    --information: #1c5d99;
    --author-music: #d9dbf1;
    --title-music: #f8f4e3;
    --bgc-post-imgs: #939cb1;
    --bgc-input-div: #232323;
    --bgc-white: #f4faff;
    --bgc-black: #08090a;
    --border-color: #f4faff;
    --side-border: rgba(255, 255, 255, 0.08);
    --bgc-modale: #161616;
    --bgc-modale-background: rgba(0, 0, 0, 0.72);
    --bgc-gradient-tunedr: linear-gradient(
        160deg,
        #0c0c10 0%,
        #14101e 55%,
        #0a0a0e 100%
    );
    --color-hearth-active: #c84630;
    --color-comment-active: #7067cf;
    --color-shopping-active: #4a7b9d;
    --color-bookmark-active: #f9c80e;
    --border-radius: 10px;
    --border-radius-imgs-home: 35px;
    --sidebar-width: 320px;
    --sidebar-min-width: 260px;
    --font-size-big-title: 3rem;
    --font-size-title: 1rem;
    --font-size-text: 0.8rem;
    --font-family-app: "DM Sans", sans-serif;
    --font-family-errors: "Roboto Mono", monospace;
    --font-weight: 600;
    --dock-h: 64px;
    --size-icons-login-register: 20px;
    --size-icons-l: 30px;
    --size-icons-xs: 20px;
    --size-svg-dottie: 140px;
    --full-width: 100%;
    --full-height: 100%;
    --full-border: 999px;
    --middle-border: 50%;
    --opacity-btn-hover: 0.8;
    --size-avatar-user: 70px;
    --size-avatar-sm: 50px;
    --size-checkbox: 20px;
    --size-checkbox-checked: 10px;
    --pad: clamp(12px, 3vw, 24px);
    --maxw: 1200px;
    --pe-transition: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-duration: 0.3s;
    --line-height: 1.5;
    --position-cross: 1.1rem;
}

::selection {
    background: var(--text-tunedr);
    color: var(--text-black);
}

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

html,
body {
    height: var(--full-height);
}

html {
    scrollbar-gutter: stable both-edges;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

body {
    margin: 0;
    color: var(--text-white);
    background: var(--bgc-app);
    font-family: var(--font-family-app);
    -webkit-text-size-adjust: var(--full-width);
    overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: var(--full-width);
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

.layout {
    min-height: 100svh;
    padding-left: var(--sidebar-width);
    position: relative;
    z-index: 1;
}

.page-content {
    min-height: 100svh;
    overflow-x: hidden;
    position: relative;
    z-index: 2;
}

.page-content {
    min-height: 100svh;
    overflow-x: hidden;
}

.page-content > :first-child {
    margin-top: 0;
}
.page-content > :last-child {
    margin-bottom: 0;
}

@media (max-width: 1279px) and (min-width: 769px) {
    .layout {
        padding-left: var(--sidebar-min-width);
    }
}

@media (max-width: 768px) {
    .layout {
        padding-left: 0;
    }
    .page-content {
        padding-bottom: calc(
            var(--dock-h) + 28px + env(safe-area-inset-bottom, 0)
        );
    }
}