/* Фикс анимации при загрузке страницы */

.preload,
.preload ::before {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Темы */

html[data-theme=light] {
    --top-color: hsla(210, 100%, 100%, 0.5);
    --border-color: hsla(210, 30%, 30%, 0.5);
    --background-color: hsl(210, 30%, 90%);
    --accent-color: rgb(0, 150, 100);
    --accent-color-hover: rgb(0, 228, 152);
    --text-color: hsl(0, 0%, 0%);
    --highlight-color: rgba(0, 200, 133, 0.07);
    --selection-text-color: white;

    --button-color: rgba(0, 200, 133, 0.07);
    --button-click-color: hsla(210, 100%, 100%, 1);

    --slider-color: hsl(210, 100%, 100%);
    --slider-background-color: hsla(210, 30%, 80%, 0.5);

    --cursor-fill-color: black;
    --cursor-stroke-color: black;
}

html[data-theme=dark] {
    --top-color: hsla(210, 20%, 20%, 0.5);
    --border-color: hsla(210, 20%, 50%, 0.5);
    --background-color: hsl(210, 20%, 10%);
    --accent-color: rgb(0, 255, 128);
    --accent-color-hover: rgb(128, 255, 192);
    --text-color: hsl(0, 0%, 100%);
    --highlight-color: rgba(128, 255, 192, 0.05);
    --selection-text-color: black;

    --button-color: rgba(128, 255, 192, 0.05);
    --button-click-color: hsla(210, 20%, 60%, 0.5);

    --slider-color: black;
    --slider-background-color: hsla(210, 20%, 20%, 0.5);

    --cursor-fill-color: white;
    --cursor-stroke-color: black;
}

/* Переменные и основной стиль сайта */

body {
    --min-border-radius: 15px;
    --border: 1px;
    --margin: 10px;
    --about-width: 292px;
    --other-width: 700px;
    --transition: 200ms;

    margin: 0;
    font-size: 12pt;
    font-family: "calibri";
    background-color: var(--background-color);
    color: var(--text-color);

    transition: background-color var(--transition), color var(--transition);
}

.main {
    margin: 0;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
}

* {
    -webkit-tap-highlight-color: transparent;
}

.about {
    position: sticky;
    top: 0;
    height: auto;
    align-self: flex-start;
    margin: 0 calc(-1 * var(--margin)) 0 0;
    width: var(--about-width);
    border: none;
    background: none;
}

.other {
    margin: 0;
    width: var(--other-width);
    border: none;
    background: none;
}

div {
    margin: var(--margin);
    border: var(--border) solid var(--border-color);
    background-color: var(--top-color);
    transition: background-color var(--transition);
}

.dep-1 {
    border-radius: calc(var(--min-border-radius) + 3 * (var(--margin) + var(--border)));
}

.dep-2 {
    border-radius: calc(var(--min-border-radius) + 2 * (var(--margin) + var(--border)));
}

.dep-3 {
    border-radius: calc(var(--min-border-radius) + var(--margin) + var(--border));
}

.dep-4 {
    border-radius: var(--min-border-radius);
}

.flex {
    margin: var(--margin);
    border: none;
    background: none;

    display: flex;
    flex-wrap: wrap;

    gap: var(--margin);
}

.flex div:not(.flex) {
    margin: 0;
}

/* Меню */

.nav {
    margin: 0 16px;
    border: none;
    background: none;

    display: none;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

/* Кнопки, ссылки, интерактив */

.highlight {
    background-color: var(--highlight-color);
}

a {
    text-decoration: none;
    color: var(--accent-color);
    transition: color var(--transition);
    cursor: none;
}

.button {
    display: block;
    color: var(--accent-color);
    user-select: none;
    transition: color var(--transition), background-color var(--transition), border var(--transition), box-shadow var(--transition);
}

.button:active {
    background-color: var(--button-click-color);
    transition: background-color 0ms;
}

::selection {
    background-color: var(--accent-color-hover);
    color: var(--selection-text-color);
}

html {
    scrollbar-color: var(--border-color) var(--slider-background-color);
    scrollbar-width: thin;
}

div p.logos {
    margin: 16px 0 14px 0;
    display: flex;
    justify-content: center;
}

p.logos svg {
    fill: var(--accent-color);
    margin: 0 8px;
}

p.logos svg:hover {
    fill: var(--accent-color-hover);
}

/* Курсор */

html {
    cursor: none;
}

div.cursor {
    top: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    padding: 0;

    position: fixed;
    pointer-events: none;
    z-index: 6;
    display: none; /* Из-за этого CSS-правила у меня один раз курсор пропал и не появлялся, пока я не увёл мышку за пределы сайта и не вернул её обратно. Возможно, лучше убрать это правило, чтобы такого больше не повторялось, но без него выглядит уродско. Так что пока оставлю, но если такой баг будет часто случаться, придётся или починить его, или это правило убрать. */
}

.cursor svg {
    transition: opacity var(--transition);
}

.cursor svg g path {
    fill: var(--cursor-fill-color);
    stroke: var(--cursor-stroke-color);
    stroke-linecap: butt;
    stroke-linejoin: round;
    transition: fill var(--transition), stroke var(--transition);
}

/* Курсор-лупа */

.cursor svg.zoom g path {
    fill: var(--accent-color-hover);
    stroke-linejoin: miter;
}

.cursor svg.zoom {
    opacity: 0;
    position: absolute;
    display: block;
    left: -11px;
    top: -10px;
}

/* Текстовый курсор */

.text-cursor {
    opacity: 0;
    position: absolute;
    display: block;
    left: -6px;
    top: -9px;
}

svg.text-cursor g path {
    fill: var(--cursor-fill-color);
    stroke: var(--cursor-fill-color);
    fill-opacity: 1;
    stroke-linecap: round;
    stroke-opacity: 1
}

/* Переключатель темы */

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    left: 41%;
    border-radius: 30px;
    transition: box-shadow var(--transition);
}

.theme-switch input {
    display: none;
}

.slider {
    cursor: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--slider-background-color);
    border-radius: 14px;
    border: var(--border) solid var(--border-color);
    transition: background-color var(--transition), border var(--transition);
}

