:root:not(.dark-theme):not(.light-theme) {
    visibility: hidden;
}

:root {
    --border-radius: 5px;
    --transition-duration: 0.3s;
    --transition-duration-fast: 0.1s;
    /*horizontal-break-1: 1280px;*/
    /*horizontal-break-2: 600px;*/

    --secondary-color: #ccff57;

    --error-color: orange;
    --success-color: green;

    --white-color: white;
    --black-color: black;
    --gray-color: gray;
    --gray-color-light: rgb(190, 190, 190);
}

:root.light-theme {
    --primary-color-light: #674c8a;
    --primary-color-mid: #5e4680;
    --primary-color-dark: #563e75;

    --background-color: white;
    --background-color-light: rgb(237, 237, 237);
    --background-color-transparent: rgba(102, 102, 102, 0.9);

    --text-color: black;
    --gray-text-color: #333333;
    --line-color: var(--primary-color-light);
    --icon-color: var(--secondary-color);
    --outline-hover-color: var(--secondary-color);

    --cropper-overlay-transparent: rgba(215, 215, 215, 0.5);
}

:root.dark-theme {
    --primary-color-light: #563e75;
    --primary-color-mid: #5e4680;
    --primary-color-dark: #674c8a;

    --background-color: rgb(40, 40, 40);
    --background-color-light: rgb(60, 60, 60);
    --background-color-transparent: rgba(40, 40, 40, 0.85);

    --text-color: white;
    --gray-text-color: #bbbbbb;
    --line-color: var(--secondary-color);
    --icon-color: var(--primary-color-light);
    --outline-hover-color: white;

    --cropper-overlay-transparent: rgba(80, 80, 80, 0.5);
}

.theme-transition * {
    transition: background-color var(--transition-duration),
    border-color var(--transition-duration),
    color var(--transition-duration),
    fill var(--transition-duration),
    stroke var(--transition-duration);
}


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

html {
    background-color: var(--background-color);
    font-size: 62.5%;
    scroll-behavior: smooth;
}