:root {
    /* Background colors */
    
    --color-bg-main: #1F1C2C;
    --color-bg-surface: #141120; /* Surface elements */
    --color-bg-hover: #333333; /* Hover states */
    /* Text colors */
    --color-text-primary: #928DAB; /* Light gray text */
    --color-text-muted: #aaaaaa; /* Secondary text */
    /* Accent color */
    --color-accent: #b6b1d6; /* Soft purple for links/buttons */
    --color-border: #4e4368;
    --color-bg-second: #3c3451;
}
/*body {
    background-color: var(--color-bg-main);
    
    margin: 0;
    padding: 0;*/
/*    border-color: var(--color-border);*/
/*}
html {
    
}*/

html, body {
    font-size: 20px;
    font-family: 'Outfit', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent double scrollbars */
    color: var(--color-text-primary);
    font-family: system-ui, sans-serif;
    background-color: #17131e;
}


.page {
    height: 100vh;
    width: 100vw;
    position: relative;
}
.faded-margins {
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.faded-margins-all {
    -webkit-mask-image: radial-gradient(ellipse closest-side, black 70%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side, black 70%, transparent 100%);
}
@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(12deg);
    }

    100% {
        transform: translateX(100%) rotate(12deg);
    }
}