:root {
    --head-font: "Ribeye Marrow", serif;
    --primary-font: "Raleway", sans-serif; 
    --secondary-font: "Public Sans", sans-serif;  
    --primary-color: #D7004F;
    --secondary-color: #F9EEF1;
    --background-color: #750D3A;
    --background-color-2: #dd9dad;
    --background-color-3: rgba(251, 251, 251, 0.789);
    --background-color-4: rgba(248, 185, 243, 0.789);
    --background-color-5: transparent;
    --background-color-6: #E4E7EB;
    --checkbox-color: var(--primary-color);
    --gray-text: #606060;
    --whitesmoke: whitesmoke;
    --alt-black: black; 
    --alt-white: white;
    --hero-bg: url("/assets/hero-bg.png");
    --hero: url("/assets/hero.png");
    --logo:url('/assets/px-logo.png');
    --glass-black: black;
    --glass-secondary: var(--secondary-color);
    --theme-transition: .3s;


    /* Moving circles */
    --c1: var(var(--primary-color));
    --c2:  rgba(227, 22, 111, 0.6);
    --c3:  rgba(243, 192, 214, 1);


}

.darkmode {
    --alt-black: white; 
    --whitesmoke: black;
    --alt-white: rgba(15, 1, 8, 0.993);
    --glass-black: rgba(101, 101, 101, 0.63); 
    --background-color-2: rgba(101, 101, 101, 0.63);
    --background-color-3:rgba(0, 0, 0, 0.763);
    --glass-secondary: rgba(49, 49, 49, 0.63);
    --checkbox-color: transparent;
    --background-color-4: #83122f;
    --background-color-5: #1b1b1b;
    --background-color-6: #1b1b1b;



    --gray-text: #b3b3b3;
    --hero-bg: url("/assets/hero-bg-dark.png");
    --hero: url("/assets/hero-dark.png");
    

    /* Moving Circles */
    --c1: rgb(224, 224, 224);
    --c2: rgb(252, 186, 208);
    --c3: rgb(255, 129, 150);

    --c1-bshadow: 0 0 35px 0 var(--c1);
    --c2-bshadow: 0 0 35px 0 var(--c2);
    --c3-bshadow: 0 0 35px 0 var(--c3);
}

button {
    cursor: pointer; 
    background: transparent;
    outline: none; 
    border: none;
}

.section-titlebar {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    width: 100%; 
    height: auto;
    gap: 1em;
    
    .section-titlebar-title {
        font-family: var(--primary-font);
        
    }

    .section-titlebar-description {
        font-family: var(--secondary-font);
        color: var(--gray-text);
        font-size: 18px;
    }

}

.hidden {
    opacity: 0; 
    transition: all .9s; 
    transform: translateY(10px);
}

.show {
    opacity: 1;
    transform: translateY(0px);

}


/* Authentication section back button */
.back-btn {
    color: white; 
    position: absolute; 
    top: 1em; 
    left: 2em; 
    font-size: 1.3em;
}






/* @media screen and (max-width: 1368px) {
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 576px) {
}
@media screen and (max-width: 400px) {
} */