:root {
    --color-bg-footer: #373737;
    --color-bg-cherry: #983B58;
    --color-bg-green: #6A814E;
    --color-bg-blue: #4E6881;
    --color-bg-tuff: #9E662D;
    --color-bg-grey: #5e4f42;
    --color-bg-white: #FFF7E8;

    --color-fg-cherry-common: #FFF7F0;
    --color-fg-cherry-accent: #FFE8E8;

    --color-fg-green-common: #E8E1D0;
    --color-fg-green-accent: #E1D7B4;

    --color-fg-blue-common: #FFF7E8;
    --color-fg-blue-accent: #E1D7B4;
    --color-fg-blue-quote: #E8FCFF;

    --color-fg-tuff-common: #E8E1D0;
    --color-fg-tuff-accent: #CFBC98;

    --color-fg-grey-common: #E8E1D0;
    --color-fg-grey-accent: #E1D7B4;

    --color-fg-white-common: #413F3F;
    --color-fg-white-accent: #9B632B;

    --color-urartu-1: #E33737;
    --color-urartu-2: #CD7F32;
    --color-urartu-3: #A0C9FF;
    --color-urartu-4: #87A6A1;
    --color-urartu-5: #D7C14F;
    --color-urartu-6: #87A6A1;

    --font-nav: 'JetBrainsMono', serif;
    --font-heading: 'Playfair', serif;
    --font-body: 'Inter', sans-serif;
    --font-quote: 'BadScript', sans-serif;
    --font-quote-armenian: 'NotoSerifArmenian', sans-serif;
}

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

html {
    position: relative;
    scroll-behavior: initial;
    background-color: var(--color-bg-white);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: overlay;
}

body {
    position: relative;
    overflow-x: clip;
    width: 100%;
}

section {
    position: relative;
    width: 100%;
}


::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.urartu {
    text-transform: uppercase;
    line-height: 0.8;

    .char-0 {}

    .char-1 {
        color: var(--color-urartu-1);
    }

    .char-2 {
        color: var(--color-urartu-2);
    }

    .char-3 {
        color: var(--color-urartu-3);
    }

    .char-4 {
        color: var(--color-urartu-4);
    }

    .char-5 {
        color: var(--color-urartu-5);
    }

    .char-6 {
        color: var(--color-urartu-6);
    }
}

.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.25;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 800px 800px;

    animation: grainShift 0.8s steps(3) infinite;
}

@keyframes grainShift {
    0% {
        background-position: 0% 0%;
    }

    33% {
        background-position: 15% 10%;
    }

    66% {
        background-position: 30% 5%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.rights__block {
    margin-left: 4vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.rights__text {
    color: white;
    font-size: 1vw;
    font-family: var(--font-body);
}

.github__link > img{
    width: 4vw;
    height: auto;
}