.slider::before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 2px;
    bottom: 2px;
    background-color: var(--slider-color);
    transition: background-color var(--transition), transform var(--transition);
    border-radius: 20px;
}

input:checked+.slider {
    background-color: var(--slider-background-color);
}

input:checked+.slider:before {
    transform: translateX(25px);
}

input:checked~.sun {
    opacity: 0;
    transform: translateX(25px);
}

.sun {
    cursor: none;
    transition: opacity var(--transition), fill var(--transition), transform var(--transition);
    user-select: none;
    position: absolute;
    height: 13px;
    width: 13px;
    right: 31px;
    bottom: 6px;
}

input:checked~.moon {
    opacity: 1;
    transform: translateX(25px);
}

.moon {
    cursor: none;
    transition: opacity var(--transition), fill var(--transition), transform var(--transition);
    user-select: none;
    opacity: 0;
    position: absolute;
    height: 13px;
    width: 13px;
    right: 31px;
    bottom: 6px;
}

/* Текст */

p.caption {
    margin: 8px 32px 29px 32px !important;
}

h1.caption {
    margin: 29px 32px 8px 32px !important;
}

h1 {
    font-size: 14pt;
    font-family: "gilroy";
}

h2 {
    font-size: 12pt;
    font-family: "gilroy";
}

.dep-1 p,
.dep-1 h1,
.dep-1 h2 {
    margin: 25px 35px;
}

.dep-2 p,
.dep-2 h1,
.dep-2 h2 {
    margin: 20px 30px;
}

.dep-3 p,
.dep-3 h1,
.dep-3 h2 {
    margin: 15px 20px;
}

.dep-4 p,
.dep-4 h1,
.dep-4 h2 {
    margin: 5px 8px;
}

/* Картинки */

img {
    border: var(--border) solid var(--border-color);
    margin: var(--margin);
    display: block;
    width: calc(100% - 2 * var(--margin) - var(--border));
    transition: box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}

img.zoomed:hover {
    box-shadow: 0 0 0 calc(var(--border) + 1px) var(--accent-color-hover);
}

svg {
    fill: var(--text-color);
    transition: fill var(--transition);
}

/* Таблицы */

.table {
    overflow: hidden;
}

table {
    margin: -1px;
    border-spacing: 0;
    border-collapse: collapse;
}

tr {
    transition: background-color var(--transition);
}

tr td:last-child,
tr th:last-child {
    border-right: none;
}

th {
    font-family: "gilroy";
    vertical-align: bottom;
    padding: var(--margin);
    border: var(--border) solid var(--border-color);
}

td {
    padding: var(--margin);
    border: var(--border) solid var(--border-color);
}

/* Переключение между мобильной и компьютерной версией */

@media (max-width: 810px) {
    body {
        --margin: 8px;
        --min-border-radius: 17px;
    }

    .main {
        display: block;
    }

    .about {
        position: relative;
        margin: 59px 0 0 0;
        width: auto;
    }

    .other {
        width: auto;
    }

    .table {
        overflow-x: auto;
    }

    nav {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: var(--top-color);
        z-index: 5;
        border-bottom: var(--border) solid var(--border-color);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: border var(--transition), background-color var(--transition);
    }

    .theme-switch {
        top: 11px;
        left: 6px !important;
    }

    .nav {
        display: flex;
    }

}

/* Эффекты наведения применяются только на тех устройствах, где можно навестись. Например, на компьютерах. */

@media (hover: hover) {

    a:hover {
        color: var(--accent-color-hover)
    }

    .button:hover {
        box-shadow: 0 0 0 calc(var(--border) + 1px) var(--accent-color-hover);
        color: var(--accent-color-hover);
    }

    img.clickable:hover {
        box-shadow: 0 0 0 calc(var(--border) + 1px) var(--accent-color-hover);
    }

    .theme-switch:hover {
        box-shadow: 0 0 0 calc(var(--border) + 1px) var(--accent-color-hover);
    }

}

@media (hover: none) {
    .cursor {
        display: none;
    }
}

/* Толщина обводки курсора при разном масштабировании монитора */

@media (min-resolution: 1x) {
    .cursor svg g path {
        stroke-width: 0.2647155;
    }

    svg.zoom g path {
        stroke-width: 0.264583;
    }

    svg.text-cursor g path {
        stroke-width: 0.529167;
    }
}

@media (min-resolution: 1.25x) {
    .cursor svg g path {
        stroke-width: 0.22059625;
    }

    svg.zoom g path {
        stroke-width: 0.2116664;
    }

    svg.text-cursor g path {
        stroke-width: 0.4233336;
    }
}

@media (min-resolution: 1.5x) {
    .cursor svg g path {
        stroke-width: 0.176477;
    }

    svg.zoom g path {
        stroke-width: 0.1763887;
    }

    svg.text-cursor g path {
        stroke-width: 0.352778;
    }
}

/* Шрифты */

@font-face {
    font-family: "gilroy";
    src: url("../fonts/gilroy-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "gilroy";
    src: url("../fonts/gilroy.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "calibri";
    src: url("../fonts/calibri.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "calibrib";
    src: url("../fonts/calibri.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "calibrii";
    src: url("../fonts/calibri.ttf") format("truetype");
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "calibri";
    src: url("../fonts/calibriz.ttf") format("truetype");
    font-style: italic;
    font-weight: bold;
}