@font-face {
    font-family: 'Inter';
    src: url(Inter-VariableFont_opsz\,wght.ttf);
    font-display: swap;
}
html {
    scrollbar-gutter: stable;
}

:root {
    /* Brand */
    --primary-color: #313131;
    --secondary-color: #3F5C59;
    --tertiary-color: #B7C3BF;

    /* Accent / CTA */
    --enhanced-color: #E07A3F;

    /* boosted contrast + saturation */
    --accent-color: #5F9F90;

    /* Backgrounds */
    --primary-bg-color: #FFFFFF;
    --secondary-bg-color: #EEF3F1;
    --tertiary-bg-color: #DCE7E3;

    /* Success / Error */
    --accept-bg-color: #4C8A73;
    --accept-bg-color-hover: #E2F2EC;

    --red-bg-color: #D06161;
    --red-bg-color-hover: #F8E3E3;

    /* Utility */
    --like-color: #E25563;
    --raiting-color: #FFD76A;
}

* {
    font-family: 'Inter';
}

section {
    margin-bottom: 20px;
}

.main-txt {
    color: var(--primary-color);
}

.secondary-txt {
    color: var(--secondary-color);
}

.highlight-txt {
    color: var(--accent-color);
}

.s-txt {
    font-size: 14px;
}

.m-txt {
    font-size: 16px;
}

.l-txt {
    font-size: 18px;
}

body {
    overflow-x: clip;
    margin: 0;
}

/* Loading skeleton */

.loading{
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--tertiary-bg-color);
}
.loading.xl{
    height: 30rem;
}
.loading.lg{
    height: 15rem;
}
.loading.md{
    height: 2rem;
}
.loading.sm{
    height: 1rem;
}
.loading.w-1{
    width: 10%;
}
.loading.w-2{
    width: 25%;
}
.loading.w-3{
    width: 33%;
}

/* Loading animation */
.loading::after{
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.08) 35%,
            rgba(255,255,255,0.45) 50%,
            rgba(255,255,255,0.08) 65%,
            transparent 100%
    );

    animation: shimmer 0.9s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 1000px) {
    .container {
        padding: 0;
    }
}