:root {
    --color-primary: #DE3C4B;
    --color-primary-dark: #751E23;
    --color-secondary: #E28413;
    --color-secondary-dark: #E28413;
    --color-tertiary: #5E239D;
    --color-text-black: rgba(0, 0, 0, 0.87);
    --color-text-white: rgba(255, 255, 255, 0.87);
    --color-selection: #EBEBD3;

    --color-background-dark: #000000;
    --color-background-light: #F9F9F9;

    --header-height: 50px;
    --side-width: 50px;

    --small-screen-threshold: 800px;
}

body {
    margin: 0;
    padding: 0;
    max-width: 100vw;
    position: relative;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 0.8em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background-color: #000;
}

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

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary);
    cursor: pointer;
}

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

a:hover {
    text-decoration: underline;
}

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

.icon {
    display: inline-block;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.icon-button {
    cursor: pointer;
    transition: transform 0.1s ease-in;
}

.icon-button:hover {
    transform: scale(1.1);
    transition: transform 0.05s ease-out;
    transform-origin: center;
}

@keyframes no-transform {
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes pulse {
    0% {
        transform: none;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: none;
    }
}

@keyframes pulse-opacity-scale {
    0% {
        opacity: 1;
        transform: none;
    }

    50% {
        opacity: .6;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes pulse-opacity {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pulse-partial-opacity {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes pulse-opacity-inverted {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}