:root
{
    --primary-color: #534DF9;
    --secondary-color: #E16D2F;
    --accent-color: #F5DBCB;
    --text-color: #020122;
    --secondary-text-color: #221F1F;
    --tetriary-text-color: #2c3e50;
    --background-color: #040303;
    --starry-bg-color: #020122;

    
    --tetriary-color: #D90368;
    --bg-light: #f8f9fa;
    --bg-dark: #1a1a1a;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --gradient-primary: linear-gradient(135deg, rgb(2, 1, 34) 0%, rgb(16, 10, 21) 100%);
    --gradient-accent: linear-gradient(135deg, #ff6b6b, #ee5a52);


    --transparent-primary-color: rgba(83, 77, 249, 0.75);
    --transparent-secondary-color: rgba(242, 93, 34, 0.75);
    --transparent-tetriary-color: #D90368bf;

    --really-transparent-primary-color: #534DF91a;
    --really-transparent-tetriary-color: #D903681a;

    --font-family: 'Roboto', sans-serif;
    letter-spacing: 0.4px;
    --font-size: 16px;
    --line-height: 1.5;
    --transition-duration: 0.3s;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --border-radius: 4px;
    --max-width: 1200px;
    --padding: 16px;

    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);

    --scrollbar-width: 0.25em;
    --scrollbar-bg: var(--background-color);
    --scrollbar-thumb: white;

}
body
{
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--background-color);
}

body > section
{
    min-height: 200vh;
}
.relative
{
    position: relative;
    width: 100%;
    height: 100%;
}

.flex-col
{
    display: flex;
    flex-direction: column;
}

.domain
{
    background-color: white;
    padding-bottom: 25vh;
}
.logo
{
    height: 100%;
    display: flex !important;
    --gap: 40;
    --left: 249;
    --right: 484;
    --total: calc(var(--left) + var(--gap) + var(--right));
    gap: calc(var(--gap) / var(--total) * 100%);
}
.logo img
{
    object-fit: contain;
}
.logo img.left {
    width: calc(var(--left) / var(--total) * 100%);
    aspect-ratio: 249 / 247;
    height: auto;
}

.logo img.right {
    width: calc(var(--right) / var(--total) * 100%);
    aspect-ratio: 484 / 252;
    height: auto;
    mix-blend-mode: exclusion;
}


.footer-gap-leaver
{
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
}

.place-holder-100-100
{
    position: relative;
    width: 100vw;
    height: 120vh;
}

.hidden
{
    display: none !important;
    visibility: hidden !important;
}




/* Responsive */
@media (max-width: 960px) {
    
}
@media (max-width: 896px) {
    
}
@media (max-width: 768px) {
    
}
@media (max-width: 640px) {
    
}
@media (max-width: 512px) {
    body
    {
        --font-size: 9.8px;
        font-size: var(--font-size);
    }
}