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

html {
    scroll-snap-type: y mandatory; /* Включаем вертикальное примагничивание */
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
    -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Стандартный синтаксис */
}

body {
    height: 100%;
    background: var(--main);
    overflow-x: hidden;
    width: 100%;
}

body::-webkit-scrollbar {
    width: 3px;
}


body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

body::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

/*THEME*/

:root {
    --main: hsl(0deg 0% 93%);
    --low: hsl(0deg 0% 96%);
    --mid: hsl(0 0% 98% / 1);
    --top: white;
    --overlay: hsla(0, 0%, 60%, 0.27);
    --border:hsl(0deg 0% 0% / 5%);
    --overlaytop:hwb(0deg 60% 40% / 16%);
    --select: black;--subselect: hsl(0deg 0% 20%);
    --text:black;--subtext:hwb(0deg 20% 80% / 50%);
    --filter: invert(0);
    --filterinv: invert(1);
}

@media (prefers-color-scheme: dark) {

    :root {

    --main: black;
    --low: hsl(0 0% 3% / 1);
    --mid: hsl(0 0% 6% / 1);
    --top: hsl(0 0% 9% / 1);
    --overlay: hsl(0deg 0% 0% / 27%);
    --overlaytop:hwb(0deg 40% 60% / 16%);
    --border:hsl(0deg 0% 0% / 4%);

    --text: white;
    --subtext: hwb(0 80% 100% / 1);

    --select: white;
    --subselect:hsl(0deg 0% 20%);

    --filter: invert(1);
    --filterinv: invert(0);

    }

}


/*HANDLE THEME*/

.theme-light {
--main: hsl(0deg 0% 93%);
--low: hsl(0deg 0% 96%);
---mid: hsl(0 0% 98% / 1);
--top: white;

--overlay: hsla(0, 0%, 60%, 0.27);
--border:hsl(0deg 0% 0% / 5%);
--overlaytop:hwb(0deg 60% 40% / 16%);
--select: black;
--subselect: hsl(0deg 0% 20%);

--text:black;
--subtext:hwb(0deg 20% 80% / 50%);
    
--filter: invert(0);
--filterinv: invert(1);
}

.theme-dark {

    --main: black;
    --low: hsl(0 0% 3% / 1);
    ---mid: hsl(0 0% 6% / 1);
    --top: hsl(0 0% 9% / 1);
    --overlay: hsl(0deg 0% 0% / 27%);
    --overlaytop:hwb(0deg 40% 60% / 16%);
    --border:hsl(0deg 0% 0% / 4%);

    --text: white;
    --subtext: hwb(0 80% 100% / 1);

    --select: white;
    --subselect:hsl(0deg 0% 20%);

    --filter: invert(1);
    --filterinv: invert(0);
}