body {
    padding: 0;
    margin: 0;
    height: fit-content;
    width: 100%;
    scroll-behavior: smooth;
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgb(255, 255, 255) var(--about-color-background);
}


::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
    scrollbar-width: none;
}

body {
    scrollbar-width: none;
    -ms-overflow-style: none; /* For IE 10+ */
    scrollbar-color: var(--about-color-background);
}


:root {
    --color-background: #140817;
    --about-color-background: #1e1b30;
    --footer_color: #9672df;
    
    --color-white: white;
    --color-white-transparent: rgba(255, 255, 255, .5);
    --color-border-white: white;
    --color-black: black;

    --header-hover: rgba(0, 0, 0, 0.3);

    --filter-brightness: 1;

    --small-font-size: 1.5rem;
    --text-color: white;
    --bebas-font: "Bebas Neue";
    --outfit-font: "Outfit";
    --text-opacity: 50%;

    --ball-color: #9672df;
    --ball-color-bright: #ce87f7;
    --ball-blur: blur(150px);

    --about-ball-color-bright: #ddb2ee;
    --about-ball-color: #9672df;

    --gradient-color: rgba(126,167,249,1);
    --gradient-color-op: rgba(126,167,249,0);
    --gradient-op: 15%;

    --projects-background-color: rgb(36,32,57);
    --projects-background-gradient: linear-gradient(0deg, rgba(36,32,57,1) 0%, rgba(20,8,23,1) 100%);

    --hover_scale: 1.07;
    --border: 15px;
    --padding: 25px;
    --gap: 25px;
    --transition_duration: .5s ease;

    --bebas_font: "Bebas Neue";
    --outfit_font: "Outfit";
} 

:root.active {
    --color-background: rgb(223, 198, 181);
    --about-color-background: #d1a98c;

    --color-white: #000000;
    --color-white-transparent: rgba(255, 255, 255, 0.5);
    --color-black: #ffffff;

    --header-hover: rgba(255, 255, 255, 0.3);

    --filter-brightness: 0;

    --text-color: #000000;
    --text-opacity: 80%;
    
    --ball-color: #3f2e64;
    --ball-color-bright: #673b80;
    --ball-blur: blur(100px);
    
    --gradient-color: rgb(44, 114, 255);
    --gradient-color-op: rgba(126,167,249,0);
    --gradient-op: 100%;

    --projects-background-color: unset;
    --projects-background-gradient: unset;
}

.all {
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;

    background-color: var(--color-background);
}

img {  
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none; 
}

button {
    all: unset;
}

figure {
    all: unset;
}

header {
    all: unset;
}

.home {
    width: 100%;
    height: 100%;
    display: unset;
}

.home.deactive {
    display: none;
}

a {
    all: unset;
}

section {
    all: unset;
    display: block;
}

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.blur_bottom {
    position: fixed;
    width: 100%;
    height: 300px;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    pointer-events: none;
}

.blur_bottom.project_blur {
    height: 200px;
}

.blur_bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    backdrop-filter: blur(3px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